前端github-workflows部署腾讯云轻量服务器
首先说下我的github的目录结构
root-directory/
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Actions 自动化部署配置
├── user-console/ # 前端项目1
│ ├── src/*
│ ├── package.json
│ └── node_modules/ # 依赖包目录
├── user-management/ # 前端项目2
│ ├── src/*
│ ├── package.json
│ └── node_modules/ # 依赖包目录
└── README.md
需要腾讯云准备得内容
- 服务器 ip地址(公网)
- ssh端口号(默认就用22)
- ssh链接的用户名
- ssh链接的私钥
ssh私钥如何获取
- 服务器控制台
- 左侧控制台 SSH密钥
- 正常这个创建完会自动给你下载一个.pem后缀的秘钥,很关键记得保存。如果没了你就重新创建一个
- 然后去服务器里面点开之后会看到SSH密钥,根据步骤绑定即可。
- 注意:上面的名字就是( ssh链接的用户名)
腾讯云准备ok后去github上开始进行配置关键key信息,如下:
最后配置 yml
├── .github/
│ └── workflows/
│ └── deploy.yml
name: 自动化部署更新# 触发条件:main分支推送且涉及前端/配置文件变更
on:push:branches: ["main-publish"]paths:- "user-console/**"- "user-management/**"- ".github/workflows/deploy.yml"jobs:build-user-console:runs-on: ubuntu-lateststeps:- name: 拉取代码uses: actions/checkout@v4with:fetch-depth: 0- name: 查看当前Node版本run: |echo "当前预装Node版本:$(node -v)"- name: 安装user-console依赖working-directory: "./user-console"run: |echo "安装前端依赖..."npm installif [ $? -ne 0 ]; then echo "前端依赖安装失败"; exit 1; fi- name: 前端打包working-directory: "./user-console"run: |echo "user-console打包..."npm run buildif [ $? -ne 0 ]; then echo "前端打包失败"; exit 1; fiecho "前端打包完成: $(du -sh ./user-console/dist)"- name: 暂存前端打包结果uses: actions/upload-artifact@v4with:name: user-console-artifactpath: "./user-console/dist"retention-days: 1build-user-management:runs-on: ubuntu-lateststeps:- name: 拉取代码uses: actions/checkout@v4with:fetch-depth: 0- name: 查看当前Node版本run: |echo "当前预装Node版本:$(node -v)"- name: 安装user-management依赖working-directory: "./user-management"run: |echo "安装user-management依赖..."npm installif [ $? -ne 0 ]; then echo "依赖安装失败"; exit 1; fi- name: user-management打包working-directory: "./user-management"run: |echo "开始user-management打包..."npm run buildif [ $? -ne 0 ]; then echo "user-management打包失败"; exit 1; fiecho "user-management打包完成: $(du -sh ./user-management/dist)"- name: 暂存user-management打包结果uses: actions/upload-artifact@v4with:name: user-management-artifactpath: "./user-management/dist"retention-days: 1deploy:runs-on: ubuntu-latestneeds: [build-user-console, build-user-management]steps:- name: 下载user-console打包结果uses: actions/download-artifact@v4with:name: user-console-artifactpath: ./user-console-dist- name: 下载user-management打包结果uses: actions/download-artifact@v4with:name: user-management-artifactpath: ./user-management-dist- name: 传输user-console文件到服务器uses: appleboy/scp-action@masterwith:host: ${{ secrets.SERVER_HOST }}port: ${{ secrets.SERVER_PORT }}username: ${{ secrets.SERVER_USER }}key: ${{ secrets.SERVER_SSH_KEY }}source: "./user-console-dist/*"target: "/tmp/deploy/user-console-dist/"strip_components: 1- name: 传输user-management文件到服务器uses: appleboy/scp-action@masterwith:host: ${{ secrets.SERVER_HOST }}port: ${{ secrets.SERVER_PORT }}username: ${{ secrets.SERVER_USER }}key: ${{ secrets.SERVER_SSH_KEY }}source: "./user-management-dist/*"target: "/tmp/deploy/user-management-dist/"strip_components: 1- name: 部署到腾讯云服务器uses: appleboy/ssh-action@masterwith:host: ${{ secrets.SERVER_HOST }}port: ${{ secrets.SERVER_PORT }}username: ${{ secrets.SERVER_USER }}key: ${{ secrets.SERVER_SSH_KEY }}script: |# 服务器目录配置USER_CONSOLE_DEPLOY="/var/www/user-console-dist"USER_MANAGEMENT_DEPLOY="/var/www/user-management-dist"echo "开始部署到腾讯云服务器..."# 检查上传的文件是否存在echo "检查上传文件..."ls -la /tmp/deploy/ || echo "deploy目录不存在"ls -la /tmp/deploy/user-console-dist/ || echo "user-console-dist目录不存在"ls -la /tmp/deploy/user-management-dist/ || echo "user-management-dist目录不存在"# 创建目标目录sudo mkdir -p $USER_CONSOLE_DEPLOYsudo mkdir -p $USER_MANAGEMENT_DEPLOY# 备份当前文件(如果存在)if [ -d "$USER_CONSOLE_DEPLOY" ] && [ "$(ls -A $USER_CONSOLE_DEPLOY)" ]; thensudo cp -r $USER_CONSOLE_DEPLOY /tmp/backup-user-console-$(date +%Y%m%d-%H%M%S) 2>/dev/null || trueecho "已备份user-console现有文件"fiif [ -d "$USER_MANAGEMENT_DEPLOY" ] && [ "$(ls -A $USER_MANAGEMENT_DEPLOY)" ]; thensudo cp -r $USER_MANAGEMENT_DEPLOY /tmp/backup-user-management-$(date +%Y%m%d-%H%M%S) 2>/dev/null || trueecho "已备份user-management现有文件"fi# 清空目标目录sudo rm -rf $USER_CONSOLE_DEPLOY/*sudo rm -rf $USER_MANAGEMENT_DEPLOY/*# 复制新文件到目标目录if [ -d "/tmp/deploy/user-console-dist" ] && [ "$(ls -A /tmp/deploy/user-console-dist)" ]; thensudo cp -r /tmp/deploy/user-console-dist/* $USER_CONSOLE_DEPLOY/echo "user-console文件复制完成"elseecho "错误: user-console-dist目录为空或不存在"exit 1fiif [ -d "/tmp/deploy/user-management-dist" ] && [ "$(ls -A /tmp/deploy/user-management-dist)" ]; thensudo cp -r /tmp/deploy/user-management-dist/* $USER_MANAGEMENT_DEPLOY/echo "user-management文件复制完成"elseecho "错误: user-management-dist目录为空或不存在"exit 1fi# 清理临时文件sudo rm -rf /tmp/deploy# 重启nginxsudo systemctl restart nginxecho "前端部署完成"echo "user-console部署到: $USER_CONSOLE_DEPLOY"echo "user-management部署到: $USER_MANAGEMENT_DEPLOY"
然后推送分支即可。在github的Actions中可以看到