CI/CD with Angular 8, GitHub, and AWS CodePipeline

Automate continuous delivery pipelines for fast and reliable updates

Songtham Tung
Sep 10 · 4 min read
Original Photo by Rodion Kutsaev on Unsplash

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.

Prerequisite


!! IMPORTANT: Before you begin, make sure that you’re in the same region as your S3 Bucket !!

Step 1: Create AWS CodePipeline

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 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.

Add Build Stage and Create Project

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

AWS CodeBuild

Choose a new project name for the CodeBuild project.

Use the following settings:

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

Add Deploy Stage

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

Review Pipeline

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!

Finished! 😙

CI/CD with AWS CodePipeline

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.

Follow us on Twitter 🐦 and Facebook 👥 and join our Facebook Group 💬.

To join our community Slack 🗣️ and read our weekly Faun topics 🗞️, click here⬇

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇

Faun

The Must-Read Publication for Aspiring Developers & DevOps Enthusiasts

Songtham Tung

Written by

Technical Product Director @ Geddit | B2B SaaS | SF ✈️ BKK

Faun

Faun

The Must-Read Publication for Aspiring Developers & DevOps Enthusiasts

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade