GitLab CI/CD 中通过 .gitlab-ci.yml 文件将 Angular 前端代码更新并部署到 CentOS 服务器
要在 GitLab CI/CD 中通过 .gitlab-ci.yml 文件将 Angular 前端代码更新并部署到 CentOS 服务器上，可以按照以下步骤进行配置。
1. 步骤概述
- 配置 GitLab CI/CD 流水线来自动化构建和部署 Angular 项目。
- 将构建后的前端文件上传到 CentOS 服务器。
- 在 CentOS 上更新前端应用并重启 Web 服务器（如 Nginx）。
1. 创建 GitLab CI/CD 配置文件（.gitlab-ci.yml）
基本的 .gitlab-ci.yml 配置示例
在你的 Angular 项目根目录下创建或更新 .gitlab-ci.yml 文件：
stages:
- build
- deploy
# Build stage: 用于构建 Angular 项目
build:
stage: build
image: node:16 # 使用 Node.js 镜像
script:
- npm install # 安装依赖
- npm run build --prod # 打包 Angular 项目
artifacts:
paths:
- dist/ # 保存打包后的文件供部署使用
only:
- main # 只在主分支上执行构建
# Deploy stage: 部署到 CentOS 服务器
deploy:
stage: deploy
image: ruby:2.7 # 使用 Ruby 镜像（可以使用其他轻量镜像）
script:
- apt-get update && apt-get install -y sshpass # 安装 sshpass（如果需要）
- sshpass -p $SERVER_PASSWORD scp -r dist/complyhub/* $SERVER_USER@$SERVER_IP:/usr/share/nginx/html/ # 上传构建文件
- sshpass -p $SERVER_PASSWORD ssh $SERVER_USER@$SERVER_IP 'sudo systemctl restart nginx' # 重启 Nginx
only:
- main # 只在主分支上部署
environment:
name: production
url: http://$SERVER_IP
解释：
- stages: 定义流水线的阶段，build 和 deploy 阶段。
- build: 在此阶段，CI/CD 运行 Angular 项目的构建命令，生成 dist/ 目录。
- deploy: 在此阶段，将构建好的文件上传到 CentOS 服务器，并重启 Nginx。
2. 配置 GitLab CI/CD 变量
为了保证安全，避免直接暴露服务器的密码或 SSH 密钥，你可以通过 GitLab 的 CI/CD Variables 配置一些环境变量。
配置的环境变量：
- SERVER_USER: 服务器用户名（例如：root 或其他具有权限的用户）。
- SERVER_PASSWORD: 服务器用户的密码（如果使用 sshpass）。
- SERVER_IP: CentOS 服务器的 IP 地址。
- 你可以在 GitLab 项目的 Settings > CI / CD > Variables 下添加这些变量。
如果使用 SSH 密钥（推荐），可以配置 SSH_PRIVATE_KEY 和在 .gitlab-ci.yml 中使用 ssh-agent。
3. 部署流程解析
-
构建 Angular 应用： 在 GitLab CI 流水线的 build 阶段，执行 npm run build --prod 命令构建 Angular 应用。构建后的文件会生成在 dist/ 目录下。
-
上传构建文件到 CentOS 服务器：
使用 scp 命令将 dist/complyhub 文件夹（Angular 构建后的文件）上传到服务器的 /usr/share/nginx/html/ 目录（假设你使用 Nginx）。
sshpass -p $SERVER_PASSWORD 用于自动化 SSH 登录，避免手动输入密码。
3. 重启 Nginx：
在服务器上，使用 sudo systemctl restart nginx 命令重启 Nginx 服务器，以使新代码生效。
4. 安全性优化：使用 SSH 密钥
如果你不希望暴露密码，可以使用 SSH 密钥 代替密码登录：
步骤：
1. 生成 SSH 密钥对（如果尚未生成）： 在本地运行：
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
2. 将公钥复制到服务器：
ssh-copy-id user@server_ip
这样就可以免密登录服务器了。
3.在 GitLab 中添加 SSH 私钥：
将私钥（id_rsa）作为 GitLab CI/CD Variable 添加（命名为 SSH_PRIVATE_KEY）。
4. 更新 .gitlab-ci.yml 使用 SSH 密钥： 在 deploy 阶段的脚本部分，修改为使用 ssh-agent 来加载私钥：
deploy:
stage: deploy
image: ruby:2.7
script:
- apt-get update && apt-get install -y ssh-agent
- eval $(ssh-agent -s)
- echo "$SSH_PRIVATE_KEY" | ssh-add -
- scp -r dist/complyhub/* $SERVER_USER@$SERVER_IP:/usr/share/nginx/html/
- ssh $SERVER_USER@$SERVER_IP 'sudo systemctl restart nginx'
only:
- main
5. 最终效果
每次你 推送代码到 main 分支 时，GitLab CI/CD 会自动执行：
- 构建 Angular 项目。
- 将构建后的文件上传到 CentOS 服务器。
- 重启 Nginx 使新代码生效。
6. 其他补充
如果服务器上没有安装 Nginx 或其他 Web 服务器，你需要先在 CentOS 上安装并配置 Nginx。
安装 Nginx：
sudo yum install epel-release -y
sudo yum install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx
然后根据前面提到的步骤上传和配置 Nginx。
总结：
- .gitlab-ci.yml 配置了构建和部署 Angular 前端应用的流水线。
- 使用 scp 命令上传文件，使用 systemctl restart nginx 重启 Nginx。
- 配置 GitLab CI/CD 环境变量，保持服务器安全。
