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)