灏天阁

使用 github action 实现自动化部署

· Yin灏

一、背景

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

二、概念

CI 持续集成

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

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

  1. 代码检查（review）

    1.1 风格检查:

    • 对代码规范进行检查，看看是不是有长函数， 大小写不规范， 公开函数不写注释这样的问题

    1.2 功能走查:

    • 一般是请另一名开发人员检查代码逻辑是否有问题， 代码实现方法是否合理

    1.3 安全扫描:

    • 检查代码是否有安全漏洞， 不如内存溢出， sql注入， 密匙泄漏风险

  2. 集成测试

    • 测试新代码的程序是否能正常工作， 是否和预期一致
CD 持续部署

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

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

三、配置

1. 打开github项目 找到Actions

image.png

2. 点击 New workflow

image.png

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

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

image.png

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

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

然后cd 到 ~/.ssh

image.png

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

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

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

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

操作:

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

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

image.png image.png

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

secrets 我们需要定义两个变量

  1. SERVER_IP - 服务器的地址

  2. 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中看到我们工作流的执行情况

image.png

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

打开服务器控制台

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

image.png

可以看到我们 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

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

image.png

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

接下来访问一下

image.png

大功告成！

- Book Lists -