docker 同时部署两个前端项目

一、在服务器上创建 docker nginx 容器

linux服务器上nginx目录如下，后面会将docker nginx容器中的对应目录挂载到conf、html、logs下

nginx
├─conf
├─html
│  ├─demo
│      ├─index.html
│  └─lzkj
│      ├─index.html
└─logs

conf: 存放 nginx.conf 配置文件
html: 存放前端项目，这里有两个项目，demo和lzkj，后面根据不同的端口进行访问
logs: 存放nginx错误日志

nginx.conf

#user  nobody;
worker_processes  2;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    # 前端项目1
    server {
        listen       18080;
        location / {
            root  /usr/share/nginx/html/demo/;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    
    # 前端项目2
    server {
        listen       18081;

        #错误路径
        access_log  /var/log/nginx/lzjk.access.log;
        error_log /var/log/nginx/lzjk.error.log;
        

        # 指定前端项目所在位置
        location / {
            root  /usr/share/nginx/html/lzkj/;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # 后端接口
        location /api/ {
         # 重写URL 去除api
         rewrite ^/api/(.*)$ /$1 break;
            
         #这里的 myServe 容器是后端接口服务，加入了创建的 docker网络，这样可以直接根据容器名称访问，不用担心ip变化
         set $target http://myServe:8080; #注意这里要使用变量方式，不然nginx启动的时候，会使用/etc/resolv.conf下配置的DNS服务器进行域名解析，当这个地址解析失败将导致nginx启动失败
         proxy_pass $target;
        }

    }
    
    include vhost/*.conf; #扩展：引入 vhost目录下的 .conf 文件中的 server 服务---用于扩展其他 server 服务，和写在这里是一个效果，只是拆分到不同文件中了

}

在根目录下创建 nginx 目录，并创建上面的结构

cd /nginx进入nginx文件目录，并执行以下命令：

docker run -id --name=lzkj_nginx \
--restart=always \
--network=yf-net \
-p 18080:18080 \
-p 18081:18081 \
--privileged=true \
-v $PWD/conf/nginx.conf:/etc/nginx/nginx.conf \
-v $PWD/logs:/var/log/nginx \
-v $PWD/html:/usr/share/nginx/html \
 nginx:1.21.6

命令解释：基于nginx:1.21.6版本创建nginx容器，名称：lzkj_nginx，随docker开机自启动，接入到自己创建的 yf-net docker网络，端口映射18080,18081（里面两个服务），privileged=true 授予容器内的进程对主机系统的更高权限，将nginx.conf文件，html目录，log日志目录进行挂载

至此，nginx 容器创建成功

image.png

二、测试是否能在外部访问：

先查看虚拟机ip地址，当然我这里肯定是ping得通的。

image.png

成功访问两个前端项目

image.png
image.png

至此，两个前端项目成功部署！

3.注意点

1.创建nginx 容器时的命令使用的$PWD，这个是环境变量，代表的当前目录，因此需要进入到nginx目录下执行，此时$PWD就是nginx目录。

当我使用 -v /root/nginx/conf/nginx.conf:/etc/nginx/nginx.conf 这种绝对路径方式创建时报错，估计是docker版本太低的问题，我用的几年前安装的的docker，因为docker源镜像老是访问失败，就没有更新docker。

2.nginx 配置文件 nginx.conf 的问题

1.语法问题

容器创好了发现外部始终访问不了，最终找了半天发现注释、rewrite 等语法问题，nginx不同版本语法有点点不兼容，改了就好了。

2.set $target http://myServe:8080;

注意是使用变量方式，不然nginx启动的时候，会使用/etc/resolv.conf下配置的DNS服务器进行域名解析，当这个地址解析失败将导致nginx启动失败，我们不能保证这个服务每次一定ok的，因此用变量方式好一些。

若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/d42ff8bc6b37?v=1728466937890，转载请注明出处，谢谢。

参考：
https://www.cnblogs.com/crxis/p/11341092.html