Convention over configuration based AWS Blueprint for running Angular web apps in AWS driven by CI/CD and CloudFormation.
- Multi-stage, feature branch, CI/CD driven via CodePipeline and Codebuild
- Angular assets gzipped & CDN cached and hosted from S3 origin - supporting Angular routing
- No-maintence, free HTTPS via ACM
- Root domain apex support with redirection
- Local HTTPS support via ngrok
- Node module vendoring (aka commit
node_modules
) with yarn autoclean
- Create a github access token. This token will be used by the CI/CD to pull code. Required scopes:
admin:repo_hook, repo
- An SNS topic for CI/CD code promotion approvals. Subscribe your email address to it.
- Yarn
- Optional: free ngrok account required for local HTTPS support
make install
make run/local-webapp
- Optonal: For local HTTPS, in another terminal tab:
make run/ngrok-webapp
(free ngrok account required).
- Set values in aws/cloudformation/parameters/*.json. The CI/CD CodePipeline will pass these into the cloud formation template (aws/cloudformation/template.yml) for each stage stack that is created. Typically the values are the same for each
.json
file except forStageName
. SettingCreateCloudFront
tofalse
is helpful early on to bypass slow CDN creation while you are working out kinks. - Create a new CloudFormation stack using aws/cloudformation/pipeline.yml. Stack naming convention:
[repo]--[branch]--webapp--cicd
. Ex:abp-angular--master--webapp-cicd
. Thispipeline.yml
creates a CodePipeline that is your CI/CD. - Do a
git push
and watch the newly created CodePipeline. As each stage in the pipeline completes, look at theOutputs
tab of the executed CloudFormation changeset for theAppURL
. Don't seeAppURL
? Make sureCreateCloudFront
istrue
in aws/cloudformation/parameters/*.json (justgit push
after changing it totrue
).
Optional: setup root apex redirect (both HTTP&HTTPS). Ex: rynop.com
-> https://www.rynop.com
by following my directions here, jump right to step 5.