DEPLOYMENT OF A WEBSITE TO AWS S3 BUCKET ENVIRONMENT

Webpages can be deployed into different cloud environments as they have numerous services and resources that can\ perform these tasks to continually integrate and deploy them into cloud servers and finally deliver these software solutions promptly for a better user experience. In this section, we will be creating a fully functional website on an AWS S3 environment.

The pre-requisite for the projects is the following.

1. Fundamental Knowledge of Installing and downloading software

2. Basic Understanding of Linux Commands

3. S3 Bucket

4. AWS Code Pipeline

5. Free Web Page Resource (bootstrapmade.com)

6. Code Repository

7. Internet connection

8. Visual Studio Code IMPLEMENTATION STEPS: We would go to our git repository and create a repo called s3 project.

) Navigate to the Bootstrap website to get a website template we would be using as our webpage.

Proceed to the AWS account to search and create the S3 resource which is a scalable storage we would be hosting our website.

In our project, we would not be blocking all public access, but it is always advisable to ensure you choose correctly what you intend to do and acknowledge it. We would also be disabling the bucket versioning as shown below.

Click to create the s3 bucket.

S3 bucket was created successfully.

Scroll down to the static website hosting and click the edit button to enable it and specify the index and error document you intend to use and save changes.

We would be setting up the permission of our bucket regardless of the action we performed when creating it. Click Permission to create the bucket policy by adding a new statement

Search for the s3 service locate the getObject function and click to add the resources as shown below.

The next step would be adding the "arn" and tweaking the principal section to accept everything and save changes.

Bucket Policy successfully edited and our s3 bucket is ready to host the website.

The next step is to navigate to the Visual Studio Code and Open the folder that has the Bootstrap downloaded website\ resources.

**CREATION OF A CI/CD PIPELINE TO THE S3 BUCKET**

We would have to create the pipeline and connect to the S3 bucket as well as link to the git environment with the use of the webhook so that any new code and commit pushed to our git hub would automatically go to the S3 bucket. Navigate to the AWS console search for the code pipeline and click on create pipeline.

Edit the pipeline setting as shown below and click Next.

Add the type of repository you would like to use. In our case Git Hub version1.We would now authorize the aws-code suite to connect our git

As we can see the pipeline settings is automatically connect to out GitHub version and configured. We navigate back to our Visual Studio code to commit our new s3 project to our master as shown below.

We continue with our pipeline settings to ensure it is on the master branch and properly connect to git hub with the git webhook and move to the build stage.

In this project, we would skip the build stage

We would get to the deploy settings and deploy action provider as shown below.

Finally creating the pipeline

As we can see the pipeline has been created and the source and deploy successfully confirmed.

By clicking on history we can see the first deployment made through the code pipeline

We then navigate back to the S3 BUCKET to click on our project to view the link.

We have to ensure our committed web page resources from git hub exist in the bucket with the help of our code pipeline as shown below

We have to check the index.html file to view the object URL and launch the website.

Our website has been successfully launched as shown below

The website is successfully displayed as shown below. Having succeeded in achieving this, we have to ensure that our pipeline is effectively monitoring the website with respect to any changes. Hence we navigate back to our vs code by adding and committing new changes on git as shown below.

We then refresh the website page as well as check our code pipeline execution history.

The website successfully displayed on front-end.

This shows that our code pipeline effectively monitors any changes and is automatically triggered with any recent changes. We can perform another one as shown below.

Congratulations. You have successfully deployed a website in an s3 environment using an AWS code pipeline.

If this post was helpful, Would be great if you could click the clap button 👏below to show your support.

Thank you for reading💚👏