Skip to content

CI/CD部署

以GitHub action为例(免费)

deploy.yml文件

yml
name: deploy
on:
  push:
    branches: [main] # main 分支有 push 时触发
    paths-ignore:   # 下列文件的变更不触发部署,可以自行添加
      - README.md
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 下载源码
      # 这一步就是检出你的仓库并下载里面的代码到runner中,actions/checkout@v2是官方自己造的轮子,直接拿来用就行
      - name: Checkout
        uses: actions/checkout@v2

      # 打包构建
      - name: Build
        uses: actions/setup-node@master
        with:
          node-version: '20.x'
      - run: npm install # 安装依赖
      - run: npm run build # 打包

      # 部署到 GitHub pages
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
        with:
          # 部署到 gh-pages 分支
          branch: gh-pages
          # deploy_key: ${{ secrets.CICDDEMO }} # 部署密钥,在项目的 Settings/Secrets 中配置
          publish_dir: ./dist # 部署打包后的 dist 目录
          github_token: ${{ secrets.VITE_CI }} # secret 名
          user_name: ${{ secrets.MY_USER_NAME }}
          user_email: ${{ secrets.MY_USER_EMAIL }}
          commit_message: 自动部署 # 部署时的 git 提交信息,自由填写
name: deploy
on:
  push:
    branches: [main] # main 分支有 push 时触发
    paths-ignore:   # 下列文件的变更不触发部署,可以自行添加
      - README.md
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 下载源码
      # 这一步就是检出你的仓库并下载里面的代码到runner中,actions/checkout@v2是官方自己造的轮子,直接拿来用就行
      - name: Checkout
        uses: actions/checkout@v2

      # 打包构建
      - name: Build
        uses: actions/setup-node@master
        with:
          node-version: '20.x'
      - run: npm install # 安装依赖
      - run: npm run build # 打包

      # 部署到 GitHub pages
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
        with:
          # 部署到 gh-pages 分支
          branch: gh-pages
          # deploy_key: ${{ secrets.CICDDEMO }} # 部署密钥,在项目的 Settings/Secrets 中配置
          publish_dir: ./dist # 部署打包后的 dist 目录
          github_token: ${{ secrets.VITE_CI }} # secret 名
          user_name: ${{ secrets.MY_USER_NAME }}
          user_email: ${{ secrets.MY_USER_EMAIL }}
          commit_message: 自动部署 # 部署时的 git 提交信息,自由填写

需要在GitHub建一个仓库,然后把工程化代码上传到仓库

image-20241124151329799

新建一个分支,命名为gh-pages

image-20241124151501601

在Settings->Pages,选择分支目录

image-20241124151920152

然后再到用户设置

image-20241124152957595

再到开发者设置

image-20241124153143743

拿到token

image-20241124153219554

需要新建token

image-20241124153304036

要输入GitHub的登录密码验证

image-20241124153346897

生成token前,需要填写一些资料

image-20241124153642487

然后在Actions中新建加密数据

image-20241124154632340

把生成好的token写入加密数据中

image-20241124154752039

之后提交更改后的代码,git提交,等一会就会自动更新线上了

image-20241124160536813

luoluo857.github.io/vite-ci/

程序员小洛文档