04-从0到1搭建gitlab CI/CD，CentOS服务器部署前后端项目

在前端组中创建2个项目

• 前端项目，使用vite创建前端vue项目: for-nuxt
• 后端项目，使用express+pm2搭建: for-nest

部署前端项目

在根目录创建配置文件：.gitlab-ci.yml

stages:
  - build-prod # 打包
  - deploy-prod # 部署

cache: # 缓存
  paths:
    - node_modules

# 生产打包
build-job:
  stage: build-prod
  tags:
    - build
  script:
    - npm install # 安装依赖
    - npm run build # 项目打包
  when: manual # 手动触发流程
  artifacts:
    paths:
      - dist

# 生成部署
deploy-job:
  stage: deploy-prod
  tags:
    - deploy
  script:
    - pwd;mkdir -p /usr/frontend/prod/for-nuxt # 创建目录
    - rm -rf /usr/frontend/prod/for-nuxt/*;cp -r ./dist/* /usr/frontend/prod/for-nuxt/; #删除旧的，拷贝新的打包文件
    # 下面是处理nginx
    - rm -rf /etc/nginx/conf.d/for-nuxt-nginx.conf;cp -r ./for-nuxt-nginx.conf /etc/nginx/conf.d
    - nginx -t # 验证配置文件是否有效
    - service nginx restart # 重启nginx
  when: manual # 手动触发流程
  artifacts:
    paths:
      - dist

创建nginx配置文件：for-nuxt-nginx.conf

include mime.types;
server {
  listen 8001;
  # server_name  wx.kgm0515.top;
  root /usr/frontend/prod;
  location / {
    root /usr/frontend/prod/for-nuxt;
  }
  location /api {
    proxy_pass http://11.111.111.111:3000;
  }
}

提交代码后执行流水

流水执行成功后访问浏览器：http://11.111.111.111:8001/

部署后端项目

在根目录创建配置文件：.gitlab-ci.yml

stages:
  - deploy-prod # 部署

cache: # 缓存
  paths:
    - node_modules

# 生产安装依赖
deploy-job:
  stage: deploy-prod
  tags:
    - deploy-prod # tags是这个名字
  script:
    - pwd;mkdir -p /usr/backend/prod/for-nest # 创建目录
    - rm -rf /usr/backend/prod/for-nest/*;cp -r ./* /usr/backend/prod/for-nest/; #删除旧的，拷贝新的打包文件
    - cd /usr/backend/prod/for-nest/ # 进入当前目录
    - npm install # 安装依赖
    - npm run dev # 项目打包
  when: manual # 手动触发流程

package.json文件如下

{
  "scripts": {
    "dev": "pm2 start ./server.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "pm2": "^5.3.0"
  }
}

./server.js文件如下

const express = require("express");
const app = express();
app.get("/", (req, res) => {
  res.send("Hello world");
});
app.get("/user", (req, res) => {
  res.send("kgm");
});
app.get("/admin", (req, res) => {
  res.send("this is admin");
});
app.listen(9001, () => {
  console.log("Server is running at http://localhost:9001");
});

提交代码后执行流水

流水执行成功后访问浏览器：http://11.111.111.111:9001/admin