How to configure static website using Nginx with MinIO ?

nginx-minio-static.md

How to configure static website using Nginx with MinIO ?

1. Install nginx

2. Install minio

3. Install mc client

4. Create a bucket:

$ mc mb myminio/static
Bucket created successfully ‘myminio/static’.

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

$ mc anonymous download myminio/static
Access permission for ‘myminio/static’ 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/static
...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/static
[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;
 server_name localhost;
 location / {
   rewrite ^/$ /static/index.html break;
   proxy_set_header Host $http_host;
   proxy_pass http://localhost:9000/static/;
 }
}

$ sudo service nginx reload

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

Just a note on a subtly I encountered while getting this up and running - MIME type of the file in Minio matters.

By default, the minio client does the right thing (i.e. as described in these instructions), but if you're uploading via something like the Python client, it defaults to everything being application/octet-stream. If you have a web page you want to serve up, MIME type for that file will need to be text/html, CSS files will need to be text/css, etc.

If you use a tool like mc tries to set mime type for most common types appropriately..

Step 5 needs to be mc policy set download myminio/static

if end with / should use index.html, this is my multi site conf

location ~ /$ {
  proxy_pass https://myoss/sites/$http_host$request_uri/index.html;
  # 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;

      proxy_pass https://myoss/sites/$http_host$request_uri;
      proxy_redirect     off;
      break;
  }

Leaving this here: https://kaleo.blog/article/static-website-with-minio/ It helped me

Small typo on step 5.

If you are like me and have an index.html under each directory, you can refer to my configuration

server {
    listen                  443 ssl http2;
    listen                  [::]:443 ssl http2;
    server_name             www.site.com;

    # SSL
    ssl_certificate         /etc/ssl/self/wildcard.site.crt;
    ssl_certificate_key     /etc/ssl/self/wildcard.site.pri.csr;
    ssl_trusted_certificate /etc/ssl/self/wildcard.site.chain.ca;

    location / {
        rewrite /$ ${request_uri}index.html last;
        proxy_pass http://127.0.0.1:9000/site/;
	proxy_redirect     off;
    }
    
    include conf.d/security.conf;
}

server {
    listen      80;
    listen      [::]:80;
    server_name www.site.com;

    location / {
        return 301 https://www.site.com$request_uri;
    }
}

It is
mc anonymous set download myminio/static

Hi @harshavardhana,

The error page of minio will be served as default; do you know about how to specific a file to be a custom error page (like 404).

add this:

proxy_intercept_errors on;
error_page      400 401 402 403 404 500 501 502 503 504 /static/yourerrorpage.html;

you may also replace /static/errorpage.html by a @namedlocation and use a specific location to handle those.

There is now also an officially supported Nginx example with S3 backend upstream available at:

• Using NGINX as an Object Storage Gateway - NGINX
• nginx-s3-gateway/docs/getting_started.md at master · nginxinc/nginx-s3-gateway

is it possible to perform caching on nginx for such use cases?

If I want to host a React app in MINio or S3, do I need to manually handle SSL/TLS if I'm redirecting a custom domain to the app location bucket in the object storage using DNS records?
I'm wondering if serving through object storage is a legitimate way to host the app?

also, can you explain from the example where you are using nginx?

PS:I don't have any prior experience with S3/MINio.

Minio does not support to host applications from the bucket, which is needed for clean separation of the security context for storing cookies, here by using different domains for your Minio and your App. Use the Nginx S3 Gateway, which works great in conjunction with Minio.