add preview action + cloudfront distro

Author: lukqw

.github/workflows/preview.yml

@@ -0,0 +1,29 @@
+name: Create PR Preview
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Deploy Preview
+        uses: LocalStack/setup-localstack/preview@main
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          localstack-api-key: ${{ secrets.LOCALSTACK_API_KEY }}
+          preview-cmd: |
+            make build
+            make bootstrap
+            make deploy
+            make prepare-frontend-local
+            make build-frontend
+            make bootstrap-frontend
+            make deploy-frontend
+            distributionId=$(awslocal cloudfront list-distributions | jq -r '.DistributionList.Items[0].Id')
+            echo "Open URL: $AWS_ENDPOINT_URL/cloudfront/$AWS_DEFAULT_REGION/$distributionId/"

packages/infra/cdk/aws-sdk-js-notes-app-frontend-stack.ts

@@ -4,6 +4,8 @@ import {
   CfnOutput,
   aws_s3 as s3,
   aws_s3_deployment,
+  aws_cloudfront as cloudfront,
+  aws_cloudfront_origins as origins,
 } from "aws-cdk-lib";
 import { Construct } from "constructs";
 
@@ -22,6 +24,25 @@ export class AwsSdkJsNotesAppFrontendStack extends Stack {
       destinationBucket: websiteBucket,
     });
 
+    new cloudfront.Distribution(this, "WebsiteDistribution", {
+      defaultRootObject: "index.html",
+      defaultBehavior: {
+        origin: new origins.S3Origin(websiteBucket),
+      },
+      errorResponses: [
+        {
+          httpStatus: 403,
+          responseHttpStatus: 200,
+          responsePagePath: "/index.html",
+        },
+        {
+          httpStatus: 404,
+          responseHttpStatus: 200,
+          responsePagePath: "/index.html",
+        },
+      ],
+    });
+
     new CfnOutput(this, "FrontendBucketWebsite", {
       value: `http://${websiteBucket.bucketName}.s3-website.localhost.localstack.cloud:4566/`,
     });