社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Git

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

dotNET跨平台 • 2 年前 • 627 次点击  

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 "

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


Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/147862
 
627 次点击