使用Docker部署前端

1.新建基础index.html 2.执行npm init 生成package.json文件 3.执行npm install http-server 安装http-server 4.scripts中添加"start": "http-server" 5.执行npm start启动前端本地服务，访问localhost:8080查看是否能正常访问index.html页面 6.在项目根目录下新增文件名为Dockerfile的文件，内容如下

# 指定 node 基础镜像
FROM node:16-alpine

# 指定工作目录，将代码添加至此
WORKDIR /code
# 将当前目录拷贝到code目录
ADD . /code

# 如何将项目跑起来
CMD npm start

# 暴露出运行的端口号，可对外接入服务发现
EXPOSE 8081

7.docker官网https://www.docker.com/get-started/中下载docker并安装

8.运行安装的Docker Desktop 翻墙打开链接，下载X64更新包，安装完成后进入docker desktop 执行clean wsl 2即可 9.执行 docker build . 10.构建成功后执行 docker images 复制IMAGE ID，执行docker run -p 8081:8080 -it c8dccfb0995f 绑定容器内端口8080，映射到对外的8081端口，指定镜像ID 11.浏览器访问http://localhost:8081/即可 12.添加Dockerfile.prod文件，作为生产环境镜像

# 指定 node 基础镜像
FROM node:16-alpine as builder

# 指定工作目录，将代码添加至此
WORKDIR /code

# 对比package.json有改动重新下载依赖，没有就使用缓存
ADD package.json /code
CMD npm install

ADD . /code

# 有build的时候再添加
# CMD npm run build 

# 选择更小体积的基础镜像
FROM nginx:alpine

# 将构建产物移至 nginx 中，有build并生成到dist再添加
# COPY --from=builder code/dist/ /usr/share/nginx/html/

# 没有build直接将index.html放进去
COPY --from=builder code/index.html /usr/share/nginx/html/

13.执行 docker build -f Dockerfile.prod . 14.构建成功后执行 docker images，此时默认暴露出来的端口是80 复制IMAGE ID，执行docker run -p 8082:80 -it 7d854227b2bf即可看到页面

管理公司测试服务器环境，了解 linux 常见命令以及 docker/nginx，并通过 docker 镜像与 nginx 配置独立完成前端项目的部署
独立编写并管理前端项目的 Dockerfile，并将 nginx 配置文件置于项目中独立管理，并独立编写 CI 配置文件，进行前端的
通过多阶段构建优化前端 docker 镜像体积，从 2GB 优化到了 30MB，体积减小后，加快了镜像的上传以及下载时间，优化前端部署时间
将 package.json/yarn.lock 单独添加至镜像，通过 Docker 镜像构建缓存优化 Dockerfile，当未新增 npm 库时，在生产环境将不会再次 npm i，优化前端部署时间
熟悉 nginx 在前端的常见配置，结合 webpack 对其带有 hash 的资源配置长期强缓存，优化网站二次打开速度
熟悉 nginx，在前端中配置 try_files 解决单页应用的路由问题
部署阶段通过按需上传静态资源到 oss/cos，降低资源上传时间，优化前端部署时间
通过 CI 保障前端项目质量，在 CI 中配置 lint/test/size-limit 等，并结合 code review，大大提高了代码质量
通过 CI 中的缓存，降低每次 pipeline 的时间
在测试环境，将每一个 feature 分支通过 k8s 配置独立的预览环境，使得可以快速测试，以及各个分支不互相干扰，便于项目的敏捷迭代开发

chenfei-hnu / Blog

使用Docker部署前端 #63