S3 static website with local Sync
2 min read
In this blog, I shall attempt to publish a simple static website to s3.
We are using CLI for this purpose. Make sure you have AWS cli installed in your terminal
copy and paste AWS Access Key Id and Secret Access Key to your terminal
next, using s3api create a bucket
aws s3api create-bucket --bucket santoshmainali --region eu-west-1 --create-bucket-configuration LocationConstraint=eu-west-1
Remember to make the bucket name unique. I've given name santoshmainali in this case. If everything goes fine, you should encounter a json that says location and the urlof your bucket
now create a new folder for this demo and create a new static file called index.html or you can name it anyway you like
mkdir demo && cd demo touch index.html
You can edit your index.html with vim or any text editor
Now let's configure the newly created bucket as a static website and indicate it should load index.html as it's starting file.
aws s3 website s3://santoshmainali/ --index-document index.html
Now we copy our index.html to the bucket recursively with the access control as public read
aws s3 cp . s3://santoshmainali/ --recursive --acl public-read
let's check whether or not the files were uploaded
aws s3 ls santoshmainali
in your amazon console, select your bucket's properties tab and scroll down to the Static Website Hosting section. Find the url and open it in new browser.
Congratulations! You have setup a static website with s3.
Let's implement baby CI :P
cd ~ touch ci.sh vi ci.sh
now paste this inside your ci script
#!/bin/bash aws s3 cp ~/demo/ s3://santoshmainali/ --recursive --acl public-read
Grant permissions to execute
chmod +x ci.sh
now whenever you change your index.html inside demo just execute the ci in your shell. It updates every single file.
Every single file ? Yes! It updates files that are not updated. Sucks right ?
S3 Sync on rescue
change index.html and dry run s3 sync
aws s3 sync demo/ s3://santoshmainali/ --dryrun
It should give your this output
(dryrun) upload: demo/index.html to s3://santoshmainali/index.html
cool ! only those files which had changes were shown in the dry run.
that was just a dry run. Whenever you want to replicate changes live, don't enable that flag. Also don't forget to give it appropriate acl
aws s3 sync demo/ s3://santoshmainali/ --acl public-read
You can add the new sync command to your ci .sh file I Hope it Helps. Feedback expected.