一、部署前端项目

前端项目在编写完成之后需要打包前端项目到服务器端，在服务器端需要通过nginx服务器将前端项目发布出去。下面主要就是就是针对nginx的配置文件以及前端打包文件做一个说明。

• 1、前端文件说明（当前项目为react项目）
  
• 2、修改nginx配置

#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 {
        listen       80;
        server_name  localhost; 
        
        

       location  / {
            # 网站首页的静态文件路径
              root   html/build;
              index  index.html index.htm;
          # 确保刷新不出现404 
              try_files $uri $uri/ /index.html;  #try_files会去/找文件，找到返回，如果没有找到去找目录，

	        }

    #后端服务 
    location  /wh-console {
        rewrite  ^.+wh-console/?(.*)$ /$1 break;
        # proxy_method POST;
        #  proxy_method POST;
        #  proxy_http_version 1.1;
         proxy_pass                 http://192.168.10.11:9090;
         proxy_set_header           Host              $host;
         proxy_set_header           X-Real-IP         $remote_addr;
         proxy_set_header           X-Forwarded-For   $proxy_add_x_forwarded_for;
         proxy_set_header           X-Forwarded-Proto $scheme;
        # add_header Access-Control-Allow-Origin *;
        }
   }
    } 
  

• ① rewrite ^.+wh-console/?(.*)$ /$1 break;
  因为前端项目在开发环境中配置的反向代理不会生产环境中生效，所以前端项目需要做一个处理，当访问后端所有的请求时，都会添加一个/wh-console，nginx匹配当这个路径是需要对这个path 进行一个处理，这行代码的设置就是实现这块的功能。
  它的语义就是当匹配/wh-console的请求时，将wh-console的请求替换为/
• ②proxy_pass：反向代理到后端服务器上面。
  注意点：我们也可以后端规范接口，就不需要使用 rewrite ^.+wh-console/?(.*)$ /$1 break;如果访问到后端接口之间让其反向代理到后端服务器

二、部署后端项目