How to set correct headers for s3 nginx proxy for angular app?

Question

I'm working on an nginx s3 reverse proxy container image to proxy frontend files (Angular apps) from s3 behind an Application Load Balancer. The frontend files are located in the specific folder of the given app name in the s3 bucket. These are angular apps which are built using standard angular commands. The dist contents (html, js, css) are uploaded to s3. I'm having issue with the header content. Here is my nginx conf file:

server {
    listen 80;
    listen  443 ssl;
    ssl_certificate     /etc/ssl/nginx-server.crt;
    ssl_certificate_key   /etc/ssl/nginx-server.key;

    server_name timemachine.com;
    sendfile on;
    default_type application/octet-stream;
    resolver        8.8.8.8;
    server_tokens   off;

    location ~ ^/app1/(.*) {
        proxy_http_version     1.1;
        proxy_buffering        off;
        proxy_ignore_headers   "Set-Cookie";
        proxy_hide_header      x-amz-id-2;
        proxy_hide_header      x-amz-request-id;
        proxy_hide_header      x-amz-meta-s3cmd-attrs;
        proxy_hide_header      Set-Cookie;
        proxy_set_header       Authorization "";
        proxy_intercept_errors on;
        rewrite ^/app1/?.*$  /app1/;  
        proxy_pass https:/<s3bucket>;
        break;
    }
}

When I deploy the container it's either (1) downloading the files, rather than serving them (I think this is due to application/octet-stream default above, or (2) if I update the rewrite to be the following...

rewrite ^/app1/?$ /app1/index.html;

then this doesn't serve the js files and after checking the chrome dev tools console, I see that the headers are wrong and the js files are coming back as text/html

text/html

This is the specific error: Expected a JavaScript module script but the server responded with a MIME type of text/html

I've tried changing the default_type to application/javascript in both the http, server, and location block and add_header Content-Type text/javascript; from w/in location block specifically but this didn't work. I've also tried, clearing cache in the browser, each time I do an nginx reload after making changes, etc. I've tried adding the js module to http. It doesnt work. The only thing that works is if I change the rewrite to rewrite ^/app1/?$ /app1/index.html; but this isn’t getting all the angular modules I’m needing and throws an error when I reload the browser. Again, other than that, it just tries to download files which is insane.

I have the following questions: (1) Since im not using an nginx base image, do I need to specifically integrate a mime types file and then reference that file in the nginx.conf to pick up all the correct mime types touse or simply setting this in the server block all that I need to use all the other types? Yes, I've tried this but it doesnt resolve the issues which is why I am asking.

include /etc/nginx/mime.types

(2) Say I get all the mime types needed. What do I add to each block for what I need, that is, to the http, server, and location blocks to cover the gamut of what serving an Angular app would require?

How to set correct headers for s3 nginx proxy for angular app?

0 Answers0