Docker如何部署前端项目

docker 入门之部署前端项目，以 create-react-app 为例。

1. github 上先下载 create-react-app 的源码。

git clone https://github.com/facebook/create-react-app.git

执行ls查看一下并cd进入该项目.

2. 在项目根目录下创建 Dockerfile 文件,并编写以下内容

vi Dockerfile  // 创建文件

编写内容：

# node 版本号
FROM node:15-alpine
# 工作目录
WORKDIR /create-react-app
# 添加所有文件到 create-react-app 目录
ADD . /create-react-app
# 执行命令
RUN npm install && npm run build && npm install -g http-server
# 暴露端口号
EXPOSE 3000
# 容器启动之后, 执行 http-server 注：./build 是指打包后的文件
CMD http-server ./build -p 3000

3. 创建 image 文件

docker image build --progress plain -t create-react-app-demo .

执行成功后, 查看一下 image 文件：

4. 从 image 文件生成容器

// 将 Dockerfile 中暴露出来的 3000 端口映射到本机的 1234 端口
docker container run -p 1234:3000 create-react-app-demo 

然后在本地执行 http://localhost:1234/， 成功。

是不是小有成就感？ 那你就错了，正常工作里不会这么用哈哈哈哈。

看看运行的 create-react-app 的镜像多大：docker images

吓人！一个 g…一般的前端项目打包过后的代码也就几十兆，然后你一个 docker 就要一个 G？加载起来时间也很漫长…运维哭晕在厕所，还是看看怎么优化一下吧

利用镜像缓存

1. package.json 算是相对稳定的吧，在没有新的安装包需要下载的时候，这个文件是无需重新构建的吧？！好像有点道理，盘他！

vim Dockerfile 重新修改一下配置信息：

# node 版本号
FROM node:15-alpine
# 工作目录
WORKDIR /create-react-app
# 添加所有文件到 create-react-app 目录
ADD package.json package-lock.json /create-react-app
ADD . /create-react-app
# 执行命令
RUN npm install && npm run build && npm install -g http-server
# 暴露端口号
EXPOSE 3000
# 容器启动之后, 执行 http-server 注：./public 是指打包后的文件
CMD http-server ./build -p 3000

每次修改完配置文件之后都需要重新构建镜像：

docker image build --progress plain -t create-react-app-demo .

接下来利用ci代替npm install.ci会比npm install的执行速度快，而且当 package.json 跟 package-lock.json 不匹配时，ci会报异常

# node 版本号
FROM node:15-alpine
# 工作目录
WORKDIR /create-react-app
# 添加所有文件到 create-react-app 目录
ADD package.json package-lock.json /create-react-app
ADD . /create-react-app
# 执行命令
RUN npm ci
RUN npm run build && npm install -g http-server
# 暴露端口号
EXPOSE 3000
# 容器启动之后, 执行 http-server 注：./public 是指打包后的文件
CMD http-server ./build -p 3000

再重新构建一次镜像。

构建时间是优化了那么一点，接下来看看 1G 的体积吧 吓人！

体积那么大，基本都归功于我们npm install的时候生成的 node_module 了吧。那把 node_module 搞掉，应该会小很多，试一波呗。

我们只需要静态生成的静态资源，那就只提取编译后的文件，而且部署项目推荐用 ngnix，所以这里也需要把 http-server 的镜像干掉 ，改成用 ngnix 的。

那 再改改 dockerfile 配置文件。vim dockerfile

FROM node:15-alpine as builder

WORKDIR /create-react-app
ADD . /create-react-app
ADD package.json package-lock.json  /create-react-app
RUN npm ci
RUN  npm run build

FROM nginx:alpine
COPY --from=builder /create-react-app/build /usr/share/ngnix/html

ngnix/html 是部署项目时需要添加编译文件的路径，这里需要先抓取一下 ngnix 的 image：
docker pull nginx:alpine

拉下来过后我们进入该容器看一下执行成功了没docker run -it --rm nginx:alpine sh

成功之后我们再重新构建一下image：

docker image build -t create-react-app-demo

然后再执行docker images，哈哈小成就感又来了～

总结

• 镜像中使用基于alpine的镜像，减小镜像体积；
• 镜像中需要锁定 node 的版本号，尽可能也锁定 alpine 的版本号，如node:15-alpine；
• npm ci替代npm i，避免版本问题及提高依赖安装速度；
• package.json 单独添加，充分利用镜像缓存；
• 只提取编译文件（多阶段构建），减小镜像体积。