如何使用 docker 部署前端应用

DesGemini 发布于2019-06-28 17:06 / 2424人阅读

摘要：如何使用部署前端应用变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，方便运维管理。对开发者也更方便开发，测试与部署。这里介绍如何使用部署前端应用。使用或者做反向代理使用或者等做编排。

如何使用 docker 部署前端应用

docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，方便运维管理。对开发者也更方便开发，测试与部署。

最重要的是， 当你面对一个陌生的项目，你可以照着 Dockerfile，甚至不看文档(文档也不一定全，全也不一定对)就可以很快让它在本地跑起来。

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

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

本文地址 http://shanyue.tech/post/depl...

先让它跑起来

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

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/...

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 上节省一半的时间。

利用镜像缓存

对于 ADD 来讲，如果需要添加的内容没有发生变化，则可以利用缓存。把 package.json 与源文件分隔开写入镜像是一个很好的选择。目前，如果没有新的安装包更新的话，可以节省一半时间

FROM node:alpine

ENV PROJECT_ENV production

# http-server 不变动也可以利用缓存
RUN npm install -g http-server

WORKDIR /code

ADD package.json /code
RUN npm install --production

ADD . /code
RUN npm run build
EXPOSE 80

CMD http-server ./public -p 80

关于利用缓存有更多细节，需要特别注意一下，如 RUN git clone 的缓存此类

参考官方文档 https://docs.docker.com/devel...

多阶段构建

得益于缓存，现在镜像构建时间已经快了不少。但是，镜像的体积依旧过于庞大，也会增加每次的部署时间

考虑下每次 CI 部署的流程

在构建服务器构建镜像

把镜像推至镜像仓库服务器，

在生产服务器拉取镜像，启动容器

显而易见，镜像体积过大造成传输效率低下，增加每次部署的延时。

即使，构建服务器与生产服务器在同一节点下，没有延时的问题。减少镜像体积也能够节省磁盘空间

关于镜像体积的过大，很大一部分是因为node_modules 臭名昭著的体积

但最后我们只需要 public 文件夹下的内容，对于源文件以及node_modules下文件，占用体积过大且不必要，造成浪费。

此时可以利用 Docker 的多阶段构建，仅来提取编译后文件

参考官方文档 https://docs.docker.com/devel...

FROM node:alpine as builder

ENV PROJECT_ENV production

# http-server 不变动也可以利用缓存
WORKDIR /code

ADD package.json /code
RUN npm install --production

ADD . /code
RUN npm run build

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

此时，镜像体积从 1G+ 变成了 50M+

使用 CDN

分析一下 50M+ 的镜像体积，nginx:alpine 的镜像是16M，剩下的40M是静态资源。

如果把静态资源给上传到 CDN，则没有必要打入镜像了，此时镜像大小会控制在 20M 以下

关于静态资源，可以分类成两部分

/static，此类文件在项目中直接引用根路径，打包时复制进 /public 下，需要被打入镜像

/build，此类文件需要 require 使用，会被 webpack 打包并加 hash 值，并可以通过 publicPath 修改资源地址。可以把此类文件上传至 cdn，并加上永久缓存，不需要打入镜像

FROM node:alpine as builder

ENV PROJECT_ENV production

# http-server 不变动也可以利用缓存
WORKDIR /code

ADD package.json /code
RUN npm install --production

ADD . /code
RUN npm run build

# 选择更小体积的基础镜像
FROM nginx:alpine
COPY --from=builder code/public/index.html code/public/favicon.ico /usr/share/nginx/html/
COPY --from=builder code/public/static /usr/share/nginx/html/static

云服务器 GPU云服务器 docker应用使用演示 docker容器部署应用 docker部署java应用 docker部署web应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/27719.html

[手把手系列之]Docker 部署 vue 项目

摘要：部署项目写在前面作为轻量级虚拟化技术，拥有持续集成版本控制可移植性隔离性和安全性等优势。容器可以被创建启动停止删除暂停等。重新运行应用容器直接基于镜像来启动容器，运行命令将宿主机的挂载到容器的目录上。Docker 部署 vue 项目 1.写在前面： Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽...

VPointer 2019-05-22 16:41 评论0 收藏0
服务器部署工具 - 收藏集 - 掘金

摘要：基本入门前端掘金作者本文属于翻译文章，原文链接为。如果如何把应用放在容器中运行掘金本文适合零基础，且希望使用运行应用的人士。后端掘金使用构建网站。 nginx 基本入门 - 前端 - 掘金作者：villainthr 本文属于翻译文章，原文链接为 nginx Beginner’s Guide。是至今为止见过最好的 nginx 入门文章。额。。。没有之一。这篇教程简单介绍了 nginx ...

Shonim 2019-07-25 13:56 评论0 收藏0
前端需要了解的 Docker 与 Kubernetes 知识

摘要：打开终端执行，再开一个终端输入输出，则表示该服务没有问题。将服务打包成镜像，然后将镜像实例化并运行，方便部署。此处以我的账号为例，需要推送到你自己的账号。是一种自动化运维工具，本文主要需要了解，，三个概念。至此成功使用部署应用。本文将以一个简单的示例演示如何使用 Docker 与 Kubernetes 部署应用上线。 Http Service 首先使用 Go 语言搭建一个简单的 Ht...

ChristmasBoy 2019-06-28 17:11 评论0 收藏0
前端需要了解的 Docker 与 Kubernetes 知识

摘要：打开终端执行，再开一个终端输入输出，则表示该服务没有问题。将服务打包成镜像，然后将镜像实例化并运行，方便部署。此处以我的账号为例，需要推送到你自己的账号。是一种自动化运维工具，本文主要需要了解，，三个概念。至此成功使用部署应用。本文将以一个简单的示例演示如何使用 Docker 与 Kubernetes 部署应用上线。 Http Service 首先使用 Go 语言搭建一个简单的 Ht...

孙吉亮 2019-07-01 17:12 评论0 收藏0
来说说Kubernetes的运作机制

摘要：提供用于获取有关容器和容器组状态的实时信息的服务，以及有关群集中开发人员操作的详细信息。集群最高级别的抽象是指运行本身是集群应用程序的一组机器及其管理的容器，一个集群必须有一个，即命令和控制集群中所有其他机器的系统。Docker容器改变了人们对开发、部署和维护软件的思考方式，利用现代操作系统的本机隔离功能，容器支持类似于虚拟机的关注点分离，但是与基于虚拟机监控程序的虚拟机相比，它的开销要小得...

yanest 2019-04-30 14:44 评论0 收藏0