Deployment of Static Website in AWS using CodePipeline,S3,CloudFront and GitHub
Objective:
To deploy our website via AWS CodePipeline. The diagram below shows the workflow that we need to achieve to get the job accomplished.
Architecture:
Prerequisite:
Step1: Upload/Push your HTML and CSS files to the GitHub Repo
The first step is to push your website HTML and other files to your repo. For this project, I have created HTML and CSS files to be deployed.
Step2: S3 Bucket Creation
An S3 bucket is a storage container in Amazon Simple Storage Service (S3). S3 is a web service that provides object storage, which means that data is stored in distinct units called objects instead of files.
Each bucket has a unique name and can be located in a specific region. S3 buckets are similar to file folders and can be used to store, retrieve, back up, and access objects. Each object has three main components:
- Object content or data: This is the actual data that is stored in the bucket.
- Object key: This is a unique identifier for the object.
- Object metadata: This is additional information about the object, such as its name, size, and creation date.
Goto Services -> S3 -> Create Bucket
Bucket Name: Keep the bucket name unique and for now it should be your domain name. For example**,** learnwithshree.infinityfreeapp.com my domain name is ( you can exclude or include www but later it should be the same in Route 53 ) so my bucket name will be learnwithshree.infinityfreeapp.com
AWS Region: This is the region where you will like to store the buckets.
Block all public access: Most people prefer keeping it open while serving static websites but we will be using CloudFront and SSL/TLS certificate to serve the website content. so we will block public access in our case.
Keep the other configuration default for now.
Now your bucket will be created. Go inside the bucket and upload the file. Prefer keeping the main html file as index.html as an S3 searches file named with index to serve. If you have CSS and simple js inside the folder, you can upload that too.
After the files have been uploaded, you will see something like the above image. Here, I have only the index.html file, website.css I have created as part of this project.
You can see the properties page, Click on that and you will find the property to host a static website at the bottom.
The edit button brings you to this interface. You now enable static website hosting. There are two options in hosting type viz. Host a static website which refers to hosting your static website directly and Redirect requests for an object which redirects one bucket to another. Give the index document name an index.html which is your main HTML file. You also have the optional choice to provide an error document which is error.html that can show some beautiful error page instead of AWS’s default ugly error page.
After you have enabled static web hosting, you will get the website endpoint at the bottom of the properties tab. You just click on that and you will see your website.
By clicking on the above link on your website you will get an error as shown in the below image. This is due to the policy is not attached to the bucket.
It might be because we have blocked public access and also we have forgotten to provide a bucket policy to our bucket. So now let’s visit the permission tab inside the bucket.
Go to your bucket and select Permissions and look for Block public access and click Edit
Uncheck Block all public access and click Save changes. You will get a prompt to confirm save changes so enter confirm and save.
You have to add a bucket policy. Your resource will be in bucket->properties-> Amazon Resource Name (ARN).
In this way, we need to add the bucket policy as shown below and get the policy from the website which is shown in the above image.
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws-cn:s3:::Bucket-Name/*" ] } ] }Again you have to go to the bucket -> properties -> static website and click on the URL which is shown below.
After clicking on the above link which is shown in the above image you will get your interface which you have written in the HTML and CSS scripts as shown below. Copy the URL and open it in the browser and your website should work now like mine.
Step 3: Configuring Cloudfront
SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are cryptographic protocols designed to provide secure communication over the Internet. They establish an encrypted connection between a client (such as a web browser) and a server, ensuring that data transmitted between them remains private and secure.
The custom domain is now pointing to our website but we are not able to secure it. For securing and caching the content faster and in a more secure way, we will be using CloudFront.
Goto Services -> CloudFront -> Create Distribution
Creating a distribution is a bit long but not so complicated process. Let’s walk through it. (The option that I will not mention, you can leave them default).
Click on Create a CloudFront distribution
Disable cache as if you will not do it then it may take long time to update changes on your website.
On Standard logging and creating distribution
After creating the distribution you can see the Distribution domain name, copy, and view it in the browser. This should show your website.
Step 4: Implementing CI/CD through AWS CodePipeline
CI/CD stands for Continuous Integration and Continuous Deployment (or Continuous Delivery). It is a set of practices and processes used in software development to automate the building, testing, and deployment of applications.
We will be using AWS Codepipeline and GitHub for the CI-CD process.
a.Connect GitHub Account to CodePipeline
Navigate to the CodePipeline service and “ Create pipeline “.
Name your pipeline and select “ New service role”. Leave the rest of the settings at default, then click “ Next “.
We need to connect to GitHub in this pipeline for CI/CD automation.
For the source stage, select “ GitHub (Version 2) “ as our source provider.
We can now connect to our GitHub by selecting “ Connect to GitHub”. Name the connection, then “ Connect to GitHub “. You’ll need to sign in to your GitHub account to authorize the connection.
Click “ Install a new app”, select your Tourism Website repository, click “ Install”, then click “ Connect “.
After this, we need to give access by authorizing credentials as shown in the below image.
b.Configure CodePipeline and deploy CI/CD pipeline
Proceed by adding the “ Repository name” and the “ Branch name”. All other settings can remain at default, then click “ Next “.
If you scroll down a little bit there will be options as shown below.
We will skip the build stage by clicking “Skip build stage”.
For the “ Add deploy stage”, select “ S3” for the deploy provider, then the region your S3 bucket was created in, then your Tourism Website bucket. Ensure to select “ Extract file before deploy”, then click “ Next “.
Review the pipeline, then proceed to “ Create pipeline “. Wait for the pipeline to be created.
c.Delete all previous files in the S3 bucket
All previous configurations with CloudFront will remain, however, since your code is now being hosted in GitHub, we will delete the previous Tourism Website files in your S3 bucket.
Head to your AWS Management console and navigate to the S3 service, select “ Buckets “, then select the bucket hosting your Tourism Website files. Select all the files, then proceed to delete them.
Success, If everything was done correctly, you should see a success message, as shown below.
Congratulations!
You have just created a CI/CD pipeline for your Tourism Website, using AWS CodePipeline, GitHub, and Amazon S3!
If you head to your S3 bucket that host’s your Tourism Website files, you should see the newly updated files, including the “READMe.md” file. This verifies that our CI/CD pipeline was able to make updates aligning with our GitHub repo.
We can now proceed to the final Step: Verifying our CI/CD pipeline!
Verify functionality of CI/CD Pipeline
Before we can fully verify the functionality of the CI/CD pipeline, we first need to verify that we can view our Tourism Website from our custom domain in our browser.
Great! We are able to view our Tourism Website!
Now, we will make an update to the code in GitHub to verify that the pipeline is triggered and the CI/CD pipeline is functional. This will be as easy as simply making a change to the “README.md” file since any change to the files should trigger the workflow.
After making changes, we can head back to CodePipeline. If you select your pipeline, you should notice that the pipeline has been triggered just recently.
Also, if we click “ History” on the left pane of the CodePipeline dashboard, we can view the “ Executing history” and see that it has been triggered twice. The initial, was when we set up the pipeline, and the second time was when we made changes to the “README.md” file.
I have updated the tourism button description as View Info from Get Started as you can verify on the above page.
If you click on the View Info you will get a description as mentioned in the below.
Success!
If everything was done correctly, you’ve just successfully created a CI/CD pipeline to automate the deployment of your static Website using AWS CodePipeline, GitHub, and Amazon S3!
If you’ve got this far, thanks for reading! I hope it was worthwhile for you.
Originally published at https://shreedhar1998.hashnode.dev.
