Docker中的Nginx配置代理实现不同url访问vue和springboot项目

我的需求：已经通过docker配置好了vue和springboot项目，通过http://101.201.210.12:7777 和http://101.201.210.12:9999 分别已经可以访问，现在我希望通过直接访问http://101.201.210.12/qianduan 进入vue项目，http://101.201.210.12/houduan 进入后端项目

思路：通过Nginx的反向代理（自定义服务器后面的/qianduan 或/houduan），配置默认的80端口（这样可以不用输入ip的端口）

1.docker拉取一下nginx：

docker pull nginx

2.进入/root/nginx

cd /root/nginx

3.在该文件夹下面创建一个nginx.conf文件，内容输入：标红的改为自己的项目url地址

user nginx;

worker_processes auto;

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

pid /run/nginx.pid;

include /usr/share/nginx/modules/*.conf;

events {

    worker_connections 1024;

}

http {

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '

                      '$status $body_bytes_sent "$http_referer" '

                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    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;

    include /etc/nginx/conf.d/*.conf;

   

    server {

        listen       80 default_server;

        listen       [::]:80 default_server;

        server_name  101.201.210.12;

        location /houduan/ {   #这个是代理到后端的接口

            proxy_pass http://101.201.210.12:9999/;

        }

        location /qianduan/ {  #这个是前端的接口

             proxy_pass http://101.201.210.12:7777/;

        }

        location /assets/ { #这个就是解决找不到静态文件

            proxy_pass http://101.201.210.12:7777/assets/;

        }

       

        error_page 404 /404.html;

        location = /40x.html {}

        error_page 500 502 503 504 /50x.html;

        location = /50x.html {}

    }

}

4.创建容器：b690f5f0a2d5是镜像id，端口一定是80:80，不要改

docker run --name nginx -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf  -p 80:80 -d  b690f5f0a2d5

5.运行

http://101.201.210.12/qianduan

注意：当vue项目配置完毕后页面什么都没有，一片空白，控制台也没有报错，就将代码中的router中的createWebHistory改为createWebHashHistory