[GitHub Actions]-前端自动化部署Vue3+Vite-初探

2,306 阅读3分钟

一、 新建一个项目

首先,你需要有一个项目,接下来的操作都是基于这个项目仓库进行升华的。这里以创建Vue3应用为例, 参考vue官网新建一个vue应用

npm init vue@latest

按照提示,一步一步往下选择就可以,如图:

image.png 项目被创建之后,通过以下命令安装依赖并启动开发服务器

cd github-ci-demo
yarn install
yarn dev

image.png 就可以访问开发环境

image.png

二、 推到GitHub仓库

方式多种多样,只要推到仓库就行。先去github新建一个仓库,然后本地运行以下命令

git init
git add .
git commit -m 'feat: first commit '
git remote add origin git@github.com:wx901120/github-ci-demo.git
git push origin master

至此,项目就推上去了

image.png

三、GitHub Actions实现自动化部署

针对它是什么、怎样运作的问题,可以参考阮一峰老师的文章GitHub Actions 入门教程

3.1、生成workflow文件

在当前仓库的.github/workflows目录下,生成一个 workflow 文件,名字可以随便取,如ci.yml

参考别人已经写好的action:JamesIves/github-pages-deploy-action@v4

name: GitHub Actions Build and Deploy Demo        # 大标题
on:
  push:
    branches:
      - master                                   # 监听哪个分支的哪个动作
permissions:
  contents: write                                # 设置权限,可写,也可以不用配置,v4版本新增的
jobs:
  build-and-deploy:                              # 其中一个任务的名称,ID
    runs-on: ubuntu-latest                       # 这个任务运行所需的环境
    steps:
      - name: Checkout 🛎️                        # 第一步:获取源码
        uses: actions/checkout@v3                # 使用的工具

      - name: Install and Build 🔧               # 第二步:下载依赖和构建
        run: |
          yarn install
          yarn build

      - name: Deploy 🚀                         # 第三步:部署
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist                         # 部署的目录
          branch: gh-pages                     # 部署到哪个分支

3.2、检验部署

将刚才写好的代码,提交到仓库,看是否会触发自动化部署,打开你的仓库的Actions就可以看到构建过程,如图所示:

image.png 自动部署成功

3.3、检验登录网址

部署成功后,访问网址,发现页面空白,打开控制台发现报错了。。。

image.png 于是,查看Vite官网-部署,发现通过vite构建的项目需要注意vite.config.ts中的base参数配置

image.png 于是,修改vite配置中的base

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
+ base: "/github-ci-demo/",
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

之后,再次部署,登录,发现还是报错,index.html文件也不是dist目录下生成的文件,炸裂。。。。有知道的大佬麻烦解释下。 没办法,最后通过vite官网提供的.yml文件成功了。

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # 仅在推送到默认分支时运行。
  push:
    branches: ['master']

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:      

# 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages。
permissions:
  contents: read
  pages: write
  id-token: write

# 允许一个并发的部署
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 单次部署的工作描述
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

image.png

四、参考链接