Configure a static website using S3 Bucket

Prerequisite

• The project's wallet balance must be greater than 0 (see how to top up a project's wallet).

• A bucket must already be created (see how to create a bucket).

• A bucket policy must be created to grant access permissions (see how to create a bucket policy).

Instructions

1. Upload Files for the Static Website

Upload your files to the S3 bucket. In this example, we will use the root path.

s3cmd put ${OBJECT} s3://${BUCKET_ENDPOINT}/${PATH_TO_FILE} --acl-public

example command:

s3cmd put index.html s3://test-static-website/ --acl-public

Note: The --acl-public flag grants "Everyone" read-only access to the file.

Run the s3cmd ls command to check that the files have been uploaded.

s3cmd ls s3://${BUCKET_ENDPOINT}/${PATH_TO_FILE}

example command:

s3cmd ls s3://test-static-website/

example result:

2024-07-24 05:28 139 s3://test-static-website/index.html

2. Configure Static Website Hosting

Go to the NIPA Cloud Portal > Object Storage > Buckets.

For your bucket, go to Action > Enable Static Website Hosting.

Configure the Index Document (Required) and Error Document (Optional).

• Index Document: The path to your index.html file. In this case, index.html (at the root).

• Error Document: The path to your error.html file. In this case, error.html (at the root).

Once configured, click Confirm. A window will appear. Copy the Website Endpoint URL.

Try accessing the URL you copied from the Website Endpoint.

example result:

Using a Custom Domain with a CNAME Map

After hosting your website on the object storage bucket, you can map your custom domain to the bucket's Target domain using a CNAME record.

When you test the access via your custom domain, you will find that it works and is secured with HTTPS. This is because the NIPA Cloud proxy system automatically generates an SSL certificate for the bucket.

Troubleshooting

Error 404 Not found

• Cause: The Index Document cannot find the index.html file or its dependency files.

• Solution: Check if the file paths you uploaded via Cyberduck or the s3cmd CLI are correct.

Error 403 Access denied

• Cause: The public read permission is missing, preventing files from being accessed.

• Solution: Check the file permissions. Right-click the file > Info > Permissions. "Everyone" must be set to READ. If it is not, re-upload the file using the s3cmd CLI with the --acl-public flag and check again.

CSS/JS File Content-Type is text/plain

• Cause: The MIME type was not detected during the upload via the s3cmd CLI.

• Solution: If you find that the Content-Type does not match the file type (e.g., application/javascript is being served as text/plain), add the following flags to your s3cmd put command: --guess-mime-type --no-mime-magic.