前后端分离部署 Nginx如何配置

简介: 前后端分离部署 Nginx如何配置

先部署启动后端程序 java -jar xxx.jar

前端打包给你的dist文件夹,把他放到一个位置,这里是放在 D:\soft\dist

然后配置nginx配置文件 如下:

server {
        listen       80;
        server_name  localhost;
        location / {
            root   D:\soft\dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        location /api/ {
      add_header    'Access-Control-Allow-Origin' '*';
            add_header    'Access-Control-Allow-Credentials' 'true';
            add_header    'Access-Control-Allow-Methods' 'OPTIONS, GET, POST';
            proxy_pass    http://172.17.1.2:9090/;
      proxy_connect_timeout   300s;
      proxy_send_timeout  300s;
      proxy_read_timeout  300s;
      proxy_set_header    Host             $host;
      proxy_set_header    X-Real-IP        $remote_addr;            
      proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
       location /index/ {
      add_header    'Access-Control-Allow-Origin' '*';
            add_header    'Access-Control-Allow-Credentials' 'true';
            add_header    'Access-Control-Allow-Methods' 'OPTIONS, GET, POST';
            proxy_pass    https://iot.krzhibo.com/index/;
      proxy_connect_timeout   300s;
      proxy_send_timeout  300s;
      proxy_read_timeout  300s;
      proxy_set_header    Host             $host;
      proxy_set_header    X-Real-IP        $remote_addr;            
      proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
 
    }

值得注意的是这里一个server中配置了3个location

第一个location / 表示浏览器中输入localhost的时候 默认访问D:\soft\dist文件夹下的index.html

第二个location /api/ 表示访问路径中带api的,反向代理到http://172.17.1.2:9090/

所以前端在调用接口的地址前面都需要加上api

第三个location /index/ 表示访问路径中带index的,反向代理到https://iot.krzhibo.com/index/ 外部接口,

例如:

访问http://172.17.1.2/index/common/face/signlist的时候,

实际上是访问到:https://iot.krzhibo.com/index/common/face/signlist

目录
相关文章
|
9月前
|
前端开发 应用服务中间件 nginx
|
负载均衡 前端开发 算法
如何使用Nginx 部署前端项目,什么是反向代理?
Nginx可以作为静态web服务器来部署静态资源。这里所说的静态资源是指在我们web服务端真实存在,并且能够直接展示的一些文件,比如常见的html页面
如何使用Nginx 部署前端项目,什么是反向代理?
|
3月前
|
应用服务中间件 nginx
前后端分离项目中nginx部署的相关配置
前后端分离项目中nginx部署的相关配置
|
10月前
|
负载均衡 前端开发 应用服务中间件
nginx部署前后端分离项目(二)
nginx部署前后端分离项目(二)
379 1
|
前端开发 应用服务中间件 API
Nginx入门及如何反向代理解决生产环境跨域问题
Nginx入门及如何反向代理解决生产环境跨域问题
|
安全 Unix 应用服务中间件
nginx 企业应用配置-1 | 学习笔记(二)
快速学习nginx 企业应用配置-1。
186 0
|
缓存 算法 Unix
nginx企业应用配置-3 | 学习笔记(一)
快速学习nginx企业应用配置-3。
1313 0
|
缓存 安全 JavaScript
nginx 企业应用配置-3 | 学习笔记(二)
快速学习 nginx 企业应用配置-3。
106 0
|
缓存 应用服务中间件 Linux
nginx 企业应用配置-1 | 学习笔记(一)
快速学习nginx 企业应用配置-1。
119 0
|
存储 应用服务中间件 Linux
nginx 企业应用配置-2 | 学习笔记
快速学习 nginx 企业应用配置-2。
88 0
nginx 企业应用配置-2 | 学习笔记