如何实现Nginx本地搭载，及前后端交互。

1、本地环境准备

• 1、下载Nginx，安装到本地。具体安装可参考百度。下载地址nginx： 下载；

安装到本地，打开具体文件如下图。

2、前端工作

• 1、需要前端人员将前端代码文件压缩后给后端开发人员。一般打包的前端文件命名是dist。
• 2、解压dist文件到本地。可以现在本地建好前端web文件夹。如何前端文件有多个可以根据实际需求建多个文件夹。如图实例。在D盘下建manage_web文件夹，又在下面建两个子文件夹。
• 

将解压好的dist文件放在其中一个文件夹中。解压后具体文件如下。

 

3、后端工作内容。

• 1、首先，在本地Nginx文件中打开config文件。如图。
• 

• 2、打开config文件后，修改里面的配置。具体如下。下代码包含如何搭载多个端口配置。

• 
  #user  nobody;
  worker_processes  1;
  
  #error_log  logs/error.log;
  #error_log  logs/error.log  notice;
  #error_log  logs/error.log  info;
  
  #pid        logs/nginx.pid;
  
  
  events {
      worker_connections  1024;
  }
  
  
  http {
      include       mime.types;
      default_type  application/octet-stream;
  
      #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  logs/access.log  main;
  
      sendfile        on;
      #tcp_nopush     on;
  
      #keepalive_timeout  0;
      keepalive_timeout  65;
  
      #gzip  on;
          
          
      server {
          #监听端口，可改，也可以不改，即浏览器访问时的端口号。server_name，访问名称，
          可改，可不改。
          listen       80;
          server_name  localhost;
  
          #charset koi8-r;
  
          #access_log  logs/host.access.log  main;
  
          #必须配置，该location{}代码配置的是在本地的前端页面路径，具体路径要到index页面下。
          location / {
                        #前端index页面路径（本地路径）
                        root   D:/manage_web/mangae/dist/dist;
                        index  index.html index.htm;
                  }
          #必须配置 该location{}为配置后端项目运行路径，即Nginx需要代理的路径；
          /rights-cms-api/是配置文件XML中 servlet:context-path: /rights-cms-api （为自己项目路径的前缀）
          location /rights-cms-api/{
                   proxy_set_header Host $http_host;
                   proxy_set_header X-Real-IP $remote_addr;        
                   proxy_set_header REMOTE-HOST $remote_addr;        
                   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
                           proxy_read_timeout  3600;
                           #需要代理的 本地项目启动地址
                   proxy_pass http://localhost:8096/rights-cms-api/;        
           }                
  
  
          #error_page  404              /404.html;
  
          # redirect server error pages to the static page /50x.html
          #
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
          }
                  
                          
  
          # proxy the PHP scripts to Apache listening on 127.0.0.1:80
          #
          #location ~ \.php$ {
          #    proxy_pass   http://127.0.0.1;
          #}
  
          # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
          #
          #location ~ \.php$ {
          #    root           html;
          #    fastcgi_pass   127.0.0.1:9000;
          #    fastcgi_index  index.php;
          #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
          #    include        fastcgi_params;
          #}
  
          # deny access to .htaccess files, if Apache's document root
          # concurs with nginx's one
          #
          #location ~ /\.ht {
          #    deny  all;
          #}
      }
          #搭载多个配置如下。具体意思如上。
           server {
          listen       900;
          server_name  localhost;
  
          #charset koi8-r;
  
          #access_log  logs/host.access.log  main;
  
          location / {
                        root   D:/manage_web/web/dist/dist;
                        index  index.html index.htm;
                  }
                  
                  location /rights-core-api/{
                   proxy_set_header Host $http_host;
                   proxy_set_header X-Real-IP $remote_addr;        
                   proxy_set_header REMOTE-HOST $remote_addr;        
                   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
                           proxy_read_timeout  3600;
                   proxy_pass http://localhost:9098/rights-core-api/;        
           }                
  
  
          #error_page  404              /404.html;
  
          # redirect server error pages to the static page /50x.html
          #
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
          }
                  
                          
  
          # proxy the PHP scripts to Apache listening on 127.0.0.1:80
          #
          #location ~ \.php$ {
          #    proxy_pass   http://127.0.0.1;
          #}
  
          # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
          #
          #location ~ \.php$ {
          #    root           html;
          #    fastcgi_pass   127.0.0.1:9000;
          #    fastcgi_index  index.php;
          #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
          #    include        fastcgi_params;
          #}
  
          # deny access to .htaccess files, if Apache's document root
          # concurs with nginx's one
          #
          #location ~ /\.ht {
          #    deny  all;
          #}
      }
  
  
      # another virtual host using mix of IP-, name-, and port-based configuration
      #
      #server {
      #    listen       8000;
      #    listen       somename:8080;
      #    server_name  somename  alias  another.alias;
  
      #    location / {
      #        root   html;
      #        index  index.html index.htm;
      #    }
      #}
  
  
      # HTTPS server
      #
      #server {
      #    listen       443 ssl;
      #    server_name  localhost;
  
      #    ssl_certificate      cert.pem;
      #    ssl_certificate_key  cert.key;
  
      #    ssl_session_cache    shared:SSL:1m;
      #    ssl_session_timeout  5m;
  
      #    ssl_ciphers  HIGH:!aNULL:!MD5;
      #    ssl_prefer_server_ciphers  on;
  
      #    location / {
      #        root   html;
      #        index  index.html index.htm;
      #    }
      #}
  
  }

• 3、在idea上配置Nginx。如图。
•  

按下图在nginx文件中找到如下文件，放在相应位置。

配置完成后，可以在idea上启动Nginx。

• 4、最后idea启动nginx的config文件里面的配置的项目服务。在谷歌浏览器上访问nginx的config文件中的地址。http://localhost:80 即可以实现前后端交互。

 

谢谢！