一、前置条件

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

二、生成密钥对

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

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

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

执行完成后生成文件

私钥文件：github_actions_key
公钥文件：github_actions_key.pub

2.配置阿里云服务器
“你的公钥内容”是github_actions_key.pub文件内的所有数据

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

3.设置 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 看运行结果根据错误提示修改

Tags：daemon off