Learn how to quickly spin up an Angular application and deploy it with Amazon Cloud Development Kit (CDK).
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.
$ npm install -g @angular/cli $ npm install -g aws-cdk
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
Navigate to the
angular directory and run
Navigate to the Route 53 dashboard and create a Hosted Zone.
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.
- Open your Route 53 hosted zone and copy 4 nameservers from the NS record value.
- In your current DNS provider, open your domain name and replace its name servers with those you just copied.
- 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.
What we have here is an empty Angular project, but it's an app, and it's deployable!
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)?
y to continue the deployment.
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.
Build a CI/CD pipeline that deploys this project on merging to master.
Any requests? Contact me.