Aws 2 serving spa

cdk-deploy/index.ts

@@ -0,0 +1,16 @@
+import * as cdk from "@aws-cdk/core";
+import { StaticSite } from "./static-site-construct";
+
+class StaticSiteStack extends cdk.Stack {
+    constructor(parent: cdk.App, name: string) {
+        super(parent, name);
+
+        new StaticSite(this, name);
+    }
+}
+
+const app = new cdk.App();
+
+new StaticSiteStack(app, "useless-shop-2");
+
+app.synth();

cdk-deploy/static-site-construct.ts

@@ -0,0 +1,59 @@
+import { Construct, Stack } from "@aws-cdk/core";
+import * as s3 from "@aws-cdk/aws-s3";
+import * as s3deploy from "@aws-cdk/aws-s3-deployment";
+import * as iam from "@aws-cdk/aws-iam";
+import * as cloudfront from "@aws-cdk/aws-cloudfront";
+
+export class StaticSite extends Construct {
+    constructor(parent: Stack, name: string) {
+        super(parent, name);
+
+        const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, "useless-shop-2");
+
+        const siteBucket = new s3.Bucket(this, "useless-shop-bucket-1", {
+            bucketName: 'useless-shop-bucket-2',
+            websiteIndexDocument: "index.html",
+            publicReadAccess: false,
+            blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
+        });
+
+        siteBucket.addToResourcePolicy(
+            new iam.PolicyStatement({
+                actions: ["s3:GetObject"],
+                resources: [siteBucket.arnForObjects("*")],
+                principals: [
+                    new iam.CanonicalUserPrincipal(
+                        cloudFrontOAI.cloudFrontOriginAccessIdentityS3CanonicalUserId
+                    ),
+                ],
+            })
+        );
+
+        const distribution = new cloudfront.CloudFrontWebDistribution(
+            this,
+            "useless-shop-cfwd-2",
+            {
+                originConfigs: [
+                    {
+                        s3OriginSource: {
+                            s3BucketSource: siteBucket,
+                            originAccessIdentity: cloudFrontOAI,
+                        },
+                        behaviors: [
+                            {
+                                isDefaultBehavior: true,
+                            },
+                        ],
+                    },
+                ],
+            }
+        );
+
+        new s3deploy.BucketDeployment(this, "useless-shop-bucket-deployment-2", {
+            sources: [s3deploy.Source.asset("./dist")],
+            destinationBucket: siteBucket,
+            distribution,
+            distributionPaths: ["/*"],
+        });
+    }
+}

cdk.json

@@ -0,0 +1,64 @@
+{
+  "app": "npx ts-node --prefer-ts-exts ./cdk-deploy/index.ts",
+  "watch": {
+    "include": [
+      "**"
+    ],
+    "exclude": [
+      "README.md",
+      "cdk*.json",
+      "**/*.d.ts",
+      "**/*.js",
+      "tsconfig.json",
+      "package*.json",
+      "yarn.lock",
+      "node_modules",
+      "test"
+    ]
+  },
+  "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,
+    "@aws-cdk/aws-kms:aliasNameRef": true,
+    "@aws-cdk/aws-autoscaling:generateLaunchTemplateInsteadOfLaunchConfig": true,
+    "@aws-cdk/core:includePrefixInUniqueNameGeneration": true,
+    "@aws-cdk/aws-efs:denyAnonymousAccess": true,
+    "@aws-cdk/aws-opensearchservice:enableOpensearchMultiAzWithStandby": true,
+    "@aws-cdk/aws-lambda-nodejs:useLatestRuntimeVersion": true,
+    "@aws-cdk/aws-efs:mountTargetOrderInsensitiveLogicalId": true,
+    "@aws-cdk/aws-rds:auroraClusterChangeScopeOfInstanceParameterGroupWithEachParameters": true,
+    "@aws-cdk/aws-appsync:useArnForSourceApiAssociationIdentifier": true,
+    "@aws-cdk/aws-rds:preventRenderingDeprecatedCredentials": true,
+    "@aws-cdk/aws-codepipeline-actions:useNewDefaultBranchForCodeCommitSource": true
+  }
+}

package.json

@@ -4,6 +4,9 @@
   "private": true,
   "scripts": {
     "start": "vite",
+    "deploy": "sdk deploy",
+    "destroy": "sdk destroy",
+    "bootstrap": "cdk bootstrap --profile=default",
     "build": "tsc && vite build",
     "preview": "npm run build && vite preview",
     "test": "vitest",
@@ -28,6 +31,9 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@aws-cdk/aws-s3": "^1.204.0",
+    "@aws-cdk/aws-s3-deployment": "^1.204.0",
+    "@aws-cdk/core": "^1.204.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",
@@ -37,6 +43,8 @@
     "@typescript-eslint/parser": "^5.30.5",
     "@vitejs/plugin-react": "^1.3.2",
     "@vitest/ui": "^0.18.0",
+    "aws-cdk": "^2.106.1",
+    "aws-cdk-lib": "^2.106.1",
     "c8": "^7.11.3",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",

src/components/MainLayout/components/Header.tsx

@@ -27,14 +27,17 @@ export default function Header() {
     <AppBar position="relative">
       <Toolbar>
         <Typography variant="h6" sx={{ flexGrow: 1 }}>
-          <Link
-            component={RouterLink}
-            sx={{ color: "inherit" }}
-            underline="none"
-            to="/"
-          >
-            My Store!
-          </Link>
+          <div style={{ display: 'flex'}}>
+            <Link
+                style={{ margin: 'auto', transform: 'translateX(25%)'}}
+                component={RouterLink}
+                sx={{ color: "inherit" }}
+                underline="none"
+                to="/"
+            >
+              USELESS THINGS STORE
+            </Link>
+          </div>
         </Typography>
 
         {auth && (

tsconfig.json

@@ -4,7 +4,8 @@
     "paths": {
       "~/*": ["./*"]
     },
-    "target": "ESNext",
+    "target": "ES2020",
+    "module": "commonjs",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
@@ -13,7 +14,6 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,