Serve a single Angular application from S3 with nginx

I have an Angular application that consists of a single index.html file. The only other files are main.css and some images. I have already rediscovered that there is no way to use S3 web hosting to service it, so I am trying to configure nginx as a proxy. I did this before, but it was many years ago, and this was not with the Angular app and the HTML5 push state. Here is the current nginx configuration server block that I have.

server {
    server_name foo.com;

    set $s3_bucket        'foo.com.s3.amazonaws.com';

    proxy_http_version     1.1;
    proxy_set_header       Host $s3_bucket;
    proxy_set_header       Authorization '';
    proxy_hide_header      x-amz-id-2;
    proxy_hide_header      x-amz-request-id;
    proxy_hide_header      Set-Cookie;
    proxy_ignore_headers   "Set-Cookie";
    proxy_buffering        off;
    proxy_intercept_errors on;

    resolver               172.16.0.23 valid=300s;
    resolver_timeout       10s;

    location ~* ^/(assets|styles)/(.*) {
        set $url_full         '$1/$2';
        proxy_pass             http://$s3_bucket/live/$url_full;
    }

    location / {
        rewrite ^ /live/index.html break;
        proxy_pass http://$s3_bucket;
    }
}

I do not assume anything with this config. Everything can be completely wrong.

He works". I can go to foo.com, and the site serves, and I can navigate, and all this works wonders. But it will not load a url that is not /. All others are redirected to / and this is the problem.

? .

+4

Source: https://habr.com/ru/post/1548150/


All Articles