deploy-angular-with-cdk

Learn how to quickly spin up an Angular application and deploy it with Amazon Cloud Development Kit (CDK).

This project assumes you have some knowledge of JavaScript and have installed the latest version of Node in your development environment.

It also assumes you have installed the AWS CLI (On Mac, it's easy with Homebrew). And configured it with credentials.

This project uses a static site example project created by AWS as a starting place.

Install

Angular CLI and AWS CDK for TypeScript must be installed globally with NPM.

$ npm install -g @angular/cli
$ npm install -g aws-cdk

Configure

AWS Credentials

Navigate to the IAM console and create a new user for your project (or use an existing one) with programmatic access. The security credentials tab will let you access your Access key ID and Secret Access Key.

Set credentials in the AWS credentials profile file on your local system, located at:

~/.aws/credentials on Linux, OS X, or Unix C:\Users\USERNAME\.aws\credentials on Windows

This file contains lines in the following format:

[default]
AWS_ACCESS_KEY_ID = your_access_key_id
AWS_SECRET_ACCESS_KEY = your_secret_access_key

AWS CDK Project

Navigate to the root directory of project project and run:

$ npm install -g aws-cdk
$ npm install
$ npm run build

Angular Project

Navigate to the angular directory and run npm i

DNS

Navigate to the Route 53 dashboard and create a Hosted Zone.

Configure CDK Context

Copy your hosted zone ID and replace the zone information in cdk.context.json. Keep the period at the end of your hosted zone name.

{
  "hosted-zone:account=<youraccountid>:domainName=<yourdomain>:region=us-east-1": {
    "Id": "/hostedzone/<yourzoneid>",
    "Name": "<yourzonedomainname>."
  }
}

DNS Migration

In order for users to access this project, you will need your domain name hosted in Route 53. That will take some time to propogate, so I suggest completing the steps below immediately before continuing.

1. Open your Route 53 hosted zone and copy 4 nameservers from the NS record value.
2. In your current DNS provider, open your domain name and replace its name servers with those you just copied.
3. Save your changes and wait for migration to complete (maybe 48 hours).

More details on this process are available in the article, Making Route 53 the DNS Service for an Inactive Domain. If you have an existing website, this process is more complicated.

Deploy

What we have here is an empty Angular project, but it's an app, and it's deployable!

First Run

Find your AWS account number by navigating to the Support page in the console and looking at the top of the left column.

If this is your first CDK project using this AWS account, run the following:

$ CDK_DEFAULT_ACCOUNT=your_account_number CDK_DEFAULT_REGION=your_region cdk bootstrap -c domain=your_domain -c subdomain=your_subdomain

For example, the actual command might be:

CDK_DEFAULT_ACCOUNT=12345678901 CDK_DEFAULT_REGION=us-east-1 cdk bootstrap -c domain=example.com -c subdomain=www

To Publish Changes

$ npm run build && CDK_DEFAULT_ACCOUNT=your_account_number CDK_DEFAULT_REGION=your_region cdk deploy -c domain=mystaticsite.com -c subdomain=www

Given the hosted zone I created for becomingwhatweare.com, my deploy command will be:

$ npm run build && CDK_DEFAULT_ACCOUNT=12345678901 CDK_DEFAULT_REGION=us-east-1 cdk deploy -c domain=becomingwhatweare.com -c subdomain=angular-example

As the deployment runs, you will be asked:

Do you wish to deploy these changes (y/N)?

Enter y to continue the deployment.

Be Patient

Your first deployment requires quite a bit of infrastructure to be provisioned and configured. It may take more than a half hour in some cases.

Next Steps

Build a CI/CD pipeline that deploys this project on merging to master.

Any requests? Contact me.