Merge pull request #2022 from floresmaya/flormaya-feature-amplify-sta…

…tic-source New pattern - AWS CodeCommit and AWS Amplify using CDK
aws-samples · Feb 1, 2024 · c17b663 · c17b663
2 parents 37fc00a + a3cc40d
commit c17b663
Show file tree

Hide file tree

Showing 31 changed files with 802 additions and 0 deletions.
diff --git a/amplify-codecommit/.gitignore b/amplify-codecommit/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+# CDK asset staging directory
+.cdk.staging
+cdk.out
diff --git a/amplify-codecommit/.npmignore b/amplify-codecommit/.npmignore
@@ -0,0 +1,3 @@
+# CDK asset staging directory
+.cdk.staging
+cdk.out
diff --git a/amplify-codecommit/README.md b/amplify-codecommit/README.md
@@ -0,0 +1,101 @@
+# AWS CodeCommit to AWS Amplify
+
+This sample pattern demonstrates how to deploy an [AWS CodeCommit](https://aws.amazon.com/codecommit/) repository and an [AWS Amplify](https://aws.amazon.com/amplify/) App from a local web application folder or repository. This pattern is useful for quickly deploying and hosting a web application on AWS from your local machine.
+
+Learn more about this pattern at Serverless Land Patterns: [AWS CodeCommit to AWS Amplify](https://github.com/aws-samples/serverless-patterns/tree/main/amplify-codecommit)
+
+Important: this application uses various AWS services and there are costs associated with these services after the Free Tier usage - please see the [AWS Pricing page](https://aws.amazon.com/pricing/) for details. You are responsible for any AWS costs incurred. No warranty is implied in this example.
+
+## Requirements
+
+* [Create an AWS account](https://portal.aws.amazon.com/gp/aws/developer/registration/index.html) if you do not already have one and log in. The IAM user that you use must have sufficient permissions to make necessary AWS service calls and manage AWS resources.
+* [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html) installed and configured
+* [Git Installed](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+* [AWS Serverless Application Model](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-install.html) (AWS SAM) installed
+
+## Deployment Instructions
+
+1. Create a new directory, navigate to that directory in a terminal and clone the GitHub repository:
+    ``` 
+    git clone https://github.com/aws-samples/serverless-patterns
+    ```
+2. Change directory to the pattern directory:
+    ```
+    cd amplify-codecommit
+    ```
+3. Install dependencies:
+    ```
+    npm install
+    ```
+4. From the command line, use AWS SAM to deploy the AWS resources for the pattern as specified in the template.yml file:
+    ```
+    cdk deploy
+    ```
+
+5. Note the outputs from the CDK deployment process. These contain the resource names and/or ARNs which are used for testing. See below for a sample output from this pattern. 
+    ```
+    Outputs:
+        AmplifyWebAppStack.AmplifyWebAppConstructAppIDF7BCB5B3 = XXXXXXXX
+        AmplifyWebAppStack.AmplifyWebAppConstructWebApp = https://main.XXXXXXXXXXX.amplifyapp.com
+        Stack ARN:
+        arn:aws:cloudformation:us-east-1:XXXXXXXXXXXX:stack/AmplifyWebAppStack/a645e700-ae5b-11ee-8d3c-12d2d2a31ce9
+    ```
+
+## How it works
+
+This pattern first creates a CodeCommit repository from the web application code in the local folder 'local-webapp-code'. In this example pattern, the web application is the basic React single-page application. Then, the pattern creates an Amplify app using the CodeCommit repository as the source repository. Next, it creates a new Amplify branch. Finally, it creates a Custom Resource that creates an Amplify job to build and deploy the Amplify app from the Amplify branch previously created. Without this Custom Resource, your Amplify app will not build or deploy. 
+
+If your web application communicates with a backend, the pattern demonstrates how to pass an API endpoint from the CDK to the Amplify app as an environment variable. In the pattern code, the API endpoint is hardcoded, but in practice this should be retrieved dynamically. 
+
+After the cdk deployment is successful, it will take about 3-6 minutes for the Amplify application to be built and deployed. 
+
+## Testing
+
+1. Determine that the CDK application successfully deployed - Once the CDK deployment is complete you will see the following output:
+    ```
+    Outputs:
+        AmplifyWebAppStack.AmplifyWebAppConstructAppIDF7BCB5B3 = XXXXXXXX
+        AmplifyWebAppStack.AmplifyWebAppConstructWebApp = https://main.XXXXXXXXXXX.amplifyapp.com
+        Stack ARN:
+        arn:aws:cloudformation:us-east-1:XXXXXXXXXXXX:stack/AmplifyWebAppStack/a645e700-ae5b-11ee-8d3c-12d2d2a31ce9
+    ```
+
+    Navigate to the 'https://main.XXXXXXXXXXX.amplifyapp.com' URL in your browser. You should see the default Amplify application. 
+    
+    ![Default Amplify App](./static/default-amplify.png)
+    
+    Your application will not be deployed yet. It will take about 3-6 minutes for your web application to build and deploy on Amplify.  
+
+2. Get status of Amplify build job. The job will complete when the status is 'SUCCEED.'
+
+    ```
+    aws amplify list-jobs --app-id <AmplifyWebAppConstructAppID> --branch-name main --region <your region>
+    ```
+
+3. Determine that your web application has successfully deployed. Navigate to the 'https://main.XXXXXXXXXXX.amplifyapp.com' URL in your browser. You should see the default single-page react application. 
+
+    ![Default React App](./static/default-react.png)
+
+If you do not see your web application, or if there are errors, navigate to the [AWS Amplify console](https://us-east-1.console.aws.amazon.com/amplify/home?region=us-east-1#/home), view the codecommit-amplify-webApp web app, and review the build logs. 
+
+## Common Deployment Errors
+
+The most common error when deploying the cdk application is:
+
+```
+ AmplifyWebAppStack failed: Error: The stack named AmplifyWebAppStack failed creation, it may need to be manually deleted from the AWS console: ROLLBACK_COMPLETE: Code archive supplied cannot be more than 20 MB compressed at FullCloudFormationDeployment.monitorDeployment. 
+```
+
+This is because your 'local-webapp-code' cannot be greater than 20 MB when compressed. If your app is smaller than 20 MB when compressed and you are still encountering this error, ensure that your dependencies are not being uploaded with your application code. 
+
+## Cleanup
+ 
+1. Delete the cdk application
+    ```bash
+    cdk destroy 
+    ```
+
+----
+Copyright 2023 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+SPDX-License-Identifier: MIT-0
diff --git a/amplify-codecommit/amplify-codecommit.json b/amplify-codecommit/amplify-codecommit.json
@@ -0,0 +1,76 @@
+{
+    "title": "CodeCommit to Amplify Web App",
+    "description": "Create a CodeCommit Repository and launch an Amplify web application from a local folder.",
+    "language": "Node.js",
+    "level": "300",
+    "framework": "CDK",
+    "introBox": {
+        "headline": "How it works",
+        "text": [
+            "This sample pattern demonstrates how to deploy an AWS CodeCommit repository and an AWS Amplify App from a local web application folder or repository. This pattern is useful for quickly deploying and hosting a web application on AWS from your local machine.",
+            "This pattern first creates a CodeCommit repository from the web application code in the local folder 'local-webapp-code'. Then it creates an Amplify app using the CodeCommit repository as the source repository. Finally, it creates a Custom Resource that creates an Amplify job to build and deploy the Amplify app.",
+            "Without this Custom Resource, your Amplify app will not build or deploy. If your web application communicates with a backend, the pattern demonstrates how to pass an API endpoint from the CDK to the Amplify app as an environment variable."
+        ]
+    },
+    "gitHub": {
+        "template": {
+            "repoURL": "https://github.com/aws-samples/serverless-patterns/tree/main/amplify-codecommit",
+            "templateURL": "serverless-patterns/amplify-codecommit",
+            "projectFolder": "amplify-codecommit",
+            "templateFile": "lib/amplify-webapp-construct.js"
+        }
+    },
+    "resources": {
+        "bullets": [
+            {
+                "text": "What is AWS Amplify Hosting?",
+                "link": "https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html"
+            },
+            {
+                "text": "Continuously deploy a modern AWS Amplify web application from an AWS CodeCommit repository",
+                "link": "https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/continuously-deploy-a-modern-aws-amplify-web-application-from-an-aws-codecommit-repository.html"
+            }
+        ]
+    },
+    "deploy": {
+        "text": [
+            "cdk deploy"
+        ]
+    },
+    "testing": {
+        "text": [
+            "See the Github repo for detailed testing instructions."
+        ]
+    },
+    "cleanup": {
+        "text": [
+            "Delete the stack: cdk destroy"
+        ]
+    },
+    "authors": [
+        {
+            "name": "Maya Flores",
+            "image": "Y",
+            "bio": "Partner Solutions Architect @ AWS. Serverless enthusiast.",
+            "linkedin": "maya-m-flores"
+        }
+    ],
+    "patternArch": {
+        "icon1": {
+            "x": 20,
+            "y": 50,
+            "service": "codecommit",
+            "label": "AWS CodeCommit"
+        },
+        "icon2": {
+            "x": 80,
+            "y": 50,
+            "service": "amplify",
+            "label": "AWS Amplify"
+        },
+        "line1": {
+            "from": "icon1",
+            "to": "icon2"
+        }
+    }
+}
diff --git a/amplify-codecommit/bin/app.js b/amplify-codecommit/bin/app.js
@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+const cdk = require('aws-cdk-lib');
+const { AmplifyWebAppStack } = require('../lib/amplify-webapp-stack');
+
+const app = new cdk.App();
+
+new AmplifyWebAppStack(app, 'AmplifyWebAppStack', {
+
+});
diff --git a/amplify-codecommit/buildspec.yml b/amplify-codecommit/buildspec.yml
@@ -0,0 +1,24 @@
+version: 1
+frontend:
+  phases:
+    install:
+      runtime-versions:
+        nodejs: 14
+      commands:
+        - npm install -g @aws-amplify/cli
+        - npm install
+    preBuild:
+      commands:
+        - amplify --version
+        - npm install
+    build:
+      commands:
+        - echo "REACT_APP_API_URL=${API_URL}" >> .env.local
+        - npm run build
+  artifacts:
+    baseDirectory: build
+    files:
+      - '**/*'
+  cache:
+    paths:
+      - node_modules/**/*
diff --git a/amplify-codecommit/cdk.json b/amplify-codecommit/cdk.json
@@ -0,0 +1,53 @@
+{
+  "app": "node bin/app.js",
+  "watch": {
+    "include": [
+      "**"
+    ],
+    "exclude": [
+      "README.md",
+      "cdk*.json",
+      "jest.config.js",
+      "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/core:includePrefixInUniqueNameGeneration": true
+  }
+}
diff --git a/amplify-codecommit/example-pattern.json b/amplify-codecommit/example-pattern.json
@@ -0,0 +1,58 @@
+{
+  "title": "CodeCommit to Amplify Web App",
+  "description": "Create a CodeCommit Repository and launch an Amplify web application from a local folder.",
+  "language": "Node.js",
+  "level": "300",
+  "framework": "CDK",
+  "introBox": {
+    "headline": "How it works",
+    "text": [
+      "This sample pattern demonstrates how to deploy an AWS CodeCommit repository and an AWS Amplify App from a local web application folder or repository. This pattern is useful for quickly deploying and hosting a web application on AWS from your local machine.",
+      "This pattern first creates a CodeCommit repository from the web application code in the local folder 'local-webapp-code'. Then it creates an Amplify app using the CodeCommit repository as the source repository. Finally, it creates a Custom Resource that creates an Amplify job to build and deploy the Amplify app.",
+      "Without this Custom Resource, your Amplify app will not build or deploy. If your web application communicates with a backend, the pattern demonstrates how to pass an API endpoint from the CDK to the Amplify app as an environment variable."
+    ]
+  },
+  "gitHub": {
+    "template": {
+      "repoURL": "https://github.com/aws-samples/serverless-patterns/tree/main/amplify-codecommit",
+      "templateURL": "serverless-patterns/amplify-codecommit",
+      "projectFolder": "amplify-codecommit",
+      "templateFile": "lib/amplify-webapp-construct.js"
+    }
+  },
+  "resources": {
+    "bullets": [
+      {
+        "text": "What is AWS Amplify Hosting?",
+        "link": "https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html"
+      },
+      {
+        "text": "Continuously deploy a modern AWS Amplify web application from an AWS CodeCommit repository",
+        "link": "https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/continuously-deploy-a-modern-aws-amplify-web-application-from-an-aws-codecommit-repository.html"
+      }
+    ]
+  },
+  "deploy": {
+    "text": [
+      "cdk deploy"
+    ]
+  },
+  "testing": {
+    "text": [
+      "See the Github repo for detailed testing instructions."
+    ]
+  },
+  "cleanup": {
+    "text": [
+      "Delete the stack: cdk destroy"
+    ]
+  },
+  "authors": [
+    {
+      "name": "Maya Flores",
+      "image": "https://media.licdn.com/dms/image/D5603AQHuz3YPHpqv3A/profile-displayphoto-shrink_400_400/0/1687994880319?e=1710374400&v=beta&t=mb56mI6gE6j_O1ZVMddaM3C3pHMaQrUO_zHbz5sOW6Y",
+      "bio": "Partner Solutions Architect @ AWS. Serverless enthusiast.",
+      "linkedin": "maya-m-flores"
+    }
+  ]
+}