S3 and CloudFront

Overview

This section describes the configuration steps for Amazon S3, Origin Access Control (OAC), and CloudFront to serve the static frontend of the system.

Deployment Steps

1. Open Amazon S3 and create a new bucket for the LunchSync frontend.

2. Set the bucket prefix to lunchsync-project, choose region ap-southeast-1, allow S3 to generate the full name, and keep the bucket private.

3. Keep ACLs disabled, enable Block all public access, do not enable versioning, and continue with a private bucket.

4. Use default encryption SSE-S3, create the bucket, then upload frontend content into folders such as frontend/ and media/.

5. After attaching the bucket to CloudFront, check the bucket policy to ensure only cloudfront.amazonaws.com from your distribution can read objects.

6. Go to CloudFront > Origin access and create a new Origin Access Control (OAC) for the S3 bucket.

7. Name the OAC lunchsync-oac, add a clear description, and keep Sign requests enabled.

8. Verify that lunchsync-oac has been created successfully before proceeding.

9. Go to CloudFront > Distributions and start creating a new distribution.

10. Choose the distribution setup plan and continue the wizard.

11. Name the distribution S3-Frontend, select Single website or app, and skip Route 53 domain setup in the initial wizard.

12. In Specify origin, choose Amazon S3 as the origin type.

13. Select the project S3 bucket as origin, set Origin path = /frontend, and allow CloudFront to access the private bucket.

14. Keep AWS recommended origin and cache settings for static S3 content.

15. In Enable security, keep default CloudFront/WAF protections.

16. Review configuration: S3 origin, Origin path = /frontend, then create the distribution.

17. After creation, open Origins tab to verify correct origin path and OAC.

18. If needed, edit origin to attach lunchsync-oac and copy the generated policy into the S3 bucket policy.

19. Open Behaviors tab to configure default behavior.

20. Set Viewer protocol policy = Redirect HTTP to HTTPS.

21. Keep cache policy CachingOptimized and origin request policy CORS-S3Origin.

22. Open Error pages and configure custom error response for SPA.

23. Create a rule: when origin returns 403, respond with /index.html and status 200.

24. Verify SPA fallback rule is saved.

25. Go back to Origins and create a second origin for the backend ALB.

26. Enter ALB DNS name, use HTTPS only for origin communication.

27. Create a third origin for media using the same S3 bucket with Origin path = /media and attach OAC.

28. Verify there are now 3 origins: frontend, ALB backend, and media.

29. Create behavior for media/*, route to media origin, enforce HTTPS.

30. Create behavior for api/*, route to ALB, set HTTPS only, disable caching, use AllViewer policy.

31. Verify final behavior list.

32. Go to Route 53, open hosted zone lunchsync.space.

33. Create an alias record at root domain pointing to CloudFront distribution.

34. Verify the alias record appears.

35. Return to CloudFront settings, add Alternate domain (CNAME) lunchsync.space and select ACM certificate in us-east-1.

36. Set Default root object = index.html and enable HTTP versions (HTTP/2, HTTP/3).

37. Save settings and verify domain, certificate, and root object.

38. Open https://lunchsync.space to verify frontend is served via CloudFront.

39. Test a media asset like https://lunchsync.space/media/lunchsync.png to confirm media/* behavior works correctly.