How to configure static website (include vue react spa website) using Nginx with MinIO ?

nginx-minio-static.md

How to configure static website (include vue react spa website) using Nginx with MinIO ?

1. Install nginx

2. Install minio

3. Install mc client

4. Create a bucket:

$ mc mb myminio/${YOUR_DOMAIN}
Bucket created successfully ‘myminio/${YOUR_DOMAIN}’.

5. Make bucket public to host/access static content.

$ mc policy wnload myminio/${YOUR_DOMAIN}
Access permission for ‘myminio/${YOUR_DOMAIN}’ is set to ‘download’

6. Upload a sample static HTML site to minio bucket, in my case i used example: http://www.oswd.org/user/profile/id/12362/

$ mc cp -r terrafirma/ myminio/${YOUR_DOMAIN}
...ma/readme.txt:  39.37 KB / 39.37 KB ┃▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓┃ 100.00% 31.94 KB/s 1s

Note: this is how my bucket content appears to me currently.

$ mc ls myminio/${YOUR_DOMAIN}
[2017-03-22 18:20:52 IST] 4.7KiB default.css
[2017-03-22 18:20:54 IST] 5.4KiB index.html
[2017-03-22 18:20:54 IST]   612B readme.txt
[2017-03-22 18:24:03 IST]     0B images/

7. Configure Nginx as proxy to serve static pages from public bucket name static from Minio.

Remove default configuration and replace it with the below. Please change as per your local setup.

$ cat /etc/nginx/sites-enabled/default 
server {
    
    listen       80;
    listen  [::]:80;
    location ~ /$ {
        set $my_addr "index.html";
        proxy_pass http://172.16.5.168:9000/staticweb/$http_host$request_uri$my_addr;
        # paste below oss option here
    }

    location / {
      proxy_hide_header     x-amz-id-2;
      proxy_hide_header     x-amz-meta-etag;
      proxy_hide_header     x-amz-request-id;
      proxy_hide_header     x-amz-meta-server-side-encryption;
      proxy_hide_header     x-amz-server-side-encryption;
      proxy_hide_header     Set-Cookie;
      proxy_ignore_headers  Set-Cookie;
      # catch 404 error 
      error_page 404 = @404;
      # For spa websites, this option is required
      proxy_intercept_errors on;
      proxy_pass http://172.16.5.168:9000/staticweb/$http_host$request_uri;
      proxy_redirect     off;
      break;
    } 
    location @404 {
        # return index.html 
        proxy_pass http://172.16.5.168:9000/staticweb/$http_host/index.html;
    }
}

$ sudo service nginx reload

8. Open your browser and type http://localhost