自动化部署

自动化部署

参考文章

1. https://blog.csdn.net/qq_55364003/article/details/123696959
2. https://developer.aliyun.com/article/974792

可以得到什么

自动化部署之后，每次将代码push到仓库之后，仓库会帮你打包，并推到服务器上，然后网站的内容就相当于自动更新了

大致流程

配置yml文件->配置secrets
#3 环境
仓库：github
包管理工具：pnpm

.yml文件代码

1. 总代码

name: browser-home-page
 
on:
  push:
    branches: 
      - main
 
  workflow_dispatch:
 
jobs:
  build:
    runs-on: ubuntu-latest
  
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Set Up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16.14'

      - name: Install pnpm
        run: npm install -g pnpm
      - name: pnpm install
        run: |
          cd chat
          pnpm install
      - name: pnpm run build
        run: |
          cd chat
          pnpm run build
      - name: copy file via ssh key
        uses: appleboy/scp-action@master
        with:
            source: 'chat/dist/*'
            host: ${{ secrets.REMOTE_HOST }}
            target: ${{ secrets.REMOTE_PATH }}
            port: 22
            username: ${{ secrets.USER_NAME }}
            password: ${{ secrets.PASSWORD }}
            key: ${{ secrets.SSH_KEY }}

2. 分析：
   1. node版本，因为我使用的是pnpm，所以需要制定node的版本，如果使用的是npm，则不需要指定这个

- name: Set Up Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '16.14'

2. pnpm安装，需要全局安装pnpm

- name: Install pnpm
  run: npm install -g pnpm

3. 指令与执行，第一个是依赖包的安装，第二个是打包，因为我的仓库根目录下的chat文件夹才是项目所在，所以需要用cd chat来进入项目

- name: pnpm install
  run: |
    cd chat
    pnpm install
- name: pnpm run build
  run: |
    cd chat
    pnpm run build

4. 下面这些是服务器上面的设置，一些地址、接口、端口、用户名、密码、ssh秘钥

- name: copy file via ssh key
  uses: appleboy/scp-action@master
  with:
      source: 'chat/dist/*'
      host: ${{ secrets.REMOTE_HOST }}
      target: ${{ secrets.REMOTE_PATH }}
      port: 22
      username: ${{ secrets.USER_NAME }}
      password: ${{ secrets.PASSWORD }}
      key: ${{ secrets.SSH_KEY }}

配置yml

创建.yml文件，将上面的代码粘贴修改

配置secrets

1. 按照以下的步骤来配置secrets

2. name这些就是.yml文件中secrets.后缀的那一串，例如下面这个

secrets.USER_NAME

测试

全部都配完之后，就是push代码测试了，可能会有一些奇奇怪怪的报错，解决一下就好了。