CODEWITHSUNDEEP
reactjsnginxamazon-s3single-page-application
hotsauce131313
hotsauce131313

Reputation: 11

nginx config for react Single Page Apps (SPA) hosted on s3 not working

I am trying to get nginx with single page apps hosted on s3 folders to work. For master pushes we use the regular cloudfront, s3 and route 53. But for branch deployments we do not want cloudfront for each developer. So what we do is push the assets to s3 bucket my.example.com/branch-name/ and we create a route 53 A record - branch-name.my.example.com which points to the nginx server. Here is my nginx config :

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;
    }

}

The behaviour I am looking for is if I go to http://branch-name.my.example.com it should load the http://$bucket/${branch}/index.html. If I go to http://branch-name.my.example.com/garbage-nonexistent-path/more-garbage/... it should preserve the url in the browser but still load http://$bucket/${branch}/index.html If I go to http://branch-name.my.example.com/correct-path/ it should be routed to the correct tab in my app as react router has a component for /correct-path. If I go to http://branch-name.my.example.com/correct-path/sdcsd/sdcsd/ it should still route to the correct page but preserve the url.

Right now the behaviour I get is I can only go to the root url i.e http://branch-name.my.example.com and I get routed to the proper index.html and then I click on tab "correct-path" on that page and the url will change accordingly http://branch-name.my.example.com/correct-path/ and its fine. But if I try to go to http://branch-name.my.example.com/correct-path/ directly I just get the following error from 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

If I go to http://branch-name.my.example.com/correct-path (note there is no ending slash), it just keeps loading indefinitely.

Please help. Thanks.

Upvotes: 1

Views: 1922

Answers (1)

David Alsh
David Alsh

Reputation: 7677

Try this config

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;
    }
}

Upvotes: 1

Related Questions