GitHub自动部署FMS前端项目到阿里云

一、前置条件

申请阿里云服务器、构建docker运行环境
参考这篇：手动部署FMS前端项目

二、生成密钥对

该步骤是为了使github可以使用ssh的方式访问阿里云服务器

1. 本地机器构建私钥和公钥,cmd下执行

ssh-keygen -t rsa -b 4096 -C "github-actions"

2. 执行完成后生成文件
   
   私钥文件：github_actions_key
   公钥文件：github_actions_key.pub
3. 配置阿里云服务器
   "你的公钥内容"是github_actions_key.pub文件内的所有数据

# 登录服务器后执行
mkdir -p ~/.ssh
echo "你的公钥内容" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys

4. 设置 GitHub Secrets
   在 GitHub 仓库中：

• 进入 Settings → Secrets → Actions
• 点击 New repository secret 依次创建：
  • SSH_PRIVATE_KEY：粘贴完整的私钥内容（包括-----BEGIN RSA PRIVATE KEY-----和-----END RSA PRIVATE KEY-----）
  • SERVER_HOST：服务器公网 IP（如 123.123.123.123）
  • SERVER_USER：登录用户名（如 root 或 ubuntu）
    

三、前端项目目录下构建相关文件

1. 构建Dockerfile文件

# 使用Nginx作为生产服务器
FROM nginx:alpine

# 复制构建产物和Nginx配置
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露应用运行的端口
EXPOSE 80

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

2. 构建deploy.sh文件

#!/bin/bash

# 停止并删除旧容器（如果存在）
if [ "$(docker ps -aq -f name=fms_nginx)" ]; then
    echo "停止并删除旧的容器..."
    docker stop fms_nginx
    docker rm fms_nginx
fi

# 在服务器上构建Docker镜像
echo "在服务器上构建Docker镜像..."
docker build -t fms_nginx:latest .

# 运行新容器
echo "启动新的容器..."
docker run -d -p 80:80 --name fms_nginx fms_nginx:latest

echo "部署完成！"

四、构建CICD脚本

在github上构建actions执行脚本
必须在.github/workflows/目录下构建 ci-cd.ymal

name: CI/CD Pipeline

on:
  workflow_dispatch:  # 添加手动触发选项
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 'latest'
        cache: 'npm'

    - name: Install Dependencies
      run: npm install

    - name: Build
      run: npm run build

    - name: Deploy to Server
      env:
        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
        SERVER_HOST: ${{ secrets.SERVER_HOST }}
        SERVER_USER: ${{ secrets.SERVER_USER }}
      run: |
        mkdir -p ~/.ssh/
        echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan -H $SERVER_HOST >> ~/.ssh/known_hosts
        
        # 复制构建产物、部署脚本和必要文件到服务器
        scp -r dist deploy.sh Dockerfile nginx.conf $SERVER_USER@$SERVER_HOST:~/fms_admin/
        
        # 在服务器上执行部署脚本
        ssh $SERVER_USER@$SERVER_HOST "cd ~/fms_admin && \
        chmod +x deploy.sh && \
        ./deploy.sh"

五、如果不成功查找问题

1. 在阿里云服务器上 cd ~/fms_admin 目录下查看是否有相关文件
   dist deploy.sh Dockerfile nginx.conf
2. 查看fms_nginx容器是否正常运行

# 查看容器是否存在
docker ps -a
# 查看镜像是否生成
docker images

如果fms_nginx没有正常运行，直接执行 ./deploy.sh 看运行结果根据错误提示修改