gitLab CI/CD docker自动部署vue前端项目

Posted 2023-02-18

参考技术A 查询了好多资料，都没有找到可以直接应用的，综合了好多，配置runner之后，前端项目里面需要在项目根目录配置三个文件：

1..gitlab-ci.yml 文件

stages:

- build

- deploy

# 设置缓存

cache:

paths:

- node_modules/

- dist/

# 安装依赖 before_script 会在每个 stages 执行之前运行

before_script:

- npm install

# 编译 这里对应上方 stages ，

build:

stage: build

script:# script 为要执行的命令，可以多条按顺序执行

    - npm run build:prod

docker-deploy:

stage: deploy

# 执行Job内容

  script:

# 通过Dockerfile生成pactera_pflife_ui镜像

    - sudo docker build -t pactera_pflife_ui .

# 删除已经在运行的容器

    - if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi

# 通过镜像启动容器

    - sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui

tags:

# 执行Job的服务器

    - pflife-web

only:

# 只有在master分支才会执行

    - dev_xht

2.Dockerfile 文件

# 设置基础镜像

FROM nginx:latest

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

COPY dist/ /usr/share/nginx/html

# 用本地的 default.conf 配置来替换nginx镜像里的默认配置

COPY default.conf/etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx","-g","daemon off;"]

3.default.conf文件

server

listen      80;

server_name  39.100.9.6; # localhost修改为docker服务宿主机的ip

location /

root  /usr/share/nginx/html;

index  index.html index.htm;

try_files $uri $uri/ /index.html =404;



location /api/

proxy_set_header Host $http_host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header REMOTE-HOST $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_pass http://39.100.9.6:8090/;



error_page  500 502 503 504  /50x.html;

    location = /50x.html

root  html;





总之，三个文件部署之后运行正常