GitLab CI/CD 中通过 .gitlab-ci.yml 文件将 Angular 前端代码更新并部署到 CentOS 服务器

要在 GitLab CI/CD 中通过 .gitlab-ci.yml 文件将 Angular 前端代码更新并部署到 CentOS 服务器上，可以按照以下步骤进行配置。

1. 步骤概述

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. 部署流程解析

使用 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 环境变量，保持服务器安全。