README.md

Welcome to the Landing Page with Pipeline CDK app example

As described in root README, this CDK app is an improvement of the Landing Page CDK app. The example demonstrates how to add a CI/CD pipeline to the app to deploy the static web site on the staging and prod environments (basically the Staging and Prod account) created by the SDLC Organization CDK app.

Under the hood

This CDK app adds a new stack, the LandingPagePipelineStack, which deploys a CI/CD pipeline orchestrating the deployment of your static web site accross several environments (and thus several AWS accounts as we follow the best practice 1 environment = 1 AWS account).

The LandingPagePipelineStack instanciates the following resources:

• An S3 Bucket to store your build assets
• A CodePipeline pipeline to orchestrate the build and deployment of the LandingPageStack accross the Staging and Prod accounts

The CDK application source code is in the source\3-landing-page-cicd\cdk folder.

Deployments

The table below describes the high level steps you will go through to set up your CI/CD pipeline.

Step #	Feature	Description
0	Initial setup	Setup the development environment and clone the repositories.
1	Configure your cicd profile	Configure the credentials to trigger the pipeline.
2	Customize the input parameters	Configure the input parameters to match your own environement
3	Deploy the App	Deploy the initial frontend application.
4	Cleanup and Troubleshooting	How to remove all of the workshop's resources from your account and troubleshoot issues

Step 0 - Initial Setup

Click to go through this step

Prerequisites

• A GitHub account
• npm and AWS CLI v2 installed
• A SDLC Organization deployed with the SDLC Organization CDK app

Fork and clone the repository if not done previously

1. Fork the repository on your GitHub account by clicking here.

2. Clone the repository locally:

   git clone https://github.com/<YOUR_GITHUB_ALIAS>/aws-bootstrap-kit-examples
   

Step 1 - Configure your cicd profile

Click to go through this step

Give appropriate permissions to your Developer user to deploy a pipeline in the CICD account

Put your Administrator hat and click to expand or ask your Administrator to give you the appropriate permission following those steps.

If you followed the whole SDLC Organization CDK app setup procedure, you have created a user group called DevOpsEngineers and you gave it the permission to access the CICD account with the DevOpsAccess permission set. If you don't have followed these steps, please run them now as the following steps are based on it.

Right now, the Developer user that you are using has no access to the CICD account as it is only member of the Developers group. Let's add it to the DevOpsEngineers group to give it access to the CICD account with the appropriate permissions.

1. Navigate to your AWS access portal Url and sign in with your administrator user

   

2. Click on the AWS Account card

   

3. Click on the main account row to expand it

   

4. Click on the Management console link for the AdministratorAccess permission set

   

5. Search for the Identity Center service thanks to the Find Services field

   

6. Click on Users on the left side menu

   

7. Click on the Developer user

   

8. Click on the Groups tab

   

9. Select the DevOpsEngineers group and click on the Add to 1 group(s) button

   

10. Go back to your AWS access portal and click on Sign out

    

Configure a profile with appropriate permissions to deploy a pipeline in the CICD account

1. Execute aws configure sso --profile cicd and follow the instructions

2. When you are asked to sign in in a web browser, use your Developer credentials

   

3. Click on the Sign in to AWS CLI button

   

4. You can close your browser

   

5. Go back to your shell and select the CICD account

   

6. Enter the default region where you want to deploy, e.g. eu-west-1, and your default output format, e.g. json

   

7. Execute npm install -g cdk-sso-sync

   Right now the cdk cli is not IAM Identity Center friendly so we use a small command line tool to synchronize IAM Identity Center credential with standard aws cli credential so that cdk can use a IAM Identity Center enabled profile

8. Execute cdk-sso-sync cicd

Step 2 - Customize the input parameters

Click to go through this step

Create a secret with your GitHub Personal Access Token in the CICD account

When you have gone through the SDLC Organization CDK app setup procedure, you have created a secret in AWS Secrets Manager in your main account to store your GitHub Personal Access Token. The secret is only accessible from the main account.

Now, we have to create the same secret in the CICD account so that the CodePipeline service can access the source code in your GitHub repository.

aws --profile cicd secretsmanager create-secret --name GITHUB_TOKEN --secret-string <YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>

Update the cdk.json file parameters

1. You must update the following values in your source/3-landing-page-with-cicd/cdk/cdk.json file:

   • "github_alias": <YOUR_GITHUB_ALIAS>
   • "github_repo_name": <YOUR_GITHUB_REPOSITORY>,
   • "github_repo_branch": <YOUR_GITHUB_BRANCH>,
   • (optional) "domain_name": (If you setup a dns domain as part of your SDLC Organization you can use it to expose your landing page. The domain_name variable with the same value as in source/1-SDLC-organization/cdk.json one.

2. Push new changes to your repo

git add source/3-landing-page-cicd/cdk.json
git commit -m "set landing page cicd required bootstrap variables"
git push

Step 3 - Deploy the app

Click to go through this step

Install dependencies

1. Go to the 3-landing-page-cicd folder

   cd source/3-landing-page-cicd/cdk
   

2. Install dependencies

   npm install
   

Deploy the LandingPagePipelineStack

1. Build the CDK application

   npm run build
   

2. Deploy default stack of the CDK application, the LandingPagePipelineStack one.

   cdk deploy --profile cicd
   

Checking your deployment

Click to expand

1. Navigate to your AWS access portal Url and sign in with your Developer user

   

2. Click on the AWS Account card

   

3. Click on the Dev account row to expand it

   

4. Click on the Management console link for the DevOpsAccess permission set

   

5. Seach for the AWS CodePipeline service thanks to the Find Services field

   

6. Click on the LandingPageStackPipeline

   

7. Scroll down to check if the Staging et Prod stages are all green. If they are still in progress, wait until they are green.

   

8. Navigate to your AWS access portal and click on the Staging row to expand it, and click on the Management console link for the ViewOnly permission set

   

9. Seach for the AWS CloudFormation service thanks to the Find Services field

   

10. Click on the Staging-LandingPageStack

    

11. Click on the Outputs tab

    

12. Get the Url of your CloudFront distribution

    

13. Navigate to the Url to validate that it works

    

14. Repeat steps 8 to 13 with the Prod account

Step 4 - Cleanup and Troubleshooting

Click to go through this step

#### Destroy the **LandingPagePipelineStack**

You can easily destroy the LandingPagePipelineStack and free up the deployed AWS resources on the CICD account:

cdk destroy --profile cicd

Deleting the pipeline stack doesn't delete the LandingPageStack from the Staging and Prod accounts. You have to delete them manually whether through the AWS CloudFormation console or the AWS CLI.

Troubleshooting

• If you get a CloudFormation Internal Failure error while deploying the stack, please check you have properly created the GITHUB_TOKEN secret
• If you get an error 400 message as a detailed error message when CodeBuild fails, please check you have properly modify your cdk.json file
• If you get an error message stating Cannot have more thant 1 builds in queue for the account as a detailed error message when CodeBuild fails, please retry the step in CodePipeline. You get this error because your AWS account is new. After a few retry, the limit will automatically increase.