使用Github的Action自动部署前端项目

前端项目,自动化部署相关的测试.只需要自己设置的分支提交了代码,有更新,就会触发自动部署.具体的yml文件可以参考项目中的代码.

注意事项:

在使用 vite 构建的时候,我们写的页面引入的 jsx 文件,浏览器无法解析.要在 vite.config.js 中进行配置.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/form-check-react/',
});

注意配置base目录,参考文章:

Deploying a Static Site

前端自动化部署测试

  • 本地项目在命令行中执行git init,然后进行提交.
  • 在github.com上面新建一个项目.
  • 创建一个main分支,然后将本地项目与远程项目进行关联.
  • 推送到远程仓库.

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/pybyongbo/form-check-vue.git
git push -u origin main

创建.yml 文件

在 main 分支中,创建一个.github/workflows/main.yml的文件,进行提交.具体内容可以参考文件.

在 Secrets and variables 中找到 Actions,配置 Repository secrets,部署文件中使用到的变量.

目的是使 github 有权限可以对项目进行操作.

新建gh-pages分支

在github.com网站上面,找到自己的项目,基于main新建一个gh-pages分支,然后点击 setting 选项,找到侧边栏 pages,在 deploy from a branch 中选择 gh-pages分支.

自动部署流程

以上都设置好后,只要我们提交了更改,并且推送到远程对应的分支,就会触发自动部署.部署完成后,刷新网页即可看到网页的更新.