使用github action部署react项目到阿里云

在github创建actions

这是会跳转到新建actions页面， 如下

on:
  push:
    branches: [ main ] #当push代码到main分支时会自动触发action
    
jobs:
  build:
    runs-on: ubuntu-latest        # github分配的运行平台，无需更改
    steps:  # 某个任务的一系列步骤,如前端需要安装依赖，编译打包代码等等
      - uses: actions/checkout@v2     #使用action库 actions/checkout获取源码，执行你的操作
        with:
          persist-credentials: false
          ref: main
          submodules: true
          
       #安装依赖
      - name: install 
        run: npm i
       #打包
      - name: build
        run: npm run build
       # 使用Upload-File-Action库上传打包文件到远程服务器
      - name: 上传文件到远程服务器
        uses: zhenyuWang/Upload-File-Action@v1.0.1
        with:
          username: ${{ secrets.REMOTE_USER }} #远程服务器的登录名
          server: ${{ secrets.REMOTE_HOST }} #远程服务器的ip地址
          port: "22" #远程服务器的端口
          ssh_private_key: ${{ secrets.SERVER_SSH_KEY}} #远程服务器的私钥
          # 要上传文件所在目录
          local_path: "./dist"
          # 远程服务器目标路径
          target_path: "/usr"

这里的secrets.REMOTE_HOST和secrets.SERVER_SSH_KEY以及secrets.REMOTE_USER为了防止泄漏，需要在代码仓库的settings中设置

在服务器中生成配置密钥

这时github actions以及搭建完毕。这时需要去服务器生成和获取私钥以及配置公钥 首先ssh连接服务器： ssh username@host.com 然后进入.ssh文件夹中： cd ~/.ssh 在.ssh文件夹中我们需要生成我们的私钥和公钥，注意⚠️！生成私钥和公钥要注意要使用 ssh-keygen -t rsa -b 4096 -C "your_email@example.com"方法生成，不要使用 ssh-keygen -t ed25519 -C "your_email@example.com"方法 后面一路回车直到成功生成密钥 成功以后在.ssh文件夹中执行cat github-actions.pub >> ~/.ssh/authorized_keys这时会把公钥复制到authorized_keys这个文件中， 最后 cat github-actions 进入私钥文件中，复制出私钥：

放入到仓库中的settings中SERVER_SSH_KEY

参考文章：
# 利用Github Actions实现自动化部署
# Deploying to a server via SSH and Rsync in a Github Action
# GitHub Actions 部署页面至阿里云ECS