用于在 s3 上托管的反应单页应用程序 (SPA) 的 nginx 配置不起作用答案

【问题标题】：nginx config for react Single Page Apps (SPA) hosted on s3 not working用于在 s3 上托管的反应单页应用程序 (SPA) 的 nginx 配置不起作用
【发布时间】：2019-01-15 03:26:27
【问题描述】：

我正在尝试让 nginx 与托管在 s3 文件夹上的单页应用程序一起工作。对于主推送，我们使用常规的云端、s3 和路由 53。但对于分支部署，我们不希望每个开发人员都使用云端。所以我们所做的就是将资产推送到 s3 存储桶 my.example.com/branch-name/ 并创建一个路由 53 A 记录 - branch-name.my.example.com 指向 nginx 服务器。这是我的 nginx 配置：

server {
    listen       8443;
    server_name  *.my.example.com;
    index   index.html;

    location / {
        resolver 8.8.8.8;

        set $bucket "my.example.com.s3-website-us-west-1.amazonaws.com";
        rewrite ^([^.]*[^/])$ $1/ permanent;

        # matches: branch-name
        if ($host ~ ^([^.]*)\.my\.example\.com) {
            set $branch $1;
            proxy_pass http://$bucket/${branch}$uri;
        }
        try_files '' /index.html =404;
        proxy_intercept_errors on;
        proxy_redirect off;
        proxy_set_header Host $bucket;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_hide_header x-amz-id-2;
        proxy_hide_header x-amz-request-id;
    }

}

我正在寻找的行为是，如果我转到http://branch-name.my.example.com，它应该加载 http://$bucket/${branch}/index.html。如果我去http://branch-name.my.example.com/garbage-nonexistent-path/more-garbage/... 它应该在浏览器中保留 url 但仍然加载 http://$bucket/${branch}/index.html 如果我去http://branch-name.my.example.com/correct-path/ 它应该被路由到我的应用程序中的正确选项卡，因为反应路由器有一个用于/正确路径的组件。如果我转到http://branch-name.my.example.com/correct-path/sdcsd/sdcsd/，它仍应路由到正确的页面，但保留网址。

现在我得到的行为是我只能转到根 url 即 http://branch-name.my.example.com 并且我被路由到正确的 index.html 然后我单击该页面上的选项卡“正确路径”并且 url 将相应地更改http://branch-name.my.example.com/correct-path/ 和它的罚款。但是，如果我尝试直接转到http://branch-name.my.example.com/correct-path/，我只会从 s3 收到以下错误：

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: branch-name/correct-path/index.html
RequestId: 92ADA29566570E8C9
HostId: wT4JdQrkB7KI0+Gnb4+88WNdnX0NXCHB6/KP5RxqJMozAx8z3RlC4T6uefk2LA=
An Error Occurred While Attempting to Retrieve a Custom Error Document
Code: NoSuchKey
Message: The specified key does not exist.
Key: index.html

如果我转到http://branch-name.my.example.com/correct-path（注意没有结束斜线），它只会无限期地继续加载。

请帮忙。谢谢。

【问题讨论】：

标签： reactjs nginx amazon-s3 single-page-application

【解决方案1】：

试试这个配置

server {
    listen       80;

    location = / {
        proxy_pass http://bucketname-ap-southeast-2.amazonaws.com;
        proxy_intercept_errors on;
        error_page 404 =200 @spa-root;
    }

    location / {
        proxy_pass http://bucketname-ap-southeast-2.amazonaws.com;
        proxy_intercept_errors on;
        error_page 404 =200 @spa-root;
    }

    location @spa-root {
        proxy_pass http://bucketname-ap-southeast-2.amazonaws.com;
    }
}

【讨论】：