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

开发到部署，亲力亲为

当我们开发一个单页面应用时，执行完构建后

npm run build

会生成一个 index.html 在 dist 目录，那怎么把这个 index.html 部署到服务器上呢？

目录结构

  • dist/：前端构建完的静态文件
  • docker/：镜像所需的配置文件

配置 Nginx

挑几点配置讲讲，先是 Gzip 压缩资源，以节省带宽和提高浏览器加载速度

虽然 Webpack 已经支持在构建时就生成 .gz 压缩包，但也可以通过 Nginx 来启用

gzip on;
gzip_disable "msie6";
# 0-9 等级，级别越高，压缩包越小，但对服务器性能要求也高
gzip_comp_level 9;
gzip_min_length 100;
# Gzip 不支持压缩图片，我们只需要压缩前端资源
gzip_types text/css application/javascript;

再就是服务端口的配置，将 API 反向代理到后端服务

server {
 listen 8080;
 server_name www.frontend.com;

 root /usr/share/nginx/html/;

 location / {
 index index.html index.htm;
 try_files $uri $uri/ /index.html;
 # 禁止缓存 HTML，以保证引用最新的 CSS 和 JS 资源
 expires -1;
 }

 location /api/v1 {
 proxy_pass http://backend.com;
 }
}

完整配置长这样

worker_processes 1;

events { worker_connections 1024; }

http {
 ##
 # Basic Settings
 ##

 sendfile on;
 tcp_nopush on;
 tcp_nodelay on;
 keepalive_timeout 65;
 types_hash_max_size 2048;

 include /etc/nginx/mime.types;
 default_type application/octet-stream;

 ##
 # Logging Settings
 ##

 access_log /var/log/nginx/access.log;
 error_log /var/log/nginx/error.log;

 ##
 # Gzip Settings
 ##

 gzip on;
 gzip_disable "msie6";
 gzip_comp_level 9;
 gzip_min_length 100;
 gzip_types text/css application/javascript;

 server {
 listen 8080;
 server_name www.frontend.com;

 root /usr/share/nginx/html/;

 location / {
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
  expires -1;
 }

 location /api/v1 {
  proxy_pass http://backend.com;
 }
 }
}

配置 Docker

这里简单一点，基于基础镜像，拷贝我们写好的 nginx.conf 和 index.html 到镜像内

FROM nginx:alpine

COPY nginx.conf /etc/nginx/nginx.conf
COPY dist /usr/share/nginx/html

编写 Makefile

完成了上面的准备，就可以编写命令来执行镜像的打包了

先给镜像取个名称和端口号

APP_NAME = spa_nginx_docker
PORT = 8080

通过 build 来打包镜像

build:
 cp docker/Dockerfile .
 cp docker/nginx.conf .
 docker build -t $(APP_NAME) .
 rm Dockerfile
 rm nginx.conf

通过 deploy 来启动镜像

deploy:
 docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME)

最后还有个 stop 来停止和清理镜像

stop:
 docker stop $(APP_NAME)
 docker rm $(APP_NAME)
 docker rmi $(APP_NAME)

完整配置长这样

APP_NAME = spa_nginx_docker
PORT = 8080

build:
 cp docker/Dockerfile .
 cp docker/nginx.conf .
 docker build -t $(APP_NAME) .
 rm Dockerfile
 rm nginx.conf

deploy:
 docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME)

stop:
 docker stop $(APP_NAME)
 docker rm $(APP_NAME)
 docker rmi $(APP_NAME)

完整命令长这样

# 静态资源构建
npm run build

# 镜像打包
make build

# 停止并删除旧镜像（首次可忽略）
make stop

# 镜像启动
make deploy

总结

目前的部署方法相对简单，后续会加入基础镜像和镜像仓库的使用，先去前面探探路

赞 (0)

