一、環境準備
1. 服務器準備
一臺Linux服務器（CentOS/Ubuntu皆可），推薦至少4核8GB內存
已安裝 Docker（及 Docker 服務已啟動）
已安裝 GitLab Runner
2. 服務器上安裝 Docker （如果沒裝）
# CentOS9以下舉例
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
sudo yum install docker-ce docker-ce-cli containerd.io -y
sudo systemctl start docker
sudo systemctl enable docker# 適用于 CentOS 9 / CentOS Stream 9 安裝 Docker CE# 1. 卸載可能沖突的舊版本
sudo dnf remove -y docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine# 2. 安裝必要的依賴
sudo dnf -y install dnf-plugins-core# 3. 添加 Docker 官方倉庫
sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo# 4. 安裝 Docker CE（--nobest 解決可能的版本依賴沖突）
sudo dnf install -y --nobest docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin# 5. 啟動 Docker
sudo systemctl start docker# 6. 設置開機自啟
sudo systemctl enable docker# 7. 查看 Docker 版本
docker --version# 8. 測試運行
sudo docker run hello-world
3. 安裝 GitLab Runner
# 下載二進制文件
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64# 賦予執行權限
sudo chmod +x /usr/local/bin/gitlab-runner# 添加用戶（可選）
sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash || true# 安裝 Runner 服務
sudo /usr/local/bin/gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner# 啟動 Runner 服務
sudo /usr/local/bin/gitlab-runner start
4. 將 gitlab-runner 用戶加入 Docker 用戶組
sudo usermod -aG docker gitlab-runner
sudo systemctl restart docker
二、GitLab Runner 注冊
1,登錄你的 GitLab，進入項目設置 > CI/CD > Runners 頁面
2,找到 registration token（注冊令牌）
3,在服務器執行注冊命令（替換 URL 和 token）：
sudo /usr/local/bin/gitlab-runner register \--non-interactive \--url "http://你的gitlab地址:端口/" \--registration-token "你的注冊token" \--description "deploy-runner" \--executor "shell" \--tag-list "deploy" \--run-untagged="false" \--locked="false"
4,注冊成功后，用命令檢查 Runner 狀態：
sudo /usr/local/bin/gitlab-runner status
三、準備項目代碼和 Dockerfile
1
2. 示例 Dockerfile
# 使用官方 Nginx 作為基礎鏡像（默認自帶 /usr/share/nginx/html 目錄）
FROM nginx# 設置工作目錄為 Nginx 的默認靜態文件目錄
WORKDIR /usr/share/nginx/html/# 切換到 root 用戶（方便修改配置文件和目錄）
USER root# 將我們自定義的 Nginx 配置文件復制到容器中
# 替換掉默認的 default.conf，讓 Nginx 按我們的配置運行
COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf# 將打包后的前端 dist 目錄復制到 Nginx 靜態目錄
COPY ./dist /usr/share/nginx/html/# 暴露容器的 80 端口（HTTP）
EXPOSE 80# 啟動 Nginx 前臺運行（daemon off 表示不以守護進程模式運行）
CMD ["nginx", "-g", "daemon off;"]
四、編寫 GitLab CI 配置 .gitlab-ci.yml
# ===============================
# 全局 before_script
# ===============================
before_script:# 切換 npm 源為淘寶鏡像（國內安裝依賴更快）- npm config set registry https://registry.npmmirror.com# ===============================
# CI/CD 階段定義
# ===============================
stages:- build # 第一階段：構建階段（編譯前端代碼）- deploy # 第二階段：部署階段（運行容器）# ===============================
# 構建 Job
# ===============================
build-job:stage: build # 該 Job 屬于 build 階段tags:- deploy # Runner 標簽（需和 GitLab Runner 配置一致）script:# 安裝依賴（會使用 before_script 中設置的淘寶源）- npm install# 打包生產環境代碼（Vue/React 等前端項目）- npm run build:prod# 使用 Docker 構建鏡像，命名為 user-center-frontend:latest- docker build -t user-center-frontend:latest .# ===============================
# 部署 Job
# ===============================
deploy-job:stage: deploy # 該 Job 屬于 deploy 階段tags:- deploy # Runner 標簽（需和 GitLab Runner 配置一致）script:# 如果已有舊容器，則停止運行（忽略錯誤）- docker stop user-center-frontend || true# 刪除舊容器（忽略錯誤）- docker rm user-center-frontend || true# 啟動新容器，映射宿主機 80 端口到容器 80 端口- docker run -d --name user-center-frontend -p 80:80 user-center-frontend:latest
五,nginx配置
server {listen 80; # 監聽 80 端口（HTTP 默認端口）# ===============================# gzip 壓縮配置（開啟傳輸壓縮以減少流量）# ===============================gzip on; # 開啟 gzip 壓縮gzip_min_length 1k; # 文件大于 1KB 才會壓縮gzip_comp_level 9; # 壓縮級別，范圍 1-9，數字越大壓縮率越高，但消耗更多 CPUgzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; # 指定需要壓縮的文件類型gzip_vary on; # 啟用 Vary: Accept-Encoding 響應頭，告訴緩存服務器區分壓縮和未壓縮的版本gzip_disable "MSIE [1-6]\."; # 針對 IE6 以下瀏覽器禁用 gzip，避免兼容性問題# ===============================# 站點根目錄# ===============================root /usr/share/nginx/html; # 指定網站的根目錄（靜態文件所在位置）include /etc/nginx/mime.types; # 引入 MIME 類型映射（讓瀏覽器正確識別文件類型）location / {# 當請求的路徑找不到對應文件時，返回 index.html# 適用于 SPA（單頁應用）前端路由，防止刷新 404try_files $uri /index.html;}
}
六、執行流程
提交代碼到 GitLab（包括 Dockerfile 和
.gitlab-ci.yml）GitLab CI 自動觸發流水線
Runner 會執行安裝依賴、構建項目、構建 Docker 鏡像
部署階段會停止舊容器、刪除容器并重新運行最新鏡像
訪問服務器 IP 或綁定域名的 80 端口即可訪問最新前端頁面
七、常用排查命令
查看鏡像：
docker images
查看運行中的容器：
docker ps
查看容器日志：
docker logs user-center-frontend
八、注意事項
構建命令（如
npm run build:prod）需在.gitlab-ci.yml中正確填寫，確保能生成dist確保服務器 Docker 服務正常，GitLab Runner 有權限操作 Docker
構建上下文路徑和 Dockerfile 中的
COPY路徑必須匹配，否則復制文件失敗GitLab Runner 用戶需加入 docker 組，避免權限問題
_262)
