使用github action 实现自动化部署

一、背景

当我在github创建一个react项目后，我想每次git push之后，将我的项目的代码关联到我的服务器上。如果不用自动化部署的话，我需要在服务器上git clone代码然后 npm i npm run build。每推一次，都要去执行上面的操作，很费时费力。 github action就可以解决这个问题。当我git push之后，代码会自动部署到你指定的服务器对应文件夹下。

二、概念

CI 持续集成

集成指的是开发过程中，新代码逐渐通过各种检测合入项目主干的过程。

在这个过程中，一般会做这样一些事情

代码检查（review）

1.1 风格检查:
- 对代码规范进行检查，看看是不是有长函数，大小写不规范，公开函数不写注释这样的问题
1.2 功能走查:
- 一般是请另一名开发人员检查代码逻辑是否有问题，代码实现方法是否合理
1.3 安全扫描:
- 检查代码是否有安全漏洞，不如内存溢出， sql注入，密匙泄漏风险
集成测试
- 测试新代码的程序是否能正常工作，是否和预期一致

CD 持续部署

部署就是把编译成功的程序成功交付给用户的过程。网站型软件就是部署到生产服务器，

也有客户端软件就是上传到应用商店等。

三、配置

1. 打开github项目找到Actions

2. 点击 New workflow

点击 set up a workflow yourself 创建工作流

在项目中会出现yml文件，在这里就可以写工作流

3. 服务器生成公匙和私匙

在服务器的控制台执行 ssh-keygen -t rsa

然后cd 到 ~/.ssh

可以看到生成了 id_rsa (私匙) 和 id_rsa.pub(公匙)

cat ./id_rsa 查看私匙保存起来第四步要用到

⚠️注：查看私匙上面的 -----BEGIN RSA PRIVATE KEY----- 和下面的 -----END RSA PRIVATE KEY-----都要复制下来

我们要把公匙复制到 authorized_keys 里面去

操作:

cat ./id_rsa.pub 查看公匙并复制
vim ./authorized_keys
按 i 进行编辑把上面复制的公匙粘贴到里面
按esc 输入命令 :wq （写入并保存）

4. 定义secrets

我们点击settings，在左边找到 Secrets Actions

在这里我们就可以新建密匙

secrets 我们需要定义两个变量

SERVER_IP - 服务器的地址
SSH_PRIVATE_KEY - 服务器生成的私匙

5. 配置yml文件

name: Continuous Deploy #action名称
on: [push] #在推送的时候运行此action

jobs:
  deploy_job: # 工作名称
    runs-on: ubuntu-latest  #运行环境
    name: build
    steps: # 步骤
      # check out the repository
      - name: Checkout    
        uses: actions/checkout@v3    #这里使用了github官方提供的action,checkout项目到虚拟机上

      - name: Install Dependencies
        run: yarn #执行的命令
      - name: Build
        run: yarn build

      # 利用action把build好的文件上传到服务器/workspace/react-note路径下,需要确认此目录已在服务端创建
      - name: deploy file to server
        uses: wlixcc/SFTP-Deploy-Action@v1.0 
        with:  
          username: 'root'   #ssh user name
          server: '${{ secrets.SERVER_IP }}' #引用之前创建好的secret
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} #引用之前创建好的secret
          local_path: './dist/*'  # 对应我们项目build的文件夹路径
          remote_path: './workspace/react-note'  # 将项目build文件夹部署到远程文件夹

在这里我们可以看到引用了变量 SERVER_IP 和 SSH_PRIVATE_KEY。这是我们第四步定义的

6. git push代码检查工作流是否成功

当git push代码后我们可以在actions中看到我们工作流的执行情况

我们可以看到执行成功了下面我们去服务器的文件夹下看下打包的dist文件有没有输出到 ./workspace/react-note下面

打开服务器控制台

输入： cd /workspace/react-note (上面远程设置的文件夹)

可以看到我们 yarn build 后的 dist文件已经部署到了服务器对应文件夹里面

7. 通过nginx配置将项目的根目录指定要对应域名上进行访问

安装nginx的步骤在百度上有教程跟着做就可以了

安装完后编辑nginx对应的配置

vim /usr/local/nginx/conf/nginx.conf

添加个server配置

server {

        listen 5173; // 端口号

        server_name www.ldyabcd.cloud; // 域名

        access_log /var/log/nginx/access.log; // 运行日志

        error_log /var/log/nginx/error.log; // 错误日志

        location / {

            root /opt/react-note; // 服务器项目的路径

            index index.html index.htm; 

        }

    }

保存完后重启nginx 并加载最新配置

1. cd /usr/local/nginx/sbin

2. ./nginx -s stop

3. ./nginx

4. ./nginx -s reload

然后在自己的服务器防火墙处把端口打开

因为我nginx指定的5173端口所以我加上了一条5173的规则

接下来访问一下

大功告成！