Deploy a Static Website Securely Using AWS


This guide provides a comprehensive, step-by-step process for hosting a static website on AWS. By following these steps, you'll have a secure and automated static website deployment pipeline using AWS. The key components include creating an S3 bucket, setting up AWS CodeCommit, configuring CodePipeline, requesting an SSL Certificate, creating a CloudFront Distribution, and updating DNS Settings for your domain. 

This guide was created by our Summer Intern, Serene Aryal, who successfully completed this website project for a customer. The customer was very happy with the results.

 


Step 1: Create an S3 Bucket

Creating the Bucket

  1. Sign in to the AWS Management Console and open the S3 console.
  2. Choose "Create Bucket."
  3. Enter the bucket name (e.g., mybucket.com).
  4. Select a region.

Configuring the S3 Bucket

  1. Under Permissions, uncheck "Block all public access."
  2. To grant public read access, add the following bucket policy in the Bucket policy editor:
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadGetObject",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::[YOUR BUCKET NAME]/*"
            }
        ]
    }
    
  3. Under Properties, enable Static website hosting and enter your index document (e.g., index.html).

Step 2: Set Up AWS CodeCommit Repository

Create an IAM User for Accessing CodeCommit

  1. Navigate to the IAM console.
  2. Select Users and choose "Create User."
  3. Attach the AWSCodeCommitPowerUser policy.

Generate Security Credentials

  1. Generate HTTPS Git credentials for AWS CodeCommit.

Configure AWS CLI and Git

  1. Install AWS CLI and Git.
  2. Initialize Git in your local folder and push your code to the repository.

Step 3: Set Up CodePipeline

  1. Navigate to the CodePipeline console and create a new pipeline.
  2. Add Source Stage from AWS CodeCommit.
  3. Skip the Build Stage.
  4. Deploy Stage: Choose Amazon S3 and select your S3 bucket.

Step 4: Get SSL Certificate

  1. Request a certificate from AWS Certificate Manager.
  2. Add CNAME records for domain verification.

Step 5: Create a CloudFront Distribution

  1. Navigate to the CloudFront console and create a distribution.
  2. Configure your S3 bucket as the origin and set Viewer protocol policy to redirect HTTP to HTTPS.

Step 6: Update DNS Settings to Point to CloudFront

  1. Update your DNS settings with CNAME and A records pointing to your CloudFront domain.

Step 7: Test Your Domain

  1. Wait for DNS propagation.
  2. Visit your domain to ensure it loads securely with HTTPS.

Conclusion

By following this guide, you've successfully deployed a static website on AWS with a secure and automated pipeline. Explore additional AWS services to further enhance your website's capabilities.


James Phipps 29 May, 2024
Share this post
Tags
Archive
Sign in to leave a comment

  


Free Training and Lab on AWS Systems Manager
Patch Manager