CI/CD with Angular 8, GitHub, and AWS CodePipeline
Automate continuous delivery pipelines for fast and reliable updates
This guide will show you how to build a serverless CI/CD system for your Angular project using AWS CodePipeline to automate your continuous integration and deployment.
- You have an existing Angular 2+ project
- It’s already deployed as a static website in S3
- The source code is in GitHub
!! IMPORTANT: Before you begin, make sure that you’re in the same region as your S3 Bucket !!
Step 1: Create AWS CodePipeline
Choose your pipeline name. This will also create a new role name. For the advanced setting, use the default settings.
Step 2: Select GitHub as Source Provider
Select Github as the source provider and choose the repository and branch that you want to use. For the detection option, make sure that GitHub webhooks is chosen.
Step 3: Add Build Provider
This is a very important step. If you skip this step, you won’t be able to build your app. In other words, this is the “Continuous Integration” stage.
Make sure you select AWS CodeBuild as the build provider.
Clicking Create Project will open up a new page.
Step 3a: Create AWS CodeBuild Project
Choose a new project name for the CodeBuild project.
Use the following settings:
- Managed Image (Environment Image)
- Ubuntu (Operating System)
- Standard (Runtime)
- aws/codebuild/standard:2.0 (Image)
- Always use the latest image for this runtime version (Image Version)
- Create a new service role.
Step 3b: Insert Angular Buildspec Commands
Select “Insert build commands” and “Switch to editor”.
Paste in the following snippet and rename the s3_bucket value.
Completing this will automatically return you to finish configuring your pipeline.
Step 4: Add Deploy Stage S3
Select Amazon S3 as your deploy provider, the region, and the bucket that you’re currently hosting the static website on.
Make sure to check “Extract file before deploy” ✅.
Step 5: Review
In the review stage, make sure that what you have is similar to the screenshot above. There should be something in each step. Create Pipeline to finish the setup — this would automatically trigger the CI/CD!
That’s it! Congrats if you made it through the entire tutorial — this is not easy stuff. You’ve just successfully build a CI/CD for your Angular project with AWS CodePipeline. If there’s an error with your build stage, it might be due to granting permission to modify S3 Buckets for the new roles that were created earlier.
Try giving AWS CodePipeline a shot. If you have another way of doing this or you have any problems with examples above, just drop a comment below to let me know.
Thanks for reading — and be sure to follow me here on Medium for more interesting software engineering articles.
To join our community Slack 🗣️ and read our weekly Faun topics 🗞️, click here⬇