【Vue】CI持续集成Vue前端项目--20230627

news2025/10/31 15:58:40

我的实践（CI）

1.打包 npm run build，产生dist文件

2.将dist文件的内容拷贝到static下面。不用在nginx文件夹中

在这里插入图片描述

3.编写nginx配置

default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html/static/;
        index  index.html index.htm;
    }


    location /dlt {
        proxy_pass   https://dltapi.***.com;
    }

    location /auth {
        proxy_pass   https://authdwt.***.com;
    }

    location /api {
        proxy_pass   http://training-platform-django.***.com.cn;
    }


    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

4.编写dockerfile

dockerfile

# 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了
FROM nginx

# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

# 修改nginx配置
COPY default.conf etc/nginx/conf.d/default.conf

5.编写.gitlab-ci.yml

.gitlab-ci.yml

variables:
  DOCKER_IMAGE_NAME: training_platform_vue_dist
  DOCKER_IMAGE_TAG: 0.0.0



services:
  - name: ***/base_image/docker:stable
    entrypoint: []
    command: ["--insecure-registry=harbor-k8s.***.com.cn"]

stages:
  - docker_build

docker-build:
  image: ***/base_image/docker:stable
  stage: docker_build
  tags: 
    - wzs-runner01
  script:
    - docker info
    - echo $DOCKER_IMAGE_NAME
    - echo $DOCKER_IMAGE_TAG
    - docker build -t $DOCKER_IMAGE_NAME:$DOCKER_IMAGE_TAG .
    - docker tag $DOCKER_IMAGE_NAME:$DOCKER_IMAGE_TAG ***/season/$DOCKER_IMAGE_NAME:$DOCKER_IMAGE_TAG
    - echo "$HARBOR_PASSWORD" | docker login -u "$HARBOR_USER"  --password "$HARBOR_PASSWORD" harbor-k8s.***.com.cn
    - docker push harbor-k8s.***.com.cn/season/$DOCKER_IMAGE_NAME:$DOCKER_IMAGE_TAG