ci/cd with github action to deploy static site to aws s3
here we are going to deploy a static website to Amazon S3 automatically using Github action anytime you push your change to your repo.
What is GitHub Actions?
GitHub Actions is a powerful continuous integration and continuous delivery (CI/CD) platform provided by GitHub. It enables you to automate your software development workflows, allowing you to build, test, and deploy code directly from your GitHub repositories.when an activity takes place in your repositories, such as a pull request by software developer or the creation of an issue, you can set up a GitHub Actions workflow to be triggered. One or more jobs in your workflow are capable of running simultaneously or sequentially. Each job contains one or more steps that execute a script that you write or an action, a reusable extension that can streamline your workflow. Each job runs inside its own virtual machine runner or inside a container.
Amazon Simple Storage Service (S3)?
Amazon Simple Storage Service (S3) is one of the numerous services offered by Amazon Web Services(AWS), an on-demand cloud computing platform. Amazon S3 provides scalable object storage through a web service interface that is used to store and retrieve any amount of data, at any time, from anywhere on the web.
Create S3 Bucket
To host our static website, we will need to create a S3 bucket. There are many ways to do this. Via AWS console,AWS CLI, AWS SDKs or REST APIs. But for the purpose of this tutorial,we will use AWS console.
- Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/
- Then type S3 in the search bar and chose the first result, standard S3.
3. Create a bucket
After opening S3 view, click on “Create Bucket” and configure your bucket as follow:
- Bucket name: Give a unique name to your bucket
- Region: Select the AWS region in which you want to create your bucket
4. Unblock public access
By default, AWS blocs all unauthorized access. But we have to allow public access in order for the hosted static website to be publicly available.
To do so, just uncheck the “Block All Public Access” checkbox.
After unchecking, scroll down and click on “Create Bucket”. Wait for few seconds and after successful operation, you should see your created bucket
Enable Static Website Hosting
Now that we have our bucket created, we have to enable AWS S3 static website hosting on the bucket.
- Navigate to the permissions tab
- Scroll way down (bottom-most section of the page)
- Then you should see “Static Website Hosting” section
- Click on “Edit” and Enable static webste hosting
- In Index document, enter the file name of the index document, typically index.html.
- The index document name is case sensitive and must exactly match the file name of the HTML index document that you plan to upload to your S3 bucket. When you configure a bucket for website hosting, you must specify an index document. Amazon S3 returns this index document when requests are made to the root domain or any of the subfolders.
- To provide your own custom error document for 4XX class errors, in Error document, enter the custom error document file name. The error document name is case sensitive and must exactly match the file name of the HTML error document that you plan to upload to your S3 bucket.
Update Bucket Policy
- Locate your bucket and open it
- Navigate to “Permissions” tab and scroll down to “Bucket Policy”
- Click on edit and paste this json data
Don’t forget to change <Bucket-Name> with your real bucket name at the level of “Resource” key, `arn:aws:s3:::<Bucket-Name>/*`. For exmaple if bucket name is “boon123”, It should be “arn:aws:s3:::boon123/*”
Generate Access Keys
Now that we have our S3 bucket pretty fine and well configured, we need to generate access keys to be able to perform CI/CD from Github Actions.
Note that to generate access keys, you need IAM account with administrative roles.
- On your AWS Console dashboard, click your username
- Then click on the option Security Credentials.
- On the Your Security Credentials page, expand the Access keys (access key ID and secret access key) tab.
- Click on the Create New Access Key button.
- An access key with its secret should be generated for you
Note that we will need this access key to configure our CI/CD with Github Actions later.
Create Simple Website
You can go to this repository and fork complete repo to have all files.
Here is the content of the index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hosting on AWS S3</title>
</head>
<body>
<center>
<h1>UP AND RUNNING ON AWS S3</h1>
</center>
<p id="date"></p>
<footer>
<center>
<a href='https://github.com/baimamboukar/'>
by @NIPUL PATEL
</a>
</center>
</footer>
</body>
<style>
body {
text-align: center;
background-color: #f2f2f2;
}
h1 {
color: #333333;
}
p {
font-size: 20px;
color: #dd0808;
font-weight: 600;
}
a{
text-decoration: none;
color: 'green';
}
footer{
background-color: 'black';
height: 75px;
width: 100%;
position: fixed;
bottom: 0px;
}
</style>
<script>
function getCurrentDateTime() {
var currentDateTime = new Date();
var formattedDateTime =
"Your local datetime is: " +
currentDateTime.toDateString() +
", " +
currentDateTime.toLocaleTimeString();
return formattedDateTime;
}
document.getElementById("date").innerHTML = getCurrentDateTime();
setInterval(function () {
document.getElementById("date").innerHTML = getCurrentDateTime();
}, 1000);
</script>
</html>Configuring CI/CD with Github Actions
Our Github Action workflow will be responsible of deploying the content of our repository (basically our website) to AWS S3 whenever the repository receives a commit-push. This will ensure that our live website is always up-to-date.
- On your repository that contains the website, navigate to “Actions” tab
- On the left sidebar, click on “New Workflow”
- And click on “Set up a workflow yourself”
- Give a name to your workflow file. The default name is “main.yml”. i make it boon.yml
- The paste this content inside the workflow
name: deploy static website to AWS-S3
on:
push:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Set up AWS CLI
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-east-1
- name: Deploy to AWS S3
run: |
aws s3 sync . s3://<your-bucket-name> --delete
Again, make sure you replace <your-bucket-name> with the bucket name you created earlier. Also, the “aws-region” value should be the region in which you created your bucket
Configuring Github Environment Secrets
Remember the Access key we created earlier? Its time is NOW!
- In your github repository that contains the website, go to Settings tab
- Scroll down to “Secrets and Variables” in the left sidebar and click on it
- Choose “Action” option
- Click on “New repository secret”
- Then give the name “AWS_ACCESS_KEY_ID” to your variable
- Repeat the first three steps of “Generate Access Keys” section to view the access key you created
- Copy its content and paste it, as value for AWS_ACCESS_KEY_ID
- Click on “Add secret” to save the secret variable
- Do the same to create the “AWS_SECRET_ACCESS_KEY”. Make sure you copied the real value of the key’s secret, not key ID
Trigger CI/CD and View the Deployment URL
At this point, we are all set to trigger the CI/CD in order for our workflow to run and deploy to AWS S3.
To do so, we need to push a commit to our repository. So let’s update something in our index.html to
<h1>UP AND RUNNING ON AWS S3 WITH GITHUB ACTION</h1>
Then we commit and push to the repository.
This push will trigger our CI/CD workflow and deploy the last commits to AWS S3.
To view the deployment copy URL and paster in browser
Congratulations, You have just deployed a static website to AWS S3 using CI/CD with Github actions
Thanks for reading, and I hope this content was helpful to you.