DEV Community

Latchu@DevOps
Latchu@DevOps

Posted on

🚀 Deploy Static Website from S3 to Multiple Buckets using AWS CodePipeline

#aws #codepipeline #cicd #devops

🛠️ Step 1: Create the Source S3 Bucket

✅ Enable Versioning

CodePipeline uses version IDs to identify changes, so versioning must be enabled:

    Go to S3 Console > Create a bucket (e.g., my-source-bucket)
    Enable Versioning under Bucket Versioning section
Enter fullscreen mode Exit fullscreen mode

source-bucket-1

🗃️ Step 2: Create the Production S3 Bucket

✅ Enable Public Access

dest-bucket-1

This is required to serve content over the internet via S3 website hosting.

    Create a new bucket (e.g., my-production-bucket)
    Disable Block all public access
    Save changes
Enter fullscreen mode Exit fullscreen mode

🌐 Enable Static Website Hosting

    Go to Bucket > Properties
    Scroll to Static website hosting
    Choose Enable
    Select Host a static website
    Set:
        Index document: index.html
        Error document: error.html
Enter fullscreen mode Exit fullscreen mode

🛡️ Add Bucket Policy

To allow public access to the website content:

    Go to Bucket > Permissions > Bucket policy
    Paste the policy from bucket-policy.json
Enter fullscreen mode Exit fullscreen mode

dest-bucket-2

bucket-policy.json

📦 Step 3: Upload Website Files

Download the sample static site ZIP:
Enter fullscreen mode Exit fullscreen mode

static-website-zip-file

Upload it to the source S3 bucket (e.g., my-source-bucket)
Enter fullscreen mode Exit fullscreen mode

source-bucket-2

🔄 Step 4: Create the CodePipeline

pipeline-1

    Go to AWS CodePipeline > Create pipeline
    Name your pipeline (e.g., S3-StaticWebsite-Pipeline)
    Allow AWS to create a new service role
Enter fullscreen mode Exit fullscreen mode

pipeline-2

🔹 Add Source Stage

    Provider: Amazon S3
    Bucket: my-source-bucket
    Object Key: my-website.zip
Enter fullscreen mode Exit fullscreen mode

🚫 Skip Build & Test Stage

We're not using a build or test stage in this simple use case.

🔸 Add Deploy Stage

    Provider: Amazon S3
    Bucket: my-production-bucket
    Enable Extract file before deploy
Enter fullscreen mode Exit fullscreen mode

pipeline-3

✅ Final Step: Review & Create Pipeline

Once the pipeline is created, it should trigger automatically and deploy the contents of my-website.zip into the production bucket.

pipeline-4

❓ Why is the S3 Website Not Accessible?

Make sure:

  • Static website hosting is enabled
  • Public access is not blocked
  • Bucket policy allows public read access
  • Files are deployed correctly (check for index.html)

pipeline-5

Access it via the S3 website endpoint found under Bucket > Properties > Static Website Hosting.

pipeline-6

🌍 Deploy to Multiple S3 Buckets

To support multiple environments (e.g., prod, stage, dev):

  • Create additional public S3 buckets with static website hosting
  • Add the same bucket policy to each
  • Update the CodePipeline IAM role to include permissions for new buckets

🧩 Add Extra Deploy Actions in CodePipeline 

    Go to your pipeline > Edit
    Edit the Deploy stage
    Click Add action
Enter fullscreen mode Exit fullscreen mode

Set:

    Action name (e.g., DeployToStage)
    Provider: Amazon S3
    Target bucket: my-stage-bucket
    Extract before deploy: ✅
Enter fullscreen mode Exit fullscreen mode

pipeline-7

🔁 Manually Trigger the Pipeline

To redeploy:

pipeline-8

    Open the pipeline
    Click Release change
Enter fullscreen mode Exit fullscreen mode

pipeline-9

📌 Wrap-up

This guide walks you through a full S3 to S3 static site deployment pipeline using AWS CodePipeline. You can extend this setup to deploy the same artifacts to multiple environments easily.

Top comments (0)