时间戳

首页 > 解决方案 > Nginx 配置从子文件夹服务反应应用程序

reactjs - Nginx 配置从子文件夹服务反应应用程序

问题描述

我有一个 create-react-app，我构建、创建npm run dist并将生成的 dist 文件复制到/var/www/html/build/

这是我的 nginx 配置：

server{
    listen 9095;
    server_name <hostname>;

    access_log     /var/log/nginx/nginx.pass.access.log;
    error_log      /var/log/nginx/nginx.pass.error.log;

    root /var/www/html/build/;
   
    location / {
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
}

有了这个，我可以访问http://hostname:9095.

我真正需要的是用http://hostname:9095/pass（或/PASS）（而不是/）为同一个站点提供服务

我已经尝试了各种重写配置，但我似乎无法弄清楚.. 帮助表示赞赏

标签： reactjsnginxurl-rewriting

解决方案

重写表达式的格式是rewrite <regex> <replacement> [flag];. 重定向到您的页面的最简单/pass方法/PASS如下/var/www/html/build/index.html。

location ~* ^/pass$ {
    rewrite ^/(.*)$ /index.html break;
    root /var/www/html/build;
    index index.html;
}

该指令是针对URIlocation ~* ^/pass的不区分大小写的正则表达式匹配。/pass该^符号确保正则表达式仅匹配/passuri，而不是类似的内容/some/dir/pass，而该符号确保不匹配类似$的 url 。/password

但是请注意，此正则表达式将匹配/pAsS、/PAss和/pasS。换句话说，它确实不区分大小写。如果您只想匹配/passor /PASS，您应该相应地修改正则表达式。

更好的是，您可以通过使用精确的 URI 匹配来完全规避正则表达式 URI 匹配。

location = /pass {
    ...
}

使用这样的精确匹配可以加快请求处理，因为不需要解析正则表达式。

要匹配/PASS，您可以简单地定义另一个精确位置匹配块。

location = /PASS {
    ...
}

然后，这将为您的主服务器内容释放您的主要位置块。

location / {
    root /var/somewhere/else;
    index index.html;
}

编辑：写完这篇文章后，我遇到了这个alias指令，这似乎也很有希望。我自己没有使用过它（我一直对这种事情使用重写），但它也是需要探索的东西。

推荐阅读