前端容器化实践 _容器

文章插图
1.引言前端容器化是一种将前端应用程序打包成容器的技术，使其可以在不同的环境中快速、高效地部署和运行。
2.背景前后端分离的趋势已形成现状，前端工程复杂度叠加增长，新、老项目部署依赖的环境和Node.js版本会存在差异，生产环境下构建混淆后的脚本、静态资源文件依赖环境部署服务进行访问，前端工程未能形成"单体工件"部署，容器的出现大大简化了部署流程。
前端容器化可以方便的管理前端环境变量注入、运行环境(不同项目依赖不同的node环境，node的版本兼容是个很大的问题)、节约服务器成本、更快捷方便的版本回滚、多架构部署、CI/CD自动化集成部署、DevOps等等，好处只有多到你想不到(此处手动偷笑) 。
本文基于React项目结合Docker，分享在前端引入容器技术带来的变革。
3.容器化在Github的运用github推出了github-action来做容器化的ci/cd，我下面展示用github-action做一个npm自动化发包的示例:

在项目根目录下新建.github/workflows/ci.yml文件
去npm官网申请一个token(具体怎么去申请，请自己去搜索解决)
将这段代码贴入ci.yml文件
push代码到master分支，就会自动走ci/cd进行部署啦！

name: CIon:push:branches:- masterjobs:build:# 指定操作系统runs-on: ubuntu-lateststeps:# 将代码拉到虚拟机- name: Checkout repositoryuses: actions/checkout@v2# 指定node版本- name: Use Node.jsuses: actions/setup-node@v3with:node-version: '16.x'registry-url: 'https://registry.npmjs.org'# 依赖缓存策略- name: Cacheid: cache-dependenciesuses: actions/cache@v3with:path: |**/node_moduleskey: ${{runner.OS}}-${{hashFiles('**/pnpm-lock.yaml')}}- name: Install pnpmrun: npm install -g pnpm@7.5.0# 依赖下载- name: Installing Dependenciesif: steps.cache-dependencies.outputs.cache-hit != 'true'run: pnpm install# 打包- name: Running Buildrun: pnpm run build# 测试- name: Running Testrun: pnpm run test-unit# 发布- name: Running Publishrun: npm publishenv:# NPM_TOKEN is access tokenNODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

4.基于docker构建前端镜像在学习前端项目ci/cd构建之前，让我们先学习下前端镜像怎么构建
4.1 安装docker点此处坐飞机去安装docker安装完成后执行以下命令查看docker版本，尽量带buildx的版本
docker -vDocker version 24.0.2, build cb74dfc4.2 编写Dockerfile这里先需要普及一个前端工程知识，我们都知道一个基于npm的项目，需要一个package.json文件，然后执行npm run install下载包，npm run build打包，打包出来的文件其实是不能直接运行的，需要启动一个node服务运行，所以我们就写一个最基本的基于node和Nginx的镜像，示例如下
在项目根目录下添加nginx配置文件，取名为nginx.conf，内容如下

worker_processes1; events {worker_connections1024;} http {sendfileon;tcp_nodelayon;keepalive_timeout30;include /etc/nginx/mime.types;default_type Application/octet-stream;server {listen 80;server_name localhost;root /usr/share/nginx/front/dist;autoindex on;autoindex_exact_size off;autoindex_localtime on;location / {try_files $uri $uri/ =404;index index.html index.htm;gzip_static on;expires max;add_header Cache-Control public;if ($request_filename ~* ^.*?.(eot)|(ttf)|(woff)|(svg)|(otf)$) {add_header Access-Control-Allow-Origin *;}}}}

在项目根目录下添加docker配置文件，取名为Dockerfile，内容如下

FROM node:17-buster as builderWORKDIR /srcCOPY ./ /srcRUN npm install -g pnpm&& pnpm install&& pnpm buildFROM nginx:alpine-slimRUN mkdir /usr/share/nginx/front&& mkdir /usr/share/nginx/front/dist&& rm -rf /etc/nginx/nginx.conf COPY --from=builder /src/nginx.conf /etc/nginx/nginx.confCOPY --from=builder /src/dist /usr/share/nginx/front/distEXPOSE 80

接下来使用docker build打包镜像(如果有桌面工具，打包成功后docker桌面工具的images栏目能看到), docker run执行镜像(如果有桌面工具，运行成功后docker桌面工具的contAIners栏目能看到), docker run运行成功后可以打开浏览器输入：http://localhost 进行查看
docker buildx build -t webapp-demo:v1 .docker run -d -p 80:80 webapp-demo:v14.3 如何基于Dockerfile做pnpm缓存这里我引用一段话：使用多阶段构建，构建的镜像中只包含了目标文件夹 dist，但仍然存在一些问题，当 package.json 文件变动时，RUN npm i && rm -rf ~/.npm 这一层会重新执行，变更多次后，生成了大量的中间层镜像。