前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

作者头像
山月
发布2022-05-23 17:04:42
1.4K0
发布2022-05-23 17:04:42
举报

大家好,我是山月,这是我最近新开的专栏:「前端部署系列」。包括 Docker、CICD 等内容,大纲图示如下:

大纲

「前端部署」系列正在更新: 4/20


部署完一个简单页面后,此时对于 Docker 与服务部署也有了简单理解。

终于可以来一个与真实项目接近带有复杂度的项目,以 CRA 部署为例:

「部署一个 Creact React APP2 单页应用。」

长按识别二维码查看原文 标题:Creact React APP

实际上,即使你们技术栈是 Vue 也无所谓,本系列文章很少涉及 React 相关内容,只要你们项目是单页应用即可。

PS: 本项目以 cra-deploy3 仓库作为实践,配置文件位于 simple.Dockerfile4 长按识别二维码查看原文 标题:cra-deploy

长按识别二维码查看原文 标题:simple.Dockerfile

1. 单页应用的静态资源

「所有的前端单页应用对于部署,最重要的就是两点:」

  1. 静态资源如何构建: 大部分项目都是 npm run build
  2. 静态资源目录在哪: 有的项目是 /dist,有的项目是 /build。「CRA 是 /build 目录」。

以下,便是在 cra 中获得静态资源的命令。

代码语言:javascript
复制
# 创建一个 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
    └── media

4 directories, 7 files

2. Dockerfile

在本地将 CRA 应用跑起来,可通过以下步骤:

代码语言:javascript
复制
$ yarn
$ npm run build
$ npx serve -s build

将命令通过以下几步翻译为一个 Dockerfile:

  1. 选择一个基础镜像。由于需要构建,需要 node 的运行环境,因此选择 node。
  2. 将以上几个脚本命令放在 RUN 指令中。
  3. 启动服务命令放在 CMD 指令中。
代码语言:javascript
复制
FROM node:14-alpine

WORKDIR /code

ADD . /code
RUN yarn && npm run build

CMD npx serve -s build
EXPOSE 3000

构建完成。然而还可以针对以下两点进行优化。

  1. 构建镜像时间过长,「优化构建时间」
  2. 构建镜像大小过大,「优化镜像体积」

3. 构建时间优化: 构建缓存

我们注意到,一个前端项目的耗时时间主要集中在两个命令:

  1. npm install (yarn)
  2. npm run build

在本地环境中,如果没有新的 npm package 需要下载,不需要重新 npm i。

「那 Docker 中是不也可以做到这一点?」

在 Dockerfile 中,对于 ADD 指令来讲,如果「添加文件内容的 checksum 没有发生变化,则可以利用构建缓存」。

而对于前端项目而言,如果 package.json/yarn.lock 文件内容没有变更,则无需再次 npm i

package.json/yarn.lock 事先置于镜像中,安装依赖将可以获得缓存的优化,优化如下。

代码语言:javascript
复制
FROM node:14-alpine as builder

WORKDIR /code

# 单独分离 package.json,是为了安装依赖可最大限度利用缓存
ADD package.json yarn.lock /code/
# 此时,yarn 可以利用缓存,如果 yarn.lock 内容没有变化,则不会重新依赖安装
RUN yarn

ADD . /code
RUN npm run build

CMD npx serve -s build
EXPOSE 3000

进行构建时,若可利用缓存,可看到 CACHED 标记。

代码语言:javascript
复制
$ 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
...

4. 构建体积优化: 多阶段构建

我们的目标静态资源,完全不需要依赖于 node.js 环境进行服务化,而 node.js 环境将造成极大的资源浪费。

我们可以使用多阶段构建进行优化,最终使用 nginx 进行服务化。

  1. 第一阶段 Node 镜像: 使用 node 镜像对单页应用进行构建,生成静态资源
  2. 第二阶段 Nginx 镜像: 使用 nginx 镜像对单页应用的静态资源进行服务化

该 Dockerfile 配置位于 cra-deploy/simple.Dockerfile5 长按识别二维码查看原文 标题:cra-deploy/simple.Dockerfile

代码语言:javascript
复制
FROM node:14-alpine as builder

WORKDIR /code

# 单独分离 package.json,是为了安装依赖可最大限度利用缓存
ADD package.json yarn.lock /code/
RUN yarn

ADD . /code
RUN npm run build

# 选择更小体积的基础镜像
FROM nginx:alpine
COPY --from=builder code/build /usr/share/nginx/html

5. 启动容器

我们将 Dockerfile 命名为 simple.Dockerfile

该 docker compose 配置位于 cra-deploy/simple.Dockerfile5 长按识别二维码查看原文 标题:cra-deploy/simple.Dockerfile

代码语言:javascript
复制
version: "3"
services:
  simple:
    build:
      context: .
      dockerfile: simple.Dockerfile
    ports:
      - 4000:80

使用 docker-compose up --build simple 启动容器。

访问 http://localhost:4000 页面成功。

6. 小结

本篇文章,通过构建缓存与多阶段构建优化了体积和时间,然而还有两个个小问题需要解决:

  1. 单页应用的路由配置
  2. 单页应用的缓存策略

参考资料

[1]

点击查看活动详情:https://juejin.cn/post/7080800226365145118

[2]

Creact React APP:https://github.com/facebook/create-react-app

[3]

cra-deploy:https://github.com/shfshanyue/simple-deploy

[4]

simple.Dockerfile:https://github.com/shfshanyue/cra-deploy/blob/master/simple.Dockerfile

[5]

cra-deploy/simple.Dockerfile:https://github.com/shfshanyue/cra-deploy/blob/master/simple.Dockerfile

[6]

cra-deploy/simple.Dockerfile:https://github.com/shfshanyue/cra-deploy/blob/master/docker-compose.yaml

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-04-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈成长之路 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 单页应用的静态资源
  • 2. Dockerfile
  • 3. 构建时间优化: 构建缓存
  • 4. 构建体积优化: 多阶段构建
  • 5. 启动容器
  • 6. 小结
相关产品与服务
容器镜像服务
容器镜像服务(Tencent Container Registry,TCR)为您提供安全独享、高性能的容器镜像托管分发服务。您可同时在全球多个地域创建独享实例,以实现容器镜像的就近拉取,降低拉取时间,节约带宽成本。TCR 提供细颗粒度的权限管理及访问控制,保障您的数据安全。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档