Gitlab的CI_CD自动部署前端项目

前言

之前陆续写了 Gitlab 的安装使用还有 Gitlab CI/CD 的配置使用，已经把 AspNetCore 的后端项目都做了持续集成了，尝到甜头之后，现在前端的项目也要加入自动化部署，所以经过一番折腾，有了本文~

前文回顾：

• GitLab 的安装、配置、使用
• 持续集成指南：GitLab 的 CI/CD 工具配置与使用

跟之前的 AspNetCore 项目操作差不多，我依然使用 docker 部署的方式，不依赖服务器环境，就一个方便优雅~

Docker配置

我第一次用 docker 来构建前端项目，遇到很多坑，不过最终还是参考我之前的 DjangoStarter 项目和 AspNetCore 的 Dockerfile 搞定了~

思路是两个容器，一个 node 容器用来编译项目，另一个 nginx 用来提供静态文件服务，也就是说我把项目 build 出来之后，直接在容器里提供web服务，不复制出来放到服务器共享的 nginx 里了。

然后再服务器的 nginx 里做一下转发，就跟原来的使用体验一样了。（或者不转发直接用也行，取决于实际情况）

在 docker 里使用 nginx 更好，这体现在配置复杂度、权限管理、安全/审计检查之类的方面上，我就不展开了，用就完事了~

Dockerfile

FROM node:lts-alpine as build

RUN mkdir /code
WORKDIR /code

ADD package.json /code
RUN npm install --registry=http://registry.npmmirror.com

ADD . /code
RUN npm run build

FROM nginx:alpine as final
LABEL maintainer="DealiAxy <feedback@deali.cn>"

COPY --from=build /code/dist/ /usr/share/nginx/html/

EXPOSE 80

注意在nginx容器内的 COPY 一定要设置 --from 参数，不然是读取不到 node 容器里 build 好的文件的~

完成之后这个 Dockerfile 文件就是固定的，以后没有特殊情况都不需要修改了~

docker-compose.yml

没啥好说的了，其实这个 compose 也可以省略，只是我不想打 docker 命令偷懒而已~

version: '3.4'

services:
  web:
    restart: always
    build:
      context: .
    ports:
      - "8080:80"

Gitlab CI配置

没啥特别的

variables:
  GIT_STRATEGY: none
stages:
  - deploy
deploy_job:
  stage: deploy
  only:
    - master
  script:
    - cd /home/gitlab-runner/projects/0_frontend/dashboard-front
    - rm -rf dashboard-front
    - git clone http://127.0.0.1:8080/deali/dashboard-front.git
    - cd dashboard-front
    - docker-compose up --build -d

小结

搞定，第一次搞这个还是遇到了很多坑，所幸没有放弃然后把问题一步步解决了。

之后每个项目只需要修改 docker-compose.yml 文件指定开放端口和 .gitlab-ci.yml 文件指定要构建的文件夹即可，比原来手动构建发布方便很多。

参考资料

注意：参考资料的这篇文章里 Dockerfile 是错的，请以本文为准。

抛开错误，参考资料这篇文章还是有些地方可以参考一下，请自行验证~

• 使用docker部署前端应用：https://zhuanlan.zhihu.com/p/102853707