笔记：Ant Design Pro发布后部署到windwos下的nginx服务端操作

#问题列表：

1. Ant Design Pro官方demo通过git下载下来之后执行命令 > npm run start 运行起来,但是通过 > npm run start:no-mock 运行后会一直报错如： /api/currentUser  发出的请求针对的是不存在的记录，服务器没有进行操作。这样的错误原因是，因为官方默认采用的是mock数据，但是执行> npm run start:no-mock 后不会再执行mock数据了，> npm run build 发布之后部署到服务器的效果是一样的。
2. 发布后我本机没有针对mock类型数据的API接口怎么办、部署后每次都因为请求不到mock对应的API路由接口导致跳转404页面。

 

 

 # 处理方式

1. 前端项目在开发环境中采用了mock数据，mock数据为本地代理(proxy)的api数据，项目发布后是不会发布开发环境所代理的api相关内容的，所以在config.js中不要使用proxy属性设置。Proxy代理配置在正式环境中会导致跨域问题无法解决。我们会将proxy的设置配置在nginx服务器配置当中.
2. 在src/app.js中要注释/api/auth_routes/ 这一段的方法。因为官方demo也是没有走这块逻辑了的。然后执行 npm run build 命令发布生成dict目录。
3. 在服务器安装nginx到d:/nginx，一般win版本都是免安装了，直接解压到目录就可以。
4. 通过执行cmd命令 1.  d:     2. cd d:/nginx       一定要这样，不然切换不到安装目录。
5. 不要关闭cmd窗口，打开D:\nginx\conf\nginx.conf

6. 依据官网部署说明，修改server节点，具体节点配置如下：

   server {
   
         listen       9000;
   
           server_name  localhost;
   
           gzip on;
   
           gzip_min_length 1k;
   
           gzip_comp_level 9;
   
           gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
   
           gzip_vary on;
   
           gzip_disable "MSIE [1-6]\.";
   
           #charset koi8-r;
   
           location / {
   
               root   html;
   
               index  index.html index.htm;
   
               try_files $uri $uri/ /index.html;
   
           }
   
           location /api {
   
               proxy_pass http://proapi.azurewebsites.net;
   
               proxy_set_header   X-Forwarded-Proto $scheme;
   
               proxy_set_header   X-Real-IP         $remote_addr;
   
           }
   
           error_page   500 502 503 504  /50x.html;
   
           location = /50x.html {
   
               root   html;
   
           }
   
   }

    

7. listen为端口号，可以任意修改，但是不能与当前服务器正在使用的端口冲突，否则会出现启动nginx失败，窗口一闪而过的现象。
8. 配置成功启动nginx,在打开的cmd窗口中  执行start nginx
9. Nginx最好添加到开机启动中，如果在启动后修改了nginx配置文件，执行nginx –s reload重新加载配置项。

因对前端方面的技术了解甚少，所以研究这个问题稍微绕了点弯路。

本文只是做一次自己按照官方文档理解后部署的笔记，读者有遇到不懂或者觉得可以更加优化的方案可以互相沟通学习。