nginx 反向代理proxy_pass 后加斜杠和不加斜杆的区别

今日准备使用nginx 将上次使用docker 部署的一个vue项目进行地址代理,让他看起来高达尚一点,原本docker打包的镜像只是向外暴露了一个8191的端口,访问的时候就只能是 http://whaala.com:8191这个看起来太LOW, 不废话了直接开始

nginx 代理如下

    server {
      listen 443 ssl;
       location /vueapp/ {
	    proxy_pass http://127.0.0.1:8191;
       }
}

配置完成后急切运行

./nginx -s reload

重新加载配置

打开页面验证结果是这个样子的!!!
nginx 反向代理proxy_pass 后加斜杠和不加斜杆的区别_第1张图片

why? 怎么会这个样子。。。
一致不明白迷惑了;于是网上看见大佬说,

nginx 反向代理proxy_pass 后加斜杠和不加斜杆的区别_第2张图片

结合我的实际配置来看, 我想访问是其实是 http://127.0.0.1:8191这个路径下的8191端口下的index.html,
理想被代理后的地址应该是http://whaala.con:8191/index.html
但是因为我配置的时候没有在最后添加/ ; 被代理的路径变成了http://whaala.con:8191/vueapp/index.html;
而我的项目是使用docker 部署的;在打包的项目镜像文件并没有这个vueapp路径,
他映射的端口直接指向了如下目录中的index.html

drwxr-xr-x 2 root root 4096 Jul 28 09:30 config
drwxr-xr-x 3 root root 4096 Aug  4 21:51 dist
-rw-r--r-- 1 root root  404 Jul 28 09:30 Dockerfile
-rw-r--r-- 1 root root  624 Aug  4 21:51 index.html
-rw-r--r-- 1 root root 2612 Jul 28 09:30 package.json
-rw-r--r-- 1 root root 3253 Jul 28 09:30 prod.server.js

于是我将配置改为如下

 server {
        listen       80;
       location /vueapp/ {
	    proxy_pass http://127.0.0.1:8191/;
       }

 }

运行终于对了
nginx 反向代理proxy_pass 后加斜杠和不加斜杆的区别_第3张图片

特此记录。自己菜菜的历程,加深自己对nginx 反向代理的理解

你可能感兴趣的:(nginx,docker,vue)