Add CDK deployment stack for the frontend

.eslintignore

@@ -1,4 +1,6 @@
 node_modules
 public
 vite.config.ts
-serverless.yml
+serverless.yml
+.cdk.staging
+cdk.out

.gitignore

@@ -12,6 +12,10 @@ node_modules
 coverage
 dist
 dist-ssr
+dist-infra
+cdk.out
+.cdk.staging
+
 *.local
 
 # Editor directories and files

.npmignore

@@ -0,0 +1,6 @@
+*.ts
+!*.d.ts
+
+# CDK asset staging directory
+.cdk.staging
+cdk.out

README.md

@@ -36,3 +36,16 @@ Runs tests in console, in browser or with coverage.
 ### `lint`, `prettier`
 
 Runs linting and formatting for all files in `src` folder.
+
+### `build-infra`
+
+Builds CDK Stack
+
+### `deploy`
+
+Builds and deploys website, effectively `npm run build`, `npm run build-infra` and `cdk deploy`
+
+## App URLs
+
+* http://cdkfestack-myfirstbucketb8884501-1007v04jxv4aa.s3-website-us-east-1.amazonaws.com - responds with 403 due to bucket policies, use cloudfront distribution url instead
+* https://d1xaanpmmg0wvm.cloudfront.net - cloudfront distribution

cdk.json

@@ -0,0 +1,37 @@
+{
+  "app": "dist-infra/main.js",
+  "context": {
+    "@aws-cdk/aws-lambda:recognizeLayerVersion": true,
+    "@aws-cdk/core:checkSecretUsage": true,
+    "@aws-cdk/core:target-partitions": [
+      "aws",
+      "aws-cn"
+    ],
+    "@aws-cdk-containers/ecs-service-extensions:enableDefaultLogDriver": true,
+    "@aws-cdk/aws-ec2:uniqueImdsv2TemplateName": true,
+    "@aws-cdk/aws-ecs:arnFormatIncludesClusterName": true,
+    "@aws-cdk/aws-iam:minimizePolicies": true,
+    "@aws-cdk/core:validateSnapshotRemovalPolicy": true,
+    "@aws-cdk/aws-codepipeline:crossAccountKeyAliasStackSafeResourceName": true,
+    "@aws-cdk/aws-s3:createDefaultLoggingPolicy": true,
+    "@aws-cdk/aws-sns-subscriptions:restrictSqsDescryption": true,
+    "@aws-cdk/aws-apigateway:disableCloudWatchRole": true,
+    "@aws-cdk/core:enablePartitionLiterals": true,
+    "@aws-cdk/aws-events:eventsTargetQueueSameAccount": true,
+    "@aws-cdk/aws-iam:standardizedServicePrincipals": true,
+    "@aws-cdk/aws-ecs:disableExplicitDeploymentControllerForCircuitBreaker": true,
+    "@aws-cdk/aws-iam:importedRoleStackSafeDefaultPolicyName": true,
+    "@aws-cdk/aws-s3:serverAccessLogsUseBucketPolicy": true,
+    "@aws-cdk/aws-route53-patters:useCertificate": true,
+    "@aws-cdk/customresources:installLatestAwsSdkDefault": false,
+    "@aws-cdk/aws-rds:databaseProxyUniqueResourceName": true,
+    "@aws-cdk/aws-codedeploy:removeAlarmsFromDeploymentGroup": true,
+    "@aws-cdk/aws-apigateway:authorizerChangeDeploymentLogicalId": true,
+    "@aws-cdk/aws-ec2:launchTemplateDefaultUserData": true,
+    "@aws-cdk/aws-secretsmanager:useAttachedSecretResourcePolicyForSecretTargetAttachments": true,
+    "@aws-cdk/aws-redshift:columnId": true,
+    "@aws-cdk/aws-stepfunctions-tasks:enableEmrServicePolicyV2": true,
+    "@aws-cdk/aws-ec2:restrictDefaultSecurityGroup": true,
+    "@aws-cdk/aws-apigateway:requestValidatorUniqueId": true
+  }
+}

infra/src/main.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import "source-map-support/register";
+import * as cdk from "aws-cdk-lib";
+import { CdkStack } from "./main/app/cdk-stack";
+
+const app = new cdk.App();
+new CdkStack(app, "CdkFEStack", {});

infra/src/main/app/cdk-stack.ts

@@ -0,0 +1,78 @@
+import { RemovalPolicy, CfnOutput } from "aws-cdk-lib";
+import * as cdk from "aws-cdk-lib";
+import { aws_cloudfront as cloudfront } from "aws-cdk-lib";
+import { Construct } from "constructs";
+import * as S3 from "aws-cdk-lib/aws-s3";
+import * as S3Deploy from "aws-cdk-lib/aws-s3-deployment";
+import {
+  CloudFrontWebDistribution,
+  OriginAccessIdentity,
+} from "aws-cdk-lib/aws-cloudfront";
+import { join } from "path";
+
+export class CdkStack extends cdk.Stack {
+  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
+    super(scope, id, props);
+
+    const bucket = new S3.Bucket(this, "MyFirstBucket", {
+      removalPolicy: RemovalPolicy.DESTROY,
+      autoDeleteObjects: true,
+      // blockPublicAccess: S3.BlockPublicAccess.BLOCK_ACLS,
+      accessControl: S3.BucketAccessControl.BUCKET_OWNER_FULL_CONTROL,
+      websiteIndexDocument: "index.html",
+      websiteErrorDocument: "index.html",
+    });
+
+    const accessDeniedErrorResponse: cloudfront.CfnDistribution.CustomErrorResponseProperty =
+      {
+        errorCode: 403,
+        errorCachingMinTtl: 30,
+        responseCode: 200,
+        responsePagePath: "/index.html",
+      };
+    const notFoundErrorResponse: cloudfront.CfnDistribution.CustomErrorResponseProperty =
+      {
+        errorCode: 404,
+        errorCachingMinTtl: 30,
+        responseCode: 200,
+        responsePagePath: "/index.html",
+      };
+
+    const oai = new OriginAccessIdentity(this, `origin-access-id`, {});
+    bucket.grantRead(oai);
+
+    const distribution = new CloudFrontWebDistribution(
+      this,
+      `MyFirstDistribution`,
+      {
+        originConfigs: [
+          {
+            s3OriginSource: {
+              s3BucketSource: bucket,
+              originAccessIdentity: oai,
+            },
+            behaviors: [{ isDefaultBehavior: true }],
+          },
+        ],
+        errorConfigurations: [accessDeniedErrorResponse, notFoundErrorResponse],
+      }
+    );
+
+    new S3Deploy.BucketDeployment(this, "MyFirstDeploy", {
+      sources: [
+        S3Deploy.Source.asset(join(__dirname, "..", "..", "..", "dist")),
+      ],
+      destinationBucket: bucket,
+    });
+
+    new CfnOutput(this, "BucketUrl", {
+      value: bucket.bucketWebsiteUrl,
+      exportName: "FrontendBucketUrl",
+    });
+
+    new CfnOutput(this, "DistributionUrl", {
+      value: distribution.distributionDomainName,
+      exportName: "FrontendUrl",
+    });
+  }
+}

infra/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "declaration": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": false,
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "experimentalDecorators": true,
+    "strictPropertyInitialization": false,
+    "typeRoots": [
+      "../node_modules/@types"
+    ],
+    "outDir": "../dist-infra",
+  },
+  "exclude": [
+    "node_modules",
+    "cdk.out"
+  ]
+}