Gitlab-CI 发布vue前端项目到docker

一、创建一个简单的vue项目

1.在gitlab上创建一个前端项目，拉取到本地。

2.在idea中快速构建一个vue项目，前提是本地已经安装了node.js

安装命令如下

#使用淘宝镜像
npm install --registry=https://registry.npm.taobao.org
#保证环境中有webpack
npm install -g webpack 
#全局安装vue-cli脚手架
npm install -global vue-cli
#创建一个基于webpack模板的项目
vue init webpack
#安装依赖
npm install
#运行当前vue项目
npm run dev

在idea中的Terminal中输入命令

二、相关的配置更改

1.更改项目的端口，默认为8080，我这里改为8099

2.编写nginx的配置文件ci-nginx.conf，主要就是监听了8099端口

server {
    listen 8099;
    listen [::]:8099;
    # 接口服务的IP地址
    server_name ci-vue-docker;
    charset utf-8;
    access_log off;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

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

3.编写Dockerfile，nginx作为镜像，将dist上传到/var/www/html，将ci-nginx.conf配置文件传到/etc/nginx/conf.d，并删除nginx默认的配置，对外端口改为8099

FROM nginx
COPY dist /var/www/html
COPY ci-nginx.conf /etc/nginx/conf.d/
RUN rm /etc/nginx/conf.d/default.conf
EXPOSE 8099
CMD ["nginx","-g","daemon off;"]

4.编写.gitlab-ci.yml文件

简单说明一下，这里分为三个阶段，build为打包阶段，主要用npm命令，deploy发布阶段，主要用docker命令，同样也是要先停止容器，再删除容器，最后删除镜像，再构建镜像。不然下一次就会导致镜像已经存在无法构建的问题。

stages:
  - test
  - build
  - deploy

test:job:
  stage: test
  script:
    - echo "test job"

build:job:
  stage: build
  script:
    - echo "build job"
    - npm config set strict-ssl false
    - npm set registry https://registry.npm.taobao.org
    - npm install
    - npm run build
  artifacts:
    expire_in: 1 week
    paths:
      - dist

deploy:job:
  image: docker
  stage: deploy
  script:
    - echo "deploy job"
    - docker ps -a|grep ci-vue-docker &&  docker stop ci-vue-docker && docker rm ci-vue-docker || echo "not exist"
    - docker images |grep  ci-vue-docker && docker rmi -f ci-vue-docker || echo  "not exist"
    - docker build -t ci-vue-docker .
    - docker run -d --name ci-vue-docker -p 8099:8099 ci-vue-docker

三、结果验证

1.pipeline执行结果，三个阶段都是成功的。

2.页面访问结果，可以访问

四、总结出现的问题

1.无法下载上一个job上传的artifacts的问题，

错误描述

Downloading artifacts for Mavenbuild:artifact (11969)...
ERROR: Downloading artifacts from coordinator... forbidden  id=11969 responseStatus=403 Forbidden status=403 Forbidden token=xxx
FATAL: permission denied                           
ERROR: Job failed: exit code 1

解决方法，不用代理当前服务器

deploy:job:
  image: docker
  stage: deploy
  script:
    - echo "deploy job"
    - docker ps -a|grep ci-vue-docker &&  docker stop ci-vue-docker && docker rm ci-vue-docker || echo "not exist"
    - docker images |grep  ci-vue-docker && docker rmi -f ci-vue-docker || echo  "not exist"
    - docker build -t ci-vue-docker .
    - docker run -d --name ci-vue-docker -p 8099:8099 ci-vue-docker
#一开始出现的一个无法代理的问题，百度找了一个说这么搞就好了，但是后来去掉了也没问题
#  variables:
#    HTTP_PROXY: http://proxy:80
#    HTTPS_PROXY: http://proxy:80
#    NO_PROXY: 192.168.80.5,gitlab.xxx.com

2.npm install ERR! code E400/E404，npm下载依赖错误，找不到，升级服务器的npm

npm rebuild node-sass
npm update
npm install -g npm  
npm -v

好了，就写这么多了，每天写一点，每天就都有进步。