Ant-design-pro: nginx非根目录部署无法正常访问

[zxingkong]

匹配不到nginx配置的目录，会匹配到根目录的web项目中去。
看了所以相关的issue，仍然没解决。前端新手，跪求指教。。。
相关配置：
config.js

nginx配置

项目实际部署路径

[chenshuai2144]

https://umijs.org/zh/config/#base
试试这个。应该搞个文档了

[zxingkong]

https://umijs.org/zh/config/#base
试试这个。应该搞个文档了

您好，这个base 跟publicPath已经配置了。能帮我看下，是哪个地址配置错了吗，我现在访问http://visitortest.skyingidea.com/serverfortemp/visitor_web会跳转到根目录的antd mobile项目去

[Tzng]

我用express可以部署非根目录。这么配置的

  manifest: {
    basePath: '/demo',
  },
 // 静态资源地址的配置可以让一个端口下，放好几个项目
  publicPath: '/test/demo/',
  chainWebpack: webpackPlugin,

然后express这么写的

app.use('/', express.static(__dirname + '/'));

server.js的同级目录有一个demo文件夹，然后这个文件夹里面放打包好的代码

然后我的nginx直接配置转发到server.js启动的端口

        location /demo/ {
            proxy_pass http://127.0.0.1:3001/;
        }

[sunguoxing0628]

@zxingkong 我这里直接是用的80端口，没有系统名称，访问地址为http://{ip}/{router}结构。我使用的是nginx，如果是使用ant-design-pro这个项目直接生成的话，不需要配置base和publicPath。

        #添加拦截路径和根目录
        location / {
            root   html/reporting;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

其中html/reporting是指nginx的根目录的，在html目录创建了reporting目录，reporting里就是拷贝的dist文件夹内容。

我觉得你可以尝试两个操作：

1. 去掉base和publicPath；
2. 同时注意一下location后面的路径，要用/结尾。

        #添加拦截路径和根目录
        location /reporting/ {
            root   html/reporting;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

[zxingkong]

@zxingkong 我这里直接是用的80端口，没有系统名称，访问地址为http://{ip}/{router}结构。我使用的是nginx，如果是使用ant-design-pro这个项目直接生成的话，不需要配置base和publicPath。

        #添加拦截路径和根目录
        location / {
            root   html/reporting;
            index  index.html index.htm;
          try_files $uri $uri/ /index.html;
        }

其中html/reporting是指nginx的根目录的，在html目录创建了reporting目录，reporting里就是拷贝的dist文件夹内容。

我觉得你可以尝试两个操作：

1. 去掉base和publicPath；
2. 同时注意一下location后面的路径，要用/结尾。

        #添加拦截路径和根目录
        location /reporting/ {
            root   html/reporting;
            index  index.html index.htm;
          try_files $uri $uri/ /index.html;
        }

额，按照您说的，我修改了下配置，发现这样访问是会404

[sunguoxing0628]

@zxingkong 我这里直接是用的80端口，没有系统名称，访问地址为http://{ip}/{router}结构。我使用的是nginx，如果是使用ant-design-pro这个项目直接生成的话，不需要配置base和publicPath。

        #添加拦截路径和根目录
        location / {
            root   html/reporting;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

其中html/reporting是指nginx的根目录的，在html目录创建了reporting目录，reporting里就是拷贝的dist文件夹内容。
我觉得你可以尝试两个操作：

1. 去掉base和publicPath；
2. 同时注意一下location后面的路径，要用/结尾。

        #添加拦截路径和根目录
        location /reporting/ {
            root   html/reporting;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

额，按照您说的，我修改了下配置，发现这样访问是会404

你是否注意到root后不是/开头

[zxingkong]

@zxingkong 我这里直接是用的80端口，没有系统名称，访问地址为http://{ip}/{router}结构。我使用的是nginx，如果是使用ant-design-pro这个项目直接生成的话，不需要配置base和publicPath。

        #添加拦截路径和根目录
        location / {
            root   html/reporting;
            index  index.html index.htm;
          try_files $uri $uri/ /index.html;
        }

其中html/reporting是指nginx的根目录的，在html目录创建了reporting目录，reporting里就是拷贝的dist文件夹内容。
我觉得你可以尝试两个操作：

1. 去掉base和publicPath；
2. 同时注意一下location后面的路径，要用/结尾。

        #添加拦截路径和根目录
        location /reporting/ {
            root   html/reporting;
            index  index.html index.htm;
          try_files $uri $uri/ /index.html;
        }

额，按照您说的，我修改了下配置，发现这样访问是会404

你是否注意到root后不是/开头

这样配置：
location /visitor_web/ { root visitor_web; index index.htm index.html; try_files $uri $uri/ /index.html; }

[WangLeGeWang]

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

[pandaApe]

也遇到了同样的问题。。 没解决。我暂时用了一个子域名去做的。
希望 pro 官方能帮忙看看。 @chenshuai2144

[chenshuai2144]

umi 是支持 base 和 publishPath 的。

nginx 的配置需要大家自己去探索了，官方只能提供一个比较简单的例子。
不同的业务部署场景千差万别。

[unrealsmart]

不成熟的解决方案 #4347

[coldice945]

umi 是支持 base 和 publishPath 的。

nginx 的配置需要大家自己去探索了，官方只能提供一个比较简单的例子。
不同的业务部署场景千差万别。

@chenshuai2144 umi 指向静态资源文件所在路径的 key 是 publicPath，应该是笔误写错了吧。还是改一下吧。可能会对看到回复的新手有影响。

[huang714669]

亲测可用，对于非根目录的部署，这里比如说/admin
前端config配置
publicPath: '/admin/',
base: '/admin/',
npm run build之后，把/dist目录重命名为/admin复制到nginx root目录
nginx配置如下
location ^~ /admin { alias /home/zihao/git-repos/vehicle-health-system/front/admin; # 用于配合 browserHistory使用 index index.html; try_files $uri $uri/ /admin/index.html; }

注意： /dist目录一点要重命名为/admin

[truewq]

亲测可用，对于非根目录的部署，这里比如说/admin
前端config配置
publicPath: '/admin/',
base: '/admin/',
npm run build之后，把/dist目录重命名为/admin复制到nginx root目录
nginx配置如下
location ^~ /admin { alias /home/zihao/git-repos/vehicle-health-system/front/admin; # 用于配合 browserHistory使用 index index.html; try_files $uri $uri/ /admin/index.html; }

注意： /dist目录一点要重命名为/admin
可用可用，很有帮助，必须顶一下!