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

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

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

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

先让它跑起来

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

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

介绍完部署流程后,简单写一个 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 上节省一半的时间。

利用镜像缓存

对于 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 <repo> 的缓存此类

参考官方文档 https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#leverage-build-cache

多阶段构建

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

  1. 在构建服务器构建镜像
  2. 把镜像推至镜像仓库服务器,
  3. 在生产服务器拉取镜像,启动容器

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

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

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

但最后我们只需要 public 文件夹下的内容,对于源文件以及node_modules下文件,占用体积过大且不必要,造成浪费。
此时可以利用 Docker 的多阶段构建,仅来提取编译后文件

参考官方文档 https://docs.docker.com/develop/develop-images/multistage-build/

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
# npm run uploadCdn 是把静态资源上传至 cdn 上的脚本文件
RUN npm run build && npm run uploadCdn

# 选择更小体积的基础镜像
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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解如何在 Docker 中设置 Go 并部署应用

    嗨,在本教程中,我们将学习如何使用 docker 部署 golang web 应用程序. 你可能已经知道,由于 golang 的高性能和可靠性,docker 是完全是用 golang 写的.在我们详细介绍之前,请确保你已经安装了 docker 以及 golang 并对它们有基本了解. 关于 docker Docker 是一个开源程序,它可以将应用及其完整的依赖包捆绑到一起,并打包为容器,与宿主机共享相同的 Linux 内核.另一方面,像 VMware 这样的基于 hypervisor 的虚拟化操

  • Docker Cloud实现部署应用操作详解

    本文实例讲述了Docker Cloud实现部署应用操作.分享给大家供大家参考,具体如下: 如果您在生产环境中使用Docker Community Edition的效果还不错,可以使用Docker Cloud来帮助管理Amazon Web Services.DigitalOcean和Microsoft Azure等主流服务提供商的应用程序. 设置和部署流程是:将Docker Cloud与您的首选提供商连接,授予Docker Cloud权限,为您自动配置和Dockerize虚拟机:使用Docker

  • 使用Docker-compose离线部署Django应用的方法

    我们所在的内网环境需要部署一个类似CMS的应用,就是一些表格的CRUD,数据导出,人员权限管理等功能.想到Django做这方面的工作挺擅长的,而且开发量不大,于是选择Django作为开发基础.开发功能比较简单,差不多就是使用xadmin等插件实现以上功能.但有一个问题我们是不好绕过去的,那就是部署到一个内网环境,在内网pip等工具是不能使用的,但好在内网有一个yum服务器可以使用,所以我们决定在内网服务器上安装Docker,然后把开发环境的容器复制到生产环境实现部署.以下是主要的步骤: 安装开发

  • Docker实践--部署Nodejs应用

    这个例子的目标是为了向大家展示如何在Docker的container里运行Node.js程序.我会先创建一个简单的Node.js web app,来构建一个镜像.然后基于这个Image运行一个container.从而实现快速部署. 由于网络的原因我的Node.js镜像从国内的镜像库下载,而不是Docker Hub. 先从国内的镜像网站上pull下一下nodejs镜像. docker pull hub.c.163.com/nce2/nodejs:0.12.2 下载完后查看我们的镜像,找到他的名称,

  • 尝试Docker+Nginx部署单页应用方法

    开发到部署,亲力亲为 当我们开发一个单页面应用时,执行完构建后 npm run build 会生成一个 index.html 在 dist 目录,那怎么把这个 index.html 部署到服务器上呢? 目录结构 dist/:前端构建完的静态文件 docker/:镜像所需的配置文件 配置 Nginx 挑几点配置讲讲,先是 Gzip 压缩资源,以节省带宽和提高浏览器加载速度 虽然 Webpack 已经支持在构建时就生成 .gz 压缩包,但也可以通过 Nginx 来启用 gzip on; gzip_d

  • 使用Docker部署Spring Boot的应用示例

    Docker 技术发展为微服务落地提供了更加便利的环境,使用 Docker 部署 Spring Boot 其实非常简单,这篇文章我们就来简单学习下. 首先构建一个简单的 Spring Boot 项目,然后给项目添加 Docker 支持,最后对项目进行部署. 一个简单 Spring Boot 项目 在 pom.xml 中 ,使用 Spring Boot 2.0 相关依赖 <parent> <groupId>org.springframework.boot</groupId>

  • 在Docker中利用Tomcat快速部署web应用的方法示例

    在学习了docker的基本操作之后,我们就可以尝试在我们的container中部署一些基本的应用了. 这篇文章我们就来说一下怎么在docker中快速部署一个web应用. 首先肯定是要机器中安装了docker,如果没安装就是用yum install -y docker 命令安装一下 yum install -y docker 既然是部署web应用,那么当然少不了Tomcat了,所以我们应该先拉取Tomcat镜像.命令如下 docker pull tomcat 这个镜像有点大,所以可以事先拉取好,节

  • Docker部署Django应用的示例

    之前部署Web应用,没用docker,直接在服务器上部署,使用了fabric+nginx+supervisor+gunicorn部署,可查看我写过的一片博客:部署Web应用.但后来了解了docker,为其"Build,Ship and Run Any App,Anywhere"的思想所折服,觉得这个太牛逼了,所以我也尝试一下自己用docker部署Web应用.本篇文章为了记录我用docker部署web应用的过程和心得. 一.网络架构 我用Visio大概画了一下我的网络架构图: 我构建的容

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

    docker 变得越来越流行,它可以轻便灵活地隔离环境,进行扩容,方便运维管理.对开发者也更方便开发,测试与部署. 最重要的是, 当你面对一个陌生的项目,你可以照着 Dockerfile,甚至不看文档(文档也不一定全,全也不一定对)就可以很快让它在本地跑起来. 现在很强调 devops 的理念,我把 devops 五个大字放在电脑桌面上,格物致知了一天.豁然开朗,devops 的意思就是写一个 Dockerfile 去跑应用(开玩笑. 这里介绍如何使用 Docker 部署前端应用.千里之行,始于

  • 使用docker部署dubbo项目的方法步骤

    1.首先用springboot构建一个简单的dubbo测试程序,并引入相关依赖 编写公共接口api 编写provider实现UserSvice的方法,并暴露服务 编写provider的配置文件 编写Consumer 通过调用provider的服务获取user信息并返回 consumer的配置文件 测试程序已完成 在本地启动,看看程序是否能正常调用服务 启动zookeeper 先启动provider端再启动consumer端 通过dubbo的控制台看到我们的服务已经注册成功 通过访问本地,看到我们

  • 使用Docker部署Angular项目的方法步骤

    Docker 部署 Angular 项目有两种方法,一种是服务端渲染,这个官方文档已有说明,另一种就是使用 node 镜像编译后放入 web 服务器.由于在 node 环境,所以使用 express 最为便捷了. 创建 server.js const express = require('express'); const app = express(); const config = { root: __dirname + '/dist', port: process.env.PORT || 4

  • Docker部署Node.js的方法步骤

    前言 项目中会用到node做中间层,部署node则是用到了docker,在这里总结.记录下部署要点和步骤:关于docker的介绍和安装这里就不赘述了,网上也有很多相关的教程和文章了,需要可自行搜索查看. 项目结构 `-- docker-node |-- data |-- server |-- app.js |-- Dockerfile |-- process.yml |-- package.json |-- docker-compose.yml 1.创建Node.js程序 app.js cons

  • docker部署LNMP&phpMyAdmin的方法步骤

    环境准备: 在一台主机上部署lnmp,基于多个容器: nginx服务:172.16.10.10 mysql服务:172.16.10.20 php服务:172.16.10.30 解决容器固定ip地址问题: 注意:因为当容器停止时或者将容器删除,再次运行相同的容器,它的ip地址不再时原来的地址,所以我们需要自定义一个网段,来指定容器的ip地址. 项目操作: (1) 首先自定义一个网络: [root@sqm-docker01 ~]# docker network create -d bridge --

  • centos6使用docker部署kafka项目的方法分析

    本文实例讲述了centos6使用docker部署kafka项目的方法.分享给大家供大家参考,具体如下: 目录结构: /kafka     /Dockerfile     /start.sh     /Readme     /kafka_2.11-0.10.2.1.tgz Dockfile FROM centos MAINTAINER qiongtao.li hnatao@126.com ADD ./kafka_2.11-0.10.2.1.tgz /opt ADD ./start.sh /star

  • 基于Docker镜像部署go项目的方法步骤

    依赖知识 Go交叉编译基础 Docker基础 Dockerfile自定义镜像基础 docker-compose编排文件编写基础 当然,一点也不会也可以按照这个步骤部署完成,不过可能中间如果出点小问题,会不知道怎么解决,当然你也可以留言. 我是在mac环境上开发测试的,如果你是在windows上可能有一点出入,但应该不会有啥大问题. 一.依赖环境 Docker 二.编写一个GoLang web程序 我这里就写一个最简单的hello world程序吧,监听端口是80端口. 新建一个main.go文件

  • Docker 部署 Mysql8.0的方法示例

    1. 参照官网,安装docker 2.拉取mysql镜像 (默认拉取最新的镜像)8.0.11 docker pull mysql 3.在宿主机创建持久化 mysql data 及mysql.cnf mkdir /usr/local/mysqlData/test/cnf mkdir /usr/local/mysqlData/test/data vi /usr/loal/mysqlData/test/cnf/mysql.cnf 设置本地文件共享: Docker -> Preferences... -

  • docker部署LNMP架构的方法

    环境要求: IP hostname 192.168.1.1 node1 项目规划: 容器网段:172.16.10.0/24 NGINX:172.16.10.10 MySQL:172.16.10.20 PHP:172.16.10.20 网站根目录:/www nginx配置文件:/conf mysql持久化目录:/var/lib/mysql 提前准备服务配置文件: nginx <strong>docker run -itd --name test nginx #运行test容器 docker cp

  • Docker搭建部署Node项目的方法步骤

    目录 什么是Docker 客户端Docker Docker基本操作 镜像名称 拉取镜像 其他操作 Dockerfile Docker-compose 构建nginx-node-postgres项目 前段时间做了个node全栈项目,服务端技术栈是 nginx + koa + postgresql.其中在centos上搭建环境和部署都挺费周折,部署测试服务器,接着上线的时候又部署生产环境服务器.这中间就有很多既无聊又费精力,吃力不讨好的"体力活".所以就开始思考怎么自动化这部分搭建部署的工

随机推荐