持续集成指南:Gitlab CI/CD 自动部署前端项目

Posted dotNET跨平台

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了持续集成指南:Gitlab CI/CD 自动部署前端项目相关的知识,希望对你有一定的参考价值。

1前言

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

前文回顾:

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

2Docker配置

我第一次用 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"

3Gitlab 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

4小结

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

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

5参考资料

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

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

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

以上是关于持续集成指南:Gitlab CI/CD 自动部署前端项目的主要内容,如果未能解决你的问题,请参考以下文章

centos7下使用gitlab+shell实现CI/CD持续集成持续部署

gitlab-ci-runner安装

Gitlab CI/CD配置-并发送消息到飞书

好文分享GitLab CI/CD前端自动流水线发布教程

gitlab 添加 CI CD

如何利用Gitlab-ci持续部署到远程机器?