Github Action自动化部署到阿里云服务器

1.准备一个阿里云服务器

1.1.配置服务器权限组，开放指定端口的外部访问权限：

1.2.生成密钥对、应用到服务器实例并下载密钥对到本地保存

1.3.登录服务器，并安装docker

# 更换系统镜像源
sed -e 's|^mirrorlist=|#mirrorlist=|g' \
    -e 's|^#baseurl=http://dl.rockylinux.org/$contentdir|baseurl=https://mirrors.aliyun.com/rockylinux|g' \
    -i.bak \
    /etc/yum.repos.d/rocky*.repo

dnf makecache

# 添加docker镜像源并安装

# Step 1: 安装必要的一些系统工具
sudo dnf install -y yum-utils device-mapper-persistent-data lvm2
# Step 2: 添加软件源信息
sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# Step 3
sudo sed -i 's+download.docker.com+mirrors.aliyun.com/docker-ce+' /etc/yum.repos.d/docker-ce.repo
# Step 4: 更新并安装Docker-CE
sudo dnf makecache
sudo dnf -y install docker-ce
# Step 4: 开启Docker服务
sudo service docker start
# Step 5：查看docker信息
docker info
# Step 6：设置docker服务开机启动
sudo systemctl enable docker

服务器准备完毕

2.Github Action配置

• 生成github仓库
• vscode安装github action插件（可不装，装了可以直接在插件上进行配置，否则要登录github页面进行配置）
• 配置action secrets（一般情况）
• • SERVER_REMOTE_HOST：云服务器主机IP eq：0.0.0.0
  • SERVER_REMOTE_USER：云服务器用户名 eq：root
  • SERVER_SSH_KEY：云服务器密钥（阿里云密钥对）eq：[ssh key]
  • SERVER_TARGET：云服务器文件夹路径 eq：/home/my-project

github action 准备完毕

3.前端项目

3.1.创建.github/workflows/ci.yml文件

这个文件是告诉github action在特定的节点需要做什么事

以下脚本，表示在master分支有push操作的时候，执行任务

• 拉取代码
• 更新依赖包
• 执行打包命令
• 将必要文件推送到阿里云服务器
• 在阿里云服务器执行命令 

name: Build app and deploy to aliyun
on:
  push:
    branches:
      - master
jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Install Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18.0.0'

    - name: Install npm dependencies
      run: npm install -legacy-peer-deps

    - name: Run build task
      run: npm run build

    - name: Deploy to Server
      uses: easingthemes/ssh-deploy@v5.1.1
      with:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: '-rlgoDzvc --delete'
          SOURCE: 'dist Dockerfile docker.sh nginx.conf'
          REMOTE_HOST: ${{ secrets.SERVER_REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.SERVER_REMOTE_USER }}
          TARGET: ${{ secrets.SERVER_TARGET }}
          SCRIPT_BEFORE: ls

    - name: Run Docker Commands on Server
      uses: appleboy/ssh-action@v0.1.7
      with:
          host: ${{ secrets.SERVER_REMOTE_HOST }}
          username: ${{ secrets.SERVER_REMOTE_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            cd ${{ secrets.SERVER_TARGET }}
            sh docker.sh

3.2.前端项目新建文件docker.sh

会被推送到阿里云服务器并执行

• 停止 docker 容器 my-container
• 删除 docker 容器 my-container
• 删除 docker 镜像 my-container
• 使用当前目录 Dockerfile 构建镜像 my-container
• 运行 docker 镜像 my-container
• • 挂载当前nginx配置文件到容器内指定文件夹

docker stop my-container
docker rm my-container
docker rmi my-container
docker build -t my-container .

docker run -d \
-p 80:80 \
--name my-container \
--restart on-failure:5 \
-v /home/home/nginx.conf:/etc/nginx/conf.d/default.conf \
my-container

3.3.前端项目新建文件Dockerfile

会被推送到阿里云服务器并由上一步sh文件执行执行

• 使用nginx镜像构建镜像
• 拷贝dist文件到nginx html文件夹下
• 启动nginx

FROM nginx:latest
COPY dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3.4.前端项目新建文件nginx.conf

需要推送到阿里云服务器并由上一步sh文件执行执行

• 编写前端nginx相关配置

至此便完成前端相关工作， 总结：

• 前端push代码到github master分支
• 触发github action（.github/workflows/ci.yml）
• • 拉取代码
  • 更新依赖包
  • 执行打包命令
  • 将dist、nginx.conf、 DockerFile、 docker.sh 文件推送到阿里云指定服务器
  • 在阿里云服务器执行命令
  • • 进入指定目录
    • 执行sh docker.sh
    • • 停止 docker 容器 my-container
      • 删除 docker 容器 my-container
      • 删除 docker 镜像 my-container
      • 使用当前目录 Dockerfile 构建镜像 my-container
      • • 使用nginx镜像构建镜像
        • 拷贝dist文件到nginx html文件夹下
        • 启动nginx
      • 挂载当前nginx配置文件到容器内指定文件夹并运行 docker 镜像 my-container
• github action结束

4.前后端项目区别

• 前端项目启动使用构建产物通过nginx就可以正常访问，所以前端项目可以在action上打包，并只将打包产物推送到服务器。
• 后端node项目（nestJs）构建产品仅为编译TS后的js文件，要启动还需要安装项目所有依赖，所以需要将所有文件推送到服务器，在服务器docker环境中安装依赖并使用pm2等工具托管。