如何使用docker部署前端应用的方法步骤

docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，方便运维管理。对开发者也更方便开发，测试与部署。
最重要的是， 当你面对一个陌生的项目，你可以照着 Dockerfile，甚至不看文档(文档也不一定全，全也不一定对)就可以很快让它在本地跑起来。

现在很强调 devops 的理念，我把 devops 五个大字放在电脑桌面上，格物致知了一天。豁然开朗，devops 的意思就是写一个 Dockerfile 去跑应用(开玩笑。

这里介绍如何使用 Docker 部署前端应用。千里之行，始于足下，足下的意思就是，先让它能够跑起来。

先让它跑起来

首先，简单介绍一下一个典型的前端应用部署流程

npm install, 安装依赖
npm run build，编译，打包，生成静态资源
服务化静态资源

介绍完部署流程后，简单写一个 Dockerfile

FROM node:alpine
# 代表生产环境
ENV PROJECT_ENV production
WORKDIR /code
ADD . /code
RUN npm install && npm run build && npm install -g http-server
EXPOSE 80
CMD http-server ./public -p 80

现在这个前端服务已经跑起来了。接下来你可以完成部署的其它阶段了。一般情况下，以下就成了运维的工作了，不过，拓展自己的知识边界总是没错的。

使用 nginx 或者 traefik 做反向代理
使用 kubernetes 或者 compose 等做编排。
使用 gitlab ci 或者 drone ci 等做 CI/CD

这时镜像存在有两个问题，导致每次部署时间过长，不利于产品的快速交付

构建镜像时间过长
构建镜像大小过大，1G+

从 dependencies 和 devDependencies 下手

陆小凤说过，一个前端程序员若是每天工作八个小时，至少有两个小时是白白浪费了的。一个小时用来 npm install，另一个小时用来 npm run build。

对于每次部署，如果能够减少无用包的下载，便能够节省很多镜像构建时间。eslint，mocha，chai 等代码风格测试模块可以放到 devDependencies 中。在生产环境中使用 npm install –production 装包。

关于两者的区别可以参考文档 https://docs.npmjs.com/files/package.json.html#dependencies

FROM node:alpine
ENV PROJECT_ENV production
WORKDIR /code
ADD . /code
RUN npm install --production && npm run build && npm install -g http-server
EXPOSE 80
CMD http-server ./public -p 80

好像是快了那么一点点。

我们注意到，相对于项目的源文件来讲，package.json 是相对稳定的。如果没有新的安装包需要下载，则再次构建镜像时，无需重新装包。则可以在 npm install 上节省一半的时间。

利用镜像缓存