Project 1:Automating Website Deployment to AWS S3 Using CircleCI

I am going to do my first project and that is upload my own website to S3 bucket. Let's Start.

In this tutorial, we'll be using CircleCI to automate the deployment of an HTML website to an S3 bucket. CircleCI is a powerful continuous integration and delivery platform that makes it easy to automate your software builds, tests, and deployments.

Amazon S3 is a highly scalable and secure cloud storage service that allows you to store and retrieve any amount of data, at any time, from anywhere on the web. It's a great choice for hosting static websites, such as HTML, CSS, and JavaScript files.

By combining CircleCI and S3, we can create a powerful workflow for deploying and managing static websites. Let's get started!

Prerequisites

To follow along with this tutorial, you'll need:

• An AWS account

• A CircleCI account

• A simple HTML website

Step 1: Create an S3 Bucket

The first step is to create an S3 bucket to host our website. Follow these steps:

1. Log in to the AWS Management Console.

2. Navigate to the S3 service.

3. Click the "Create bucket" button.

1. Enter a name for your bucket. This name must be unique across all existing bucket names in Amazon S3.

1. Choose a region for your bucket.

2. Click the "Create" button.

Step 2: Configure IAM User

Next, we need to create an IAM user and grant it permissions to access our S3 bucket. Follow these steps:

1. Log in to the AWS Management Console.

2. Navigate to the IAM service.

3. Click the "Users" link in the left-hand navigation.

4. Click the "Add user" button.

1. Enter a name for your user.

1. Click the "Next: Permissions" button.

2. Select "Attach existing policies directly".

1. Search for and select the "AmazonS3FullAccess" policy.

1. Click the "Next: Tags" button

2. Click the "Next: Review" button.

3. Review your settings and click the "Create user" button.

4. click on the user you just created.

1. Go to security credentials and go to access keys then click on create access key.

1. select Command line interface and click next and create access key.

1. Download .csv from there and save it for later.

Step 3: Configure CircleCI

Before setting up CircleCI, you need to have your HTML website on your GitHub Repositories. Now we need to configure CircleCI to automate the deployment of our website to the S3 bucket. Follow these steps:

1. Log in to your CircleCI account.

2. Click on project. you will see all your Repositories

1. choose your website Repositories and click on Set up project on right side.

1. Enter your branch name. before moving ahead you need config.yml in your repositories.

2. create folder .circleci in your website repositories and create new config.yml and push it to the selected branch on github.

version: 1
jobs:
  build:
    docker:
      - image: alpine:latest
    steps:
      - checkout
      - run :
          name: Install AWS CLI
          command: |
            apk add --no-cache python3 py3-pip
            pip3 install --upgrade pip
            pip3 install awscli
      - run:
          name: Configure AWS credentials
          command: |
            aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
            aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
            aws configure set default.region us-east-2
      - run:
          name: Upload website to S3 bucket
          command: |
            aws s3 sync . s3://ajaypatel.live --exclude "*.md"
            aws s3 website s3://ajaypatel.live --index-document index.html --error-document error.html

You need to enter your AWS access key and secret access key, which we downloaded before as CSV file.

1. After pushing your config.yml you can set up your project.

2. If you have done everything correctly then your Dashboard will look like below screenshot with success build.

That's it. You have successfully created your Automating Website Deployment using CircleCI.

To protect your AWS access key and secret access key, you should use environment variables to store them in your CircleCI configuration. Environment variables can be securely stored in CircleCI and accessed during the build process, so you don't need to include them in your source code.

Here's how you can update your CircleCI configuration to use environment variables for your AWS access key and secret access key:

1. Goto project setting(Right side corner) from your project Dashboard.

1. go to the "Environment Variables" section and create two environment variables named AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.

1. Set the values of the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY environment variables to the access key and secret access key you downloaded as CSV file.

2. In your CircleCI configuration file, replace the hard-coded access key and secret access key values with the environment variable names.

Congratiolation for your Deployment to AWS S3 Using CircleCI. Now whenever you will push your code to github, CircleCI will deploy it to S3 bucket automatically.

If you have any question/suggestion please comment below.

Happy coding.