Docker实战之通过nginx镜像来部署静态SPA项目

Docker中安装Nginx

本章主要是教大家怎么在Docker 中使用nginx

---

前言

Nginx是一款服务器，我们常用它做如：反向代理、负载均衡、动态与静态资源的分离的工作，
反向代理：反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，
并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。
负载均衡：目前大多数的网站都会采用负载均衡手段来针对目前用户的指数级增长来减少对单点服务器的负载压力，
比如目前我们拥有3台真实服务器，我们需要根据相应策略决定什么样的用户请求分配到哪个真实服务器，比如按照轮询的方式，
用户请求挨个到达代理服务器，此时代理服务器按照第一个请求转发至第一台真实服务器，第二个请求转发到第二个服务器上，依次类推，
这样可以防止大量的用户请求全部访问到同一台物理机上，单点物理机的性能始终有限的，当然这可能对服务器数据访问时候造成事务性的失效，

一、Docker中安装nginx

1.1搜索nginx镜像

docker search nginx

1.2拉取镜像

docker pull nginx

1.3宿主机中创建挂载目录

mkdir -p /data/nginx/{conf,conf.d,html,log}

命令解释：

注1：因为在nginx镜像中没有安装vi或vim编辑器(安装又太麻烦了)，无法编辑nginx配置文件，所以直接通过数据卷挂载上去更加方便
注2：将nginx配置文件nginx.conf上传到宿主机的挂载目录“/data/nginx/conf”下
注3：将vue前端项目打包后上传到宿主机的挂载目录“/data/nginx/html”下并解压

解压命令:

unzip dist.zip

1.4用nginx镜像创建nginx容器(测试nginx的安装与访问）

docker run \
       --name mynginx \
       -d -p 80:80 \
       nginx:latest

1.4.2测试nginx是否安装成功

打开浏览器输入：( http://宿主机ip:80)，正常情况下会显示nginx的欢迎页面

错误提示：
如果出现外部服务器连接不上！ 则需查看本宿主机是否启动80端口

二、通过nginx镜像来部署SPA项目

1.创建一个新的nginx容器

docker run \
       --name mynginx \
       -d -p 80:80 \
       -v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
       -v /data/nginx/log:/var/log/nginx \
       -v /data/nginx/html:/usr/share/nginx/html \
       nginx:latest

注释：

注1: 因为在nginx镜像中没有安装vi或vim编辑器(安装太麻烦了)，无法编辑nginx配置文件，所以所有数据和配置都是通过数据卷挂载
第一个-v：挂载nginx的主配置文件，以方便在宿主机上直接修改容器的配置文件
第二个-v：挂载容器内nginx的日志，容器运行起来之后，可以直接在宿主机的这个目录中查看nginx日志
第三个-v：挂载静态页面目录
注意命令之间的换行与空格

2.编写nginx.conf配置文件

#工作进程的个数，一般与计算机的cpu核数一致
worker_processes 1;

events {
	#单个进程最大连接数（最大连接数=连接数*进程数）
	worker_connections 1024;
}

http {
	include mime.types;#文件扩展名与文件类型映射表
	default_type  application/octet-stream;#默认文件类型
	sendfile on;#开启高效文件传输模式，sendfile指令指定nginx是否调用sendfile函数来输出文件，对于普通应用设为 on，如果用来进行下载等应用磁盘IO重负载应用，可设置为off，以平衡磁盘与网络I/O处理速度，降低系统的负载。注意：如果图片显示不正常把这个改成off。

	keepalive_timeout 65; #长连接超时时间，单位是秒
	gzip on;#启用Gizp压缩

	#服务器的集群
	#upstream  tomcats {  #服务器集群名字
	        #TODO：172.17.0.3是docker容器的IP 
		#server    10.0.10.2:8080  weight=1;#服务器配置   weight是权重的意思，权重越大，分配的概率越大。
		#server    10.0.10.3:8080  weight=2;
	#}  

	#当前的Nginx的配置
	server {
		listen       80;#监听80端口，可以改成其他端口
		server_name  localhost;#当前服务的域名，没有域名可随便填写

		root         /usr/share/nginx/html/dist;#将要访问的网站的目录

		location / {
			try_files $uri $uri/  /index.html;#该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍
		}
		#location  ~ .*\.{
		        #^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api
			#proxy_pass http://tomcats/;
		#}
	}

nginx.conf讲解：
1.所有配置必须以“;”结尾
2.nginx发布java项目
nginx+tomcat实现反向代理及均衡
upstream tomcats{
#TODO：172.17.0.3是docker容器的IP server 172.17.0.3:8080 weight=1;#服务器配置 weight是权重的意思，权重越大，分配的概率越大。

3.nginx发布静态vue项目

将vue前端项目打包后上传到宿主机的挂载目录“/data/nginx/html”下并解压
效果图：

三、总结

nginx可以防止大量的用户请求全部访问到同一台物理机上