使用 nginx 容器部署前端项目并实现负载

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 nginx 容器部署前端项目并实现负载相关的知识,希望对你有一定的参考价值。

运行nginx镜像

1.拉取镜像

docker pull nginx

2.运行

docker run -it --name mynginx -p 8080:80 -d nginx
  • -t: 在新容器内指定一个伪终端或终端。

  • -i: 允许你对容器内的标准输入 (STDIN) 进行交互

  • -p:端口映射分别对应宿主主机(8080)与容器内(80)

  • --name: 后面跟容器名称

  • -d: 设置容器在在后台一直运行

  • --net=host 命令 。Docker 中的 host 模式指定是容器与主机享受相同的 network namespace,在这种情况下,我们访问主机端口就能访问我们的容器。比如说我们运行 tomcat 容器并且用 -- network=host 来指定我们的网络模式为 host,这样我们访问本机的 8080 端口就能访问到我们的 tomcat 容器。 3.验证

http://localhost:8080/

出现如这个页面表示容器运行成功了。接下来就要更改容器中 nginx 的配置了。

配置 nginx

nginx 的默认路径

(1) Nginx配置路径:/etc/nginx/
(2) PID目录:/var/run/nginx.pid
(3) 错误日志:/var/log/nginx/error.log
(4) 访问日志:/var/log/nginx/access.log
(5) 默认站点目录:/usr/share/nginx/html

对nginx进行配置有两种方式,一是使用 docker exec 命令进入nginx容器的可交互式终端里,找到对应的nginx配置文件进行修改,由于我们运行的容器是一个最简操作系统,很多工具都需要额外安装,所以不推荐这种方式。 第二种方式就是进行目录挂载,将容器中nginx配置文件存在的地址映射到我们的宿主主机上。这样只需要把修改后的配置文件,放入对应的目录中即可完成配置,还能将日志输出到宿主主机上,方便我们维护。

下面我们在ubuntu虚拟机上进行目录挂载。

1.创建需要挂载的目录

mkdir -p /usr/local/niu/mynginx/conf,conf.d,html,log

2 启动挂载后的容器

docker -v 命令可用于目录挂载。

docker run --name nginx-app -d -p 8089:80 \\
-v /usr/local/niu/mynginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro \\
-v /usr/local/niu/mynginx/log:/var/log/nginx \\
-v /usr/local/niu/mynginx/html:/usr/share/nginx/html \\
-v /usr/local/niu/mynginx/conf.d:/etc/nginx/conf.d \\
nginx

第一个-v:挂载 nginx 的主配置文件,以方便在宿主机上直接修改容器的配置文件

第二个-v:挂载容器内 nginx 的日志,容器运行起来之后,可以直接在宿主机的这个目录中查看 nginx 日志

第三个-v:挂载静态页面目录

试一下不挂载 nginx.conf 文件,能够挂载成功

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

这一块有个很大的坑,docker 是不推荐直接挂载文件的,使用-v 命令,会首先会查询宿主主机上查看有没有你设置的目录,如果没有的话会自动创建一个,所以我们没必要在宿主主机上去创建挂载目录了。直接执行第二步,然后会报错,在宿主主机上找到 mynginx 文件夹删掉里边的nginx.conf文件夹,把你的nginx.conf文件放进去,删掉当前运行的容器,重新按第二步的命令进行启动。容器启动成功,挂载成功。

这个时候我们就可以直接对宿主主机进行操作了,更改完配置文件后,记得 restart 一下容器。

3配置 nginx 实现负载

nginx.conf配置文件

events 
    worker_connections  1024;



http 
    include       mime.types;
    default_type  application/octet-stream;
    keepalive_timeout  65;
    client_max_body_size 200m;

#start
    server
        listen 6501;
        server_name 39.97.184.218;

        location  / 
			root  /usr/share/nginx/html/fn1/dams;
                        index  index.html;
		
    

    server
        listen 6502;
        server_name 39.97.184.218;

        location  / 
			root  /usr/share/nginx/html/fn2/dams;
                        index  index.html;
		
    

    upstream fn 
        server localhost:6501;
        server localhost:6502;
	

    server 
        listen        80;
        server_name  localhost;
        location / 
            proxy_pass   http://fn;
            index  index.html index.htm;
        
    
#end

可以看到配置文件中出现了几个端口号。

80 是nginx服务的端口 localhost:80/ => http://fn

6501,6502 监听了我们的两个前端项目。

upstream fn 就是配置的负载了。它的作用就是将请求分发到两个服务中,这里分发的方式是轮询,其他的分发方式可参考大佬们的教程。

当我们刷新页面时会分别访问到我们的两个服务。 效果如下图:

nginx 应用的拓展

添加静态文件夹服务

  location /upload/ 
            alias /usr/share/nginx/html/images/;
            autoindex on; //显示索引
            autoindex_exact_size on; //显示大小
            autoindex_localtime on;   //显示时间
        

http://localhost:8089/upload/1.png

docker --net=host 命令

启动第 coral-isc 节点

coral-isc-web服务

nginx.conf

	server 
		listen 8090;
		server_name  39.97.184.218;
		location  /  
			root  /usr/local/niu/coral-isc-web/web;
			index  index.html;
		
	

容器命令:

docker run -it -d  --name coral-isc-web 
-v /usr/local/niu/coral-isc-web/nginx.conf:/etc/nginx/nginx.conf 
-v /usr/local/niu/coral-isc-web/web:/usr/local/niu/coral-isc-web/web 
--privileged --net=host nginx

访问:http://localhost:8090/

coral-isc-server

nginx.conf

	server 
		listen 8091;
		server_name  39.97.184.218;
		location  /  
			root  /usr/local/niu/coral-isc-server/server;
			index  index.html;
		
	

容器命令:

docker run -it -d  --name coral-isc-server 
-v /usr/local/niu/coral-isc-server/nginx.conf:/etc/nginx/nginx.conf 
-v /usr/local/niu/coral-isc-server/server:/usr/local/niu/coral-isc-server/server 
--privileged --net=host nginx

以上是关于使用 nginx 容器部署前端项目并实现负载的主要内容,如果未能解决你的问题,请参考以下文章

Nginx - Docker 容器化 Nginx 部署前端 Vue 项目访问 404

Docker 网络

Dockerfile编写,容器部署项目,用nginx做负载均衡,私有仓库搭建

手把手带你玩转k8s-一键部署vue项目

使用Nginx部署前后端分离项目并实现负载均衡

Docker Compose 部署Nginx服务实现负载均衡