Docker中的Nginx配置代理实现不同url访问多个vue项目_docker 配置url跳转

本篇文章接上回Docker中的Nginx配置代理实现不同url访问vue和springboot项目-CSDN博客

在上篇已经实现可以访问http://ip/qianduan   到我们的vue项目，但是有个问题就是如果多个vue项目在/assets/ 的静态资源文件夹就无法设置，我试过在nginx里面使用if，try_files，map等使其根据不同请求的地址来让location中的assets 代理值发生改变，但是都以失败告终。

这里再说明一下，本教程和上一个教程，无论是nginx，vue1项目，vue2项目，springboot都是用docker配置的容器。

现在找到一个办法：

1.在自己的vue项目里面的vite.config.js文件里面添加base路径（为了在/assets/前面多加一个访问文件夹）

base: '/whyz/', // 设置基础路径为 /whyz/

2.将修改后的vue部署到docker里面，端口什么的都不用变，和之前的保持一致（部署上去用ip加端口访问页面什么都没有，控制台发现报了资源404，不用管）

3.进入Nginx代理服务器的配置文件里面

cd /root/nginx      #这个是上篇文章建立的

4.在Nginx代理服务器配置文件做如下：（nginx.conf这里给到全部配置）

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;

    default_type        application/octet-stream;

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

    server {

        listen       80 default_server;

        listen       [::]:80 default_server;

        #server_name  124.71.10.190;

        ##########################################通用测试项目vue

        location /common/ {

            proxy_pass http://124.71.10.190:1237/;

        }

        ##########################################whyz的vue

        location /whyz/ {

            proxy_pass http://124.71.10.190:7468/;

        }

        ##########################################

        error_page 404 /404.html;

        location = /40x.html {}

        error_page 500 502 503 504 /50x.html;

        location = /50x.html {}

    }

}

以上标红位置就是需要修改为自己的vue1和vue2的地址（注意：/whyz/ 这个是对应在vite.confg.js里面设置的base路径）

5.将修改后的配置文件移进代理Nginx中

docker cp nginx.conf nginx:/etc/nginx/nginx.conf

nginx是用docker配置的容器，换成自己的

6.重启nginx容器

docker restart nginx

7.访问：

http://124.71.10.190/whyz/

http://124.71.10.190/common/

注意：在本篇中我们在vite.conf中设置了base地址，本地直接跑是没问题的，但是上传在docker里面直接ip+端口是无法访问的，这个没去解决，但是这样的话我们通过nginx的代理去访问，就可以实现我们的多个vue项目运行解决静态资源的问题。因为现在直接ip+端口跑不起来，所以自己取舍一下要么不要base直接注释掉，通过ip+端口访问，要么就加个base通过nginx的代理