nginx配置java前后端 nginx配置前端路径

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

location / {
 root /home/projects/web_front;
 #当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
 #例如：user/getByid/1 ,使用hash模式无此问题
 try_files $uri $uri/ /index.html;
 index index.html index.htm;
 }

当某些应用部署在内部网络，通往外网只放行了一个端口时，nginx需要配置统一端口的的多应用服务器（`一个server内配置多个应用的时候例如电脑端访问http://x.x.x.x:8080,访问电脑端，http://x.x.x.x:8080/app时访问H5端`），需要在vue.conf.js配置文件配置publicPath，例如 `publicPath：‘/app’`，当使用 `publicPath：‘/app’`时，需要配置配置nginx的location选项，将location的`root`配置项目改为`alias`。

location ^~app {
 alias /home/projects/h5_front;
 #当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
 #例如：user/getByid/1 ,使用hash模式无此问题
 try_files $uri $uri/ /index.html;
 index index.html index.htm;
 }

因为 nginx的location获取到匹配路径(`/app`)之后，root配置会使用`ip+端口`的方式请求nginx获取服务器的静态资源，(`例如：http://x.x.x.x:8080/aaa.img`),而使用alias配置时，会使用`ip+端口+匹配的路径`访问服务器静态资源,(`例如：http://x.x.x.x:8080/app/aaa.img`),此时可以正常访问服务器资源。不然会出现报错，找不到服务器静态资源。
**nginx配置**

server {
 listen 8080;
 server_name localhost;
 #例如：/ 根路径为电脑端
 location / {
 root /home/projects/web_front;
 #当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
 #例如：user/getByid/1 ,使用hash模式无此问题
 try_files $uri $uri/ /index.html;
 index index.html index.htm;
 }
 #例如：/app 路径为移动H5端
 location ^~app {
 alias /home/projects/h5_front;
 #当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
 #例如：user/getByid/1 ,使用hash模式无此问题
 try_files $uri $uri/ /index.html;
 index index.html index.htm;
 }

#nginx配置后台代码，当匹配到prod-api时使用代理地址请求
    location /prod-api/{
        proxy_set_header Host $http\_host;