前端部署相关

发表于 分类于 本文字数： 845 阅读时长 ≈ 3 分钟

Docker相关见：Docker学习
Nginx相关见：Nginx学习

极简部署

手写一个简单的静态资源服务器

基于 docker/docker-compose 对极简项目的部署

docker-compose

基于Nginx镜像的部署

单页应用部署

单页应用的静态资源

所有的前端单页应用对于部署，最重要的就是两点：

  • 静态资源如何构建：大部分项目都是 npm run build
  • 静态资源目录在哪：有的项目是 /dist，有的项目是 /build。CRA 是 /build 目录

一个最简单的Dockerfile：

1
2
3
4
5
6
7
8
9
FROM node:14-alpine
 
WORKDIR /code
 
ADD . /code
RUN yarn && npm run build
 
CMD npx serve -s build
EXPOSE 3000

这样其实就已经完成构建了，然而还可以针对以下两点进行优化：

  • 构建镜像时间过长，优化构建时间
  • 构建镜像文件过大，优化镜像体积

构建时间优化：构建缓存

一个前端项目的耗时时间主要集中在两个命令：

  • npm i (yarn)
  • npm run build

docker构建缓存

构建体积优化：多阶段构建

我们的目标是提供静态服务（资源），完全不需要依赖于 node.js 环境进行服务化。node.js 环境在完成构建后即完成了它的使命，它的继续存在会造成极大的资源浪费。

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

第一阶段 Node 镜像：使用 node 镜像对单页应用进行构建，生成静态资源。
第二阶段 Nginx 镜像：使用 nginx 镜像对单页应用的静态资源进行服务化。

对象存储

将静态资源部署在OSS/CDN

静态资源上传时间及空间优化

服务编排

CI/CD

常见的部署方案

html通过Nginx/Node bff返回，JS/CSS通过CDN返回

Nginx + Docker + CDN

打包生成产物时JS/CSS拼接上CDN地址

Node Bff

常见几种：

SSR：Node 先拉后端数据，再 renderToString 输出完整 HTML
模板渲染：Node 用 ejs/nunjucks 拼模板返回 HTML
Hybrid：返回基础 HTML + 注入首屏数据，前端再 hydration
为什么这么做：
首屏更快可见（尤其弱网）
SEO 更友好（爬虫直接拿到内容）
可以按用户态个性化（登录态、地区、AB 实验）

如何选型

静态站：HTML 可放 Nginx/Docker 直出
动态站/SSR：HTML 由 Node BFF 返回，Nginx 在前面做反代与网关

最佳实践

1、JS、CSS等静态资源利用CDN

2、利用Docker构建缓存

3、利用Docker多阶段构建

4、Nginx相关最佳实践

5、按需上传静态资源文件到OSS/CDN

详细见：Nginx最佳实践

其他

1、项目部署后如何提升用户版本更新

FAQ

1、为什么不Node实现静态资源服务器

  • 镜像体积过大
  • 没有rewrite、redirect那些能力
  • 没有缓存cache那些能力