【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用
大家好,我是山月,这是我最近新开的专栏:前端部署系列。包括 Docker、CICD 等内容,大纲图示如下:
示例代码开源,置于 Github 中,演示如何对真实项目进行部署上线。
- simple-deploy: 了解最简单的部署,不涉及打包等内容。
- cra-deploy: 了解如何部署单页应用,这里以 create-react-app 为例,但实际上所讲述东西与 React 无关,仅与单页应用有关。
前端部署系列正在更新: 4/20
部署完一个简单页面后,此时对于 Docker 与服务部署也有了简单理解。
终于可以来一个与真实项目接近带有复杂度的项目,以 CRA 部署为例:
部署一个 Creact React APP 单页应用。
实际上,即使你们技术栈是 Vue 也无所谓,本系列文章很少涉及 React 相关内容,只要你们项目是单页应用即可。
PS: 本项目以 cra-deploy 仓库作为实践,配置文件位于 simple.Dockerfile
单页应用的静态资源
所有的前端单页应用对于部署,最重要的就是两点:
- 静态资源如何构建: 大部分项目都是
npm run build
。 - 静态资源目录在哪: 有的项目是
/dist
,有的项目是/build
。CRA 是/build
目录。
以下,便是在 cra 中获得静态资源的命令。
# 创建一个 cra 应用
$ npx create-react-app cra-deploy# 进入 cra 目录
$ cd cra-deploy# 进行依赖安装
$ yarn# 对资源进行构建
$ npm run build# ./build 目录为静态资源目录,可使用 tree 命令进行打印
$ tree build -L 2
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static├── css├── js└── media4 directories, 7 files
Dockerfile
在本地将 CRA 应用跑起来,可通过以下步骤:
$ yarn
$ npm run build
$ npx serve -s build
将命令通过以下几步翻译为一个 Dockerfile:
- 选择一个基础镜像。由于需要构建,需要 node 的运行环境,因此选择 node。
- 将以上几个脚本命令放在 RUN 指令中。
- 启动服务命令放在 CMD 指令中。
FROM node:14-alpineWORKDIR /codeADD . /code
RUN yarn && npm run buildCMD npx serve -s build
EXPOSE 3000
构建完成。然而还可以针对以下两点进行优化。
- 构建镜像时间过长,优化构建时间
- 构建镜像大小过大,优化镜像体积
构建时间优化: 构建缓存
我们注意到,一个前端项目的耗时时间主要集中在两个命令:
- npm install (yarn)
- npm run build
在本地环境中,如果没有新的 npm package 需要下载,不需要重新 npm i。
那 Docker 中是不也可以做到这一点?
在 Dockerfile 中,对于 ADD
指令来讲,如果添加文件内容的 checksum
没有发生变化,则可以利用构建缓存。
而对于前端项目而言,如果 package.json/yarn.lock
文件内容没有变更,则无需再次 npm i
。
将 package.json/yarn.lock
事先置于镜像中,安装依赖将可以获得缓存的优化,优化如下。
FROM node:14-alpine as builderWORKDIR /code# 单独分离 package.json,是为了安装依赖可最大限度利用缓存
ADD package.json yarn.lock /code/
# 此时,yarn 可以利用缓存,如果 yarn.lock 内容没有变化,则不会重新依赖安装
RUN yarnADD . /code
RUN npm run buildCMD npx serve -s build
EXPOSE 3000
进行构建时,若可利用缓存,可看到 CACHED
标记。
$ docker-compose up --build
...=> CACHED [builder 2/6] WORKDIR /code 0.0s=> CACHED [builder 3/6] ADD package.json yarn.lock /code/ 0.0s=> CACHED [builder 4/6] RUN yarn 0.0s
...
构建体积优化: 多阶段构建
我们的目标静态资源,完全不需要依赖于 node.js 环境进行服务化,而 node.js 环境将造成极大的资源浪费。
我们可以使用多阶段构建进行优化,最终使用 nginx 进行服务化。
- 第一阶段 Node 镜像: 使用 node 镜像对单页应用进行构建,生成静态资源
- 第二阶段 Nginx 镜像: 使用 nginx 镜像对单页应用的静态资源进行服务化
该 Dockerfile 配置位于 cra-deploy/simple.Dockerfile
FROM node:14-alpine as builderWORKDIR /code# 单独分离 package.json,是为了安装依赖可最大限度利用缓存
ADD package.json yarn.lock /code/
RUN yarnADD . /code
RUN npm run build# 选择更小体积的基础镜像
FROM nginx:alpine
COPY --from=builder code/build /usr/share/nginx/html
启动容器
我们将 Dockerfile 命名为 simple.Dockerfile
该 docker compose 配置位于 cra-deploy/simple.Dockerfile
version: "3"
services:simple:build:context: .dockerfile: simple.Dockerfileports:- 4000:80
使用 docker-compose up --build simple
启动容器。
访问 http://localhost:4000
页面成功。
小结
本篇文章,通过构建缓存与多阶段构建优化了体积和时间,然而还有两个个小问题需要解决:
- 单页应用的路由配置
- 单页应用的缓存策略
【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用相关推荐
- react中使用构建缓存_使用React构建Tesla的电池范围计算器(第1部分)
react中使用构建缓存 by Matthew Choi 由Matthew Choi 使用React构建Tesla的电池范围计算器(第1部分) (Building Tesla's Battery Ra ...
- Docker容器(配置+镜像建立及优化+镜像加速器制作)
一.docker简介 Docker是管理容器的引擎. Docker为应用打包.部署平台,而非单纯的虚拟化技术 1.VM vs Container 2.传统虚拟机和容器的技术对比 3.容器是如何工作的 ...
- 前端部署及发布服务知识点
静态资源组织 一个简单的页面 先从简单的静态页面开始,众所周知,前端资源由 HTML.JavaScript.CSS 三剑客组成,假设我们有一个简单的页面,用Nginx作为 Web 服务器,资源组织结构 ...
- 2021年 最新 多阶段构建dockerfile实现java源码编译打jar包并做成镜像
多阶段构建指在Dockerfile中使用多个FROM语句,每个FROM指令都可以使用不同的基础镜像,并且是一个独立的子构建阶段.使用多阶段构建打包Java应用具有构建安全.构建速度快.镜像文件体积小等 ...
- 用微前端的方式搭建类单页应用
前言 微前端由ThoughtWorks 2016年提出,将后端微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用. 美团已经是一家拥有几万人规模的大型互 ...
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
问题描述: 前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是 ...
- 编译器连接器分析器_使用构建分析器了解您的构建
编译器连接器分析器 As members of the Android Developer Tools team, my teammates and I come to work each day t ...
- Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
- 在Kotlin中使用Gradle构建缓存
Kotlin 1.2.21允许Kotlin项目使用构建缓存.通过Gradle的构建缓存功能,可以提升Kotlin代码的编译速度,加快开发周期.本文将结合实际例子,介绍利用Gradle加速Kotlin代 ...
最新文章
- 14.Linux shell编程(函数)
- Nginx之让用户通过用户名密码认证访问web站点
- 微信小程序图片放大预览效果的实现
- Android+NDK+OpenGLES开发环境配置
- First Grid 枚举(100)
- 微型计算机1tb等于,计算机应用基础第一套试卷100分
- java如何调用系统保存框_java使用poi实现excel导出之后如何弹出保存提示框
- Android使用suspendCancellableCoroutine将回调转换为协程
- Apache Superset从入门到放弃(基于python3.6.9)
- html5 white space,CSS white-space 属性
- redis源码阅读(1)
- python中字符串大小写转换常用操作
- java+jquery实现长轮询案例_网页实时聊天之js和jQuery实现ajax长轮询
- Linux的哲学思想
- PyQt、PySide、PySide2这三者到底有什么区别?
- 分享几个音乐下载神器,一键下载全网音乐
- 基于FPGA的数字混频器设计与仿真
- 外派linux运维,请好好善待你身边的Linux运维工程师,因为他们...
- 大脑衰老可逆转,只需注入年轻脑脊液,「返老还童」登Nature
- 怎么查看拼多多店铺销量?怎么查看店铺后台数据图?