Overview and prerequisites

In guide 1 you built the website on your laptop and uploaded it with aws s3 sync. Here AWS does that for you: every push to main on your fork is tested, built with the correct API address baked in, and synced to your S3 website bucket.

What happens on every push#

1. You push a commit to main on your fork.
2. CodePipeline starts, downloads the commit into the private artifact bucket (Source).
3. Build (CodeBuild project shortlink-web-build): runs npm ci, the 23 frontend tests, then vite build. The environment variable VITE_API_BASE_URL is set on this project, so your load balancer's address is compiled into the JavaScript. Output: the dist/ folder, plus the deploy buildspec, packaged as BuildArtifact.
4. DeployWeb (CodeBuild project shortlink-web-deploy): unpacks BuildArtifact and runs aws s3 sync … --delete into your website bucket, then re-uploads index.html with Cache-Control: no-cache.
5. Visitors get the new site on their next load. There is no server and no downtime.

The one thing that is different from the backend#

The deploy step needs your bucket name, and the file that does the syncing lives in the repository. That is where a fork matters most.

Before you begin#

You need the deployment from guide 1, at least chapters 1 to 11.

• The website loads at <WEB_URL> and the badge says API online.
• You know your bucket name (<WEB_BUCKET>) and your load balancer address (<API_URL>). Check My values.
• You can git push to your fork.
• The bucket allows public read through its bucket policy (guide 1, chapter 8). The pipeline only needs write access, which you add in this guide.

curl -sI <WEB_URL>/ | head -n 1
aws s3 ls s3://<WEB_BUCKET>/ --region ap-south-1

Names used in this guide#

Next: edit the deploy file in your fork.