Ant Design Pro部署在nginx上带二级目录

一般我们npm build后的所有静态文件在dist里，部署在nginx的端口根目录是什么也不需要做修改的，但是偏偏有时候因为资源问题，需要在同一个端口下用二级目录来区分工程。

我们现在流行的js project编译后都是在一个dist名称的目录下，入口文件一般是index.html，Ant design pro也没有例外。
分两种情况看现状。

1、 部署在nginx端口的跟目录

yarn build命令后将dist文件夹下的目录copy到nginx能访问到的指定目录，比如本文的/opt/site/test/antd-pro
如下：

root@instance-ffkcm2y2:/opt/site/test/antd-pro# pwd
/opt/site/test/antd-pro
root@instance-ffkcm2y2:/opt/site/test/antd-pro# ls
28.614fa0c1.async.js                     p__404.2636ef73.async.js                                   p__profile__advanced__model.ts.53b2cc97.async.js
29.e6e2e94a.async.js                     p__account__center__model.ts.e7d2b570.async.js             p__profile__basic__model.ts.666ea347.async.js
30.ed953c68.async.js                     p__account__settings__model.ts.18871ae5.async.js           p__user__login.42c71fa9.async.js
31.26eb59f0.async.js                     p__dashboard__analysis__model.tsx.d7334d5e.async.js        p__user__login.69c29ea4.chunk.css
32.858d1d30.async.js                     p__dashboard__monitor__model.ts.2295eb87.async.js          p__user__login__model.ts.d7f50bee.async.js
asset-manifest.json                      p__dashboard__workplace__model.ts.25c12073.async.js        p__user__register.440437ac.chunk.css
favicon.png                              p__form__advanced-form__model.ts.83317f1b.async.js         p__user__register.a695f9b3.async.js
icons                                    p__form__basic-form__model.ts.4ec9fad5.async.js            p__user__register__model.ts.474a7318.async.js
index.html                               p__form__step-form__model.ts.2182323a.async.js             p__user__register-result.3718897d.async.js
layouts__BasicLayout.6bb2089d.chunk.css  p__list__basic-list__model.ts.ee583322.async.js            p__user__register-result.b1bdabda.chunk.css
layouts__BasicLayout.d3a07379.async.js   p__list__card-list__model.ts.a5f25999.async.js             umi.0385b6b1.css
layouts__BlankLayout.17fcb893.async.js   p__list__search__applications__model.ts.05817605.async.js  umi.1ffff763.js
layouts__BlankLayout.6a502b55.chunk.css  p__list__search__articles__model.ts.9b3e67e3.async.js      vendors.1acb639b.chunk.css
layouts__UserLayout.265c2404.async.js    p__list__search__projects__model.ts.b50103cf.async.js      vendors.bda2d737.async.js
layouts__UserLayout.50d9ab78.chunk.css   p__list__table-list__model.ts.7288e948.async.js            viz.40029ece.async.js
root@instance-ffkcm2y2:/opt/site/test/antd-pro#

nginx的配置文件:

root@instance-ffkcm2y2:/usr/local/nginx/conf/vhost# cat antd.test.5055.conf
server
    {
        listen       5055;
    server_name  182.61.51.177;
        index index.html;
        root /opt/site/test/antd-pro/;
    location / {
        try_files $uri $uri/ /doc.html;
        }
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }
    access_log  /opt/nginxlog/antd-pro-access.log;

    }
root@instance-ffkcm2y2:/usr/local/nginx/conf/vhost#

访问看看

image.png

所有js和css直接在端口以下首层。

2、部署时携带二级目录

现在都推荐使用yarn create umi创建工程，创建的antd pro V4的demo项目。

• 1、修改工程根目录下的config/config.js文件

  
  
  diff
  
  

  两处修改，

export default下增加base和publicPath两个参数，分别配置一样的参数/children-path
mainfest 下修改basePath从原来的'/'改为'/children-path/'，注意结尾有斜线。

修改玩后重新npm install，然后本地启动，本地启动没问题，再进行下一步。

local

• 2、打包dist
• 3、将dist上传到目标服务器
• 4、配置nginx

server
    {
        listen       5055;
    server_name  182.61.51.177;
        index index.html;
        root /opt/site/test/antd-pro/;
    location / {
        try_files $uri $uri/ /doc.html;
        }
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }

    location /children-path {
            alias /opt/site/test/antd-pro2;
        }

    access_log  /opt/nginxlog/antd-pro-access.log;

    }

访问看看效果

累赘到最后发现，自己是个大傻逼，不看文档的后果很严重。

多看文档！
多看文档！！
多看文档！！！
重要的事情说三遍！！！！！！！！

文档在哪里？不是瞎子应该就能找到：https://pro.ant.design/docs/deploy-cn
采坑者：https://blog.csdn.net/weixin_40766882/article/details/88845184