利用Github Action自动部署前端应用

前言

之前趁着腾讯云双十一搞活动，买了3年的云主机，买完之后一直没有时间去折腾，趁着元旦假期，正好抽空学习了下Github Action的相关操作，做下记录，有相同想法的同学可以尝试看下。
本次操作的场景是纯静态前端部署，将打包生产的dist文件夹部署在nginx的/usr/share/nginx/html下。利用Github Action实现，步骤为前端项目的build -> 生成docker镜像 -> 上传至腾讯云个人镜像服务（私有镜像） -> 执行服务器脚本拉去镜像 -> 通过镜像运行容器

准备工作

• 一个github仓库
• 一个腾讯云服务器（记得安装好docker）cloud.tencent.com/developer/a…

部署前端博客

新建Github Action

在github自己的仓库下面创建Github Action

设置workflow

选择自己设置workflow

配置workflow的yml文件

在新生成的yml文件中直接粘贴如下代码

name: Docker Image CI # Actions名称
on:
  # 触发workflow的动作形式，这里是手动触发
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: checkout
      uses: actions/checkout@master
    # 安装依赖
    - name: install
      run: yarn
    # 打包
    - name: build project
      run: yarn run build
    # 打包镜像推送到腾讯云容器镜像服务
    - name: Build the Docker image
      run: |
        docker login --username=${{ secrets.DOCKER_USERNAME }} ccr.ccs.tencentyun.com --password=${{ secrets.DOCKER_PASSWORD }}
        docker build -t lizonghao:latest .
        docker tag lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
        docker push ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
    # 使用appleboy/ssh-action@master登录服务器执行拉取镜像脚本，服务器ip、用户名、密码配置方式同容器镜像服务配置方式一样
    - name: ssh docker login
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USERNAME }}
        password: ${{ secrets.SSH_PASSWORD }}
        script: cd ~ && sh lizonghao.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }}
复制代码

分几个部分来解释下上述的yml文件

Build the Docker image

关键部分在Build the Docker image，前面都是普通的前端安装依赖，构建静态资源的部分。
在仓库项目根目录下新建Dockerfile文件，这是最简单的前端项目配置，其中还有一个nginx的配置拷贝，记得仓库项目根目录下也新建同样的default.conf配置文件。
Dockerfile

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
复制代码

/nginx/default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
复制代码

其中docker login是要登陆到腾讯云的个人私有容器服务，这个服务个人版本是免费的。
服务地址是：console.cloud.tencent.com/tcr/reposit…
文档发地址：cloud.tencent.com/document/pr…

run: |
        docker login --username=${{ secrets.DOCKER_USERNAME }} ccr.ccs.tencentyun.com --password=${{ secrets.DOCKER_PASSWORD }}
        docker build -t lizonghao:latest .
        docker tag lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
        docker push ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
复制代码

这部分有个secrets.DOCKER_USERNAME和secrets.DOCKER_PASSWORD
这个的设置是github提供的secrets设置，方便我们将不能泄漏的数据存储起来，设置的位置在

name value形式的，填入你想存储文件的name和value就可以了
其中在腾讯云个人容器服务中DOCKER_USERNAME是你的腾讯云账号。
然后我们关注下

ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
复制代码

在文件中这个路径前面的域名是腾讯个人容器服务的域名，第二个地址是你的容器服务的命名空间，第三个是你docker的镜像名字。

执行部署脚本

 - name: ssh docker login
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USERNAME }}
        password: ${{ secrets.SSH_PASSWORD }}
        script: cd ~ && sh lizonghao.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }}
复制代码

这其中secrets.SSH_HOST、secrets.SSH_USERNAME和secrets.SSH_PASSWORD是你云服务器的host地址，登陆用户名，一般是root和你设置的登陆密码。
script是登陆成功之后要执行的服务器的脚本名称，所以需要提前在服务器上去新建一个sh的脚本，脚本内容如下

echo -e "---------docker Login--------"
docker login --username=$1 ccr.ccs.tencentyun.com --password=$2
echo -e "---------docker Stop--------"
docker stop lizonghao
echo -e "---------docker Rm--------"
docker rm lizonghao
docker rmi ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------docker Pull--------"
docker pull ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 80:80 --name lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------deploy Success--------"
复制代码

这是一个基础的sh脚本，其中步骤分别是 1.登陆docker私人镜像服务 2.关闭当前运行前端容器 3.移除当前运行前端容器镜像 4.移除当前运行前端容器远端镜像 5.拉取远端最新前端容器镜像 6.运行拉去最新的前端镜像端映射为80端口

执行Github Action

至此，所有的操作都已完成，只需要在Github Action的菜单下，执行对应的action动作，等待部署动作的完成。

最后，通过域名或者公网ip的地址，就能正确的访问你的前端项目啦，后续改动只需要推送到github上即可一键发布。