相关推荐

  • docker nginx 部署多个项目的示例方法

    前提条件 1.本地电脑和服务器已安装 docker,下载方法自行谷歌吧 2.在 docker hub 上已有账号, 注册传送门: https://hub.docker.com/ 3.需要对 docker 已有所熟悉 ,并了解Dockerfile里的一些指令 使用Dockerfile 制作镜像 假如本机有一个叫web的项目 在web根目录下新建Dockerfile,写入以下内容 FROM nginx:1.13.6-alpine LABEL maintainer="lilywang <lily

  • CentOS7 Docker Nginx部署及运行详解

    CentOS7 Docker Nginx部署及运行详解

    网上找了一些资料部署,出现不一样的问题,现在总结一下自己的部署流程. 1.资源准备 Dockerfile文件 # "ported" by Adam Miller <maxamillion@fedoraproject.org> from # https://github.com/fedora-cloud/Fedora-Dockerfiles # # Originally written for Fedora-Dockerfiles by # scollier <scol

  • Docker搭建 Nginx+PHP+MySQL 环境并部署WordPress实践

    Docker搭建 Nginx+PHP+MySQL 环境并部署WordPress实践

    Docker基于LXC实现了把软件封装到一个完整的文件系统,可以在docker容器中运行所需的一切代码,运行环境,系统工具和系统库.由于docker使用独立于主机的文件系统,可以确保软件在不同的主机环境中仍然保持运行环境不变.docker与主机共用一个操作系统内核,使用docker容器具有轻量级的特点,能占用更少的内存快速启动容器. 下面我们学习使用docker来部署目前非常流行的博客系统wordpress的运行环境nginx php mysql.那么docker部署wordpress的运行环境

  • Docker新手实践及部署NGINX的步骤详解

    Docker新手实践及部署NGINX的步骤详解

    docker是什么 官方文档入口 在知乎上看到关于docker的思想讲的挺好的:如何通俗解释Docker是什么?.这里直接引用了. Docker的思想来自于集装箱,集装箱解决了什么问题?在一艘大船上,可以把货物规整的摆放起来.并且各种各样的货物被集装箱标准化了,集装箱和集装箱之间不会互相影响.那么我就不需要专门运送水果的船和专门运送化学品的船了.只要这些货物在集装箱里封装的好好的,那我就可以用一艘大船把他们都运走. docker就是类似的理念.现在都流行云计算了,云计算就好比大货轮.docker

  • 使用Docker搭建Django，Nginx，R，Python部署环境的方法

    本文介绍了使用Docker搭建Django,Nginx,R,Python部署环境的方法,分享给大家,具体如下: 基本环境: Ubuntu 16.10 docker 17.06.0-ce 压缩自己的项目文件 1.这里需要注意的是,在压缩的时候,也需要把自己的需要的Python包写在requirement.txt,这样搭建环境的时候才会知道你需要什么包,才能一起安装,我的项目的requirement.txt 内容如下. Django==1.10.5 rpy2==2.8.5 PyMySQL==0.7.

  • Docker容器化部署尝试——多容器通信(node+mongoDB+nginx)

    原因是这样的 想要部署一个mocker平台,就在朋友的推荐下选择了 api-mocker 这个现成的项目 该项目分为服务端node.客户端vue.以及数据库mongoDB 在尝试直接部署的时候发现需要装一大堆的环境,node.mongo.nginx啊,特别的麻烦,之前简单的使用过docker,就在想能不能用docker免环境直接部署呢?于是就有了这次的尝试 多容器通信 该项目分为3个部分,于是就要建立3个容器(node.mongo.nginx) 那容器之间怎么实现通信呢? # 通过link指令建

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

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

  • Docker镜像+nginx 部署 vue 项目的方法

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin

  • Docker部署单页应用的详细操作

    目录 1. Docker 介绍 2. Docker 安装 3. Docker 基本操作 4. Vue 应用镜像 4.1 Dockerfile 配置文件 什么是 Dockerfile? 4.2 编写 Nginx 配置文件 4.3 构建镜像 5. 创建容器与启动 总结 1. Docker 介绍 Docker 是一个基于 GO 语言和 Linux 内核的虚拟化容器技术,遵从 Apache2.0 协议开源. Docker 与虚拟机给人的感觉比较相似,但是两者的实现原理不同:Docker 是虚拟化操作系统

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

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

  • docker+Nginx部署前端项目的详细过程记录

    目录 相关配置安装 创建配置文件 项目打包与部署 一个相关报错: 总结 相关配置安装 安装Docker yum install docker 启动服务 start docker systemctl start docker Docker中拉取nginx镜像 docker pull nginx 创建配置文件 我们需要在根目录下创建Dockerfile文件和default.conf文件. 其中default.conf文件的名称是什么无所谓,只要在配置文件中注意使用相同名称即可. Dokcerfile

  • Docker中部署mysql服务的方法及遇到的坑

    最近一直在学习搬运工,感觉这么厉害的东西怎么以前不知道呢,把自己捣鼓的过程整理记录下来,供同学们参考 第零步:从Docker Hub拉取官方mysql镜像 docker pull mysql 然后就是进入漫长的等待,当然如果你配置了镜像加速器,速度会快那么一丢丢 第一步:使用docker images命令查看镜像 你会看到我们这里已经有了MySQL的的镜像 第二步:启动我们的mysql的镜像,创建一个MySQL的容器 使用命令:docker run -d --name mysql -p 3307

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

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

  • Docker一键部署springcloud项目的方法

    Docker一键部署springcloud项目的方法

    目录 docker下载的镜像 启动mysql和nacos 修改自己的java项目 打包 上传Linux系统 启动 遇到的一些问题: 其他错误 docker下载的镜像 1.下载nacos docker pull nacos:[版本号] 2.下载mysql docker pull mysql:[版本号] 3.安装docker-compose Linux下需要通过命令下载: # 安装 curl -L https://github.com/docker/compose/releases/download

  • 使用 Nginx 部署静态页面的方法

    Nginx 介绍 Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器, Nginx,它的发音为 " engine X ",是一个高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/ POP3/ SMTP 代理服务器.Nginx 是由俄罗斯人 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了.Igor Sysoev 在建立的项目时,使用基于 BSD 许可. 英文主页:http://nginx.net. Ngi

随机推荐