使用github的CI/CD自动部署项目

2022年7月12日 17:18 by wst

服务部署

---

现在（2022-07-12）DevOps的概念炒的很火，现实中有很多企业和个人都在使用。

但自己搭建一套基础设施又太麻烦，这里可以借助GitHub自动的工作流来完成自动部署。

下面是踩坑记录及解决方案：

踩坑记录

1. 刚开始从B站上看到一个视频，讲到了github代码的自动部署，于是照着做了一遍，奈何就是不成功。

2. 中间经历了好几天，每天思考这个问题，为什么不成功，怎么解决。

3. 具体的方法和思路如下：

    i. 看看是什么原理：原来GitHub是通过docker的方式实现的，也就是说你的部署步骤都是在容器里做的。

    ii. 尝试很多网上搜到的结果，没有一个凑效，因为文章都是旧版本的GitHub。

    iii. 解决问题最好的方法莫过于看官方文档，通过文档，设置完环境变量后。在yml文件中还要指定环境的名字。

解决方案

为了照顾到对这方面知识不懂的小白，这里从最基本的步骤开始。

前置：

了解并使用过GitHub，会创建、打包、部署vue项目。

步骤：

1. 在本地创建一个vue项目hello-world. 如果不会创建vue环境，参考这里。

vue create hello-world

2. 打开github.com，创建一个项目hello-world.

假定创建好的项目的git地址为：git@github.com:movingheart/hello-world.git

3. 关联本地项目和GitHub项目。进入本地项目目录后，执行如下命令:

git remote add origin git@github.com:movingheart/hello-world.git
git push -u origin master

4. 进入GitHub项目页（我的是：https://github.com/movingheart/hello-world），点击“Actions”,然后在新页面中点击“New workflow”按钮。

5. 在打开的页面中，点击“Node.js”卡片的"Configure"来创建对应的workflow配置。如果所示：

6. 在弹出的页面中，把配置文件内容替换为如下：

name: Node.js CI

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:

    runs-on: ubuntu-latest
    environment: auto-deploy-test
    steps:
    - uses: actions/checkout@master
    - name: Use Node.js 16.x
      uses: actions/setup-node@v3
      with:
        node-version: 16.16.0
        cache: 'npm'
    - run: npm install
    - name: build project
      run: npm run build --if-present
    - name: Deploy to Server
      uses: easingthemes/ssh-deploy@main
      env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: "-rltgoDzvO --delete"
          SOURCE: "dist/"
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
          EXCLUDE: "/node_modules/"

7. 注意里面的配置项：secrets.SERVER_SSH_KEY 这样的有四个变量，需要在settings中配置。在当前页面，右键点击“Settings”在新标签页打开。

8. 设置下这四个变量--把build后的文件拷贝到服务器时会用的配置。

在新标签页中，点击左边的“Security->Secrets->Actions”, 然后在右侧点击“Manage your environments and add environment secrets”，如图所示：

然后再点击“New environment”, 取个名字（可以构建几个环境：测试的、生产的、开发的），比如叫“auto-deploy-test”。

设置完后，在页面的最下方找到“Add Secrets”前面有个＋号的按钮。点击它把需要的变量分别添加下。

1) SERVER_SSH_KEY -- 认证用的秘钥（github的docker和服务器通信时用. 想省劲可用本地的秘钥~/.ssh/id_rsa拷过去，同时也记得把本地公钥拷~/.ssh/id_rsa.pub贝到服务器的~/.ssh/authorized_keys文件中）

2) REMOTE_HOST -- 服务器地址，一般为外网IP

3) REMOTE_USER -- 登录服务器的用户

4) REMOTE_TARGET -- 把build后的文件拷贝服务器的哪个目录

9. 回到工作流配置页面，点击右上角的“Start commit”按钮提交本次修改。

10. 然后点击“Actions”按钮可以看到工作流的状态，点进去可以看详情。

 

总结

看到这里，不知读者是否明白了原理，可以想想，答案在下面

 

 

 

原理：提交代码后，GitHub把代码拉取到自己的docker容器中，然后执行相应的命令，比如安装环境、构建代码。然后把构建好的代码通过ssh的方式拷贝的你的服务器上。我的测试域名为：http://test.wanshitao.com/

---