前言
之前陆续写了 Gitlab 的安装使用还有 Gitlab CI/CD 的配置使用，已经把 AspNetCore 的后端项目都做了持续集成了，尝到甜头之后，现在前端的项目也要加入自动化部署，所以经过一番折腾，有了本文~
前文回顾：
跟之前的 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 <[email protected]>"
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