Deploy Static Website on AWS

Countyemi

9 min readMar 14, 2024

Let us have some fun on AWS. I will walk you through how to host your static website using AWS resources.

Workflow Overview:

1. Developer commit code changes to the CodeCommit repository.

2. CodePipeline is triggered upon code commit, initiating the CI/CD process.

3. CodePipeline retrieves the latest code from the repository and proceeds to the manual approval stage.

4. SNS sends an email notification to the approver.

5. Upon approval, CodePipeline deploys the changes to the S3 bucket.

6. The website hosted on S3 is updated with the new changes.

These steps will help us achieve our objective

1. Define IAM User:

• Create an IAM user with appropriate permissions for managing project resources.

• Assign necessary permissions for accessing CodeCommit, CodePipeline, SNS.

2. Set up CodeCommit Repository:

• Create a CodeCommit repository for source code.

3. Set up CodePipeline:

• create a Code Pipeline to automate CI/CD.

• Configure the source stage to pull code from the CodeCommit repository.

• Set up a manual approval stage using SNS.

• Configure the deployment stage to deploy to S3.

4. Implement Simple Notification Service (SNS):

• Create an SNS topic for manual approval notifications.

Subscribe appropriate users or groups to the SNS topic for receiving approval requests.

STAGE 1: IAM USER

From the AWS management console, search for IAM and select users

Give the user a name and click next. here, I’m giving it count_admin

Next is to define the permissions of the user. This restricts what a user can do in your account. User permissions are set through policies. For this, select the attach policies directly option and click on create policy.

We need this user to manage our repository, pipeline and hosting bucket. So we will give the user full permissions over these resources.

From the permission policies search for:

AWSCodeCommitFullAccess

AmazonS3FullAccess and

AWSCodePipeline_FullAccess

This allows to user to create, update, configure and delete these resources.

Check the boxes and click next.

You will see the permission summary, then you can click on create user

Next you will see the list of users you have in your account.

Now that we have set permissions for our user, we need to give access to the user by generating access keys for login.

If you click on the user,

You see the user details, now click on security credentials.

Here, we will generate access keys for access from the Command Line Interface (CLI) as well as credential access for code commit for the user.

Click on Create access key to generate CLI access keys

Select the CLI option and click next

Now you can download your access keys.

Follow the same step to create the Https git credentials for code commit. These credentials will be useful later on.

Now that we have our credentials, let us head over to the CLI to test them.

Open up your laptop terminal and run these commands. Ensure you have AWS CLI installed

aws configure

let’s you input your access and secret keys. Get these keys from the file you downloaded earlier.

My default region is us-east-1 and the output is in json. Which you will see very soon.

aws codecommit create-repository --repository-name <your-repo-name>  --repository-description "<brief description of repo>"

creates the repository with the name you’ve chosen in codecommit. The json output in the green box shows it was created successfully.

aws codecommit list-repositories

will give a list of all the repositories in your codecommit.

We are interested in the count_fitness_repo

aws codecommit get-repository --repository-name "fitness_repo"

will give the details of the repository.

To clone the repository, we will use the cloneurlHttp

git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/fitness_repo

Running this command will prompt for the code commit credentials you downloaded earlier

This will successfully clone the repo. And as we can see from the warning: it is an empty repository.

Let’s add our website files:

Ls –d */

will give a list of all the directories I have in your current working directory.

The files I need are in the count_fitness folder. The repository I just cloned is the count_fitness_repo.

Notice we didn’t push the code to our remote repository yet. You can if you wan to actually. But let’s hold a little.

Next, let’s create the S3 bucket where the website will be hosted. Here, we will:

1. Create the bucket

2. Enable the bucket for website hosting and specify the root document

3. Allow public access to the document

To allow public read access, the easy way is to run the command:

aws s3api put-bucket-policy --bucket count-fitness-website --policy ‘{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::count-fitness-website/*"
    }
  ]
}’

right now, if we try to access this bucket, we get a 404 error

Because the index.htm file does not exist yet. We have not even pushed our code to the public repo yet.

Remember from our workflow, we want an approver to be notified via email before we deploy to S3. So let’s create an SNS service for this.

From the management console, search for SNS and give it a name. count-fitness in this case.

Select the standard type and create. Notice the difference in the subscription protocol for FIFO and standard.

Now let’s create a subscribtion for this topic. Here we’ll decide who the approver will be

Click on create subscription

Select the topic arn you have created and the email address you want to receive the notification on.

Click create.

Now our subscription has been created, and it’s pending confirmation.

Let’s head over to the email we’ve provided to confirm it.

Let’s tie it all together by creating our pipeline.

First we will define a role for our codepipeline. codePipeLine will assume this role when trying to access codeCommit as well as to deploy to our S3bucket.

So this role needs access to these resources.

For this, select roles not users.

Click next, select the permissions, and create.

Now that the role has been created, head over to the management console and search for codepipeline.

We are using AWS CodeCommit as our source provider and selecting the correct repository.

We are also deploying from the master branch. Code pipeline will monitor the master branch for changes.

We will be skipping the build stage in this project, since we have nothing to build. I will cover this on a later day.

We want to deploy to S3 bucket and choose the right bucket name

Review and create the pipeline. When you create the pipeline, it will attempt to run.

But because our remote repository is still empty at the moment, it is going to fail.

Before we push our code to the codecommit repo. Let’s add the manual approval step.

Then, edit stage (the deploy stage) and add action group

Give the action a name, and select the SNS topic arn you have created

Now, for the moment we’ve been waiting for. From your local repository, where you have the project files, run

git push origin <main> or <master>

for me, I am using the master branch. As soon as you push the changes. The code pipeline will be triggered. And it will pause at the deploy stage to wait for approval.