Content Introduction Prerequisites Virtual Host Redirect to HTTPS Conclusion Introduction To secure the data transfer redirecting the HTTP traffic to...
Read More
Introduction
AWS CodePipeline is a fully managed continuous delivery solution provided by Aws. It aids in the automation of release pipelines, allowing for faster application and infrastructure updates. The different stages of a software release process can be customized. The AWS CodePipeline automates the build, test, and deploy phases of the release every time the code is updated.
Prerequisites
- AWS account
- IAM user in AWS account
- IAM user must have permission to access Code Commit, Code Build, Code Deploy, CodePipeline, S3 Bucket.
- An IAM role to define Code Pipeline permission.
Steps to Create AWS CodePipeline for Angular
Log in to the AWS console with a root account or with an IAM user who has permission to access all the services required in Code Pipeline. Navigate to the AWS Code Commit from the Services.
- Make sure the latest code is pushed to your Code Commit repository.
Navigate to the AWS Code Pipeline from the Services or click on the pipelines from the left Navigation pane in the Code Commit window and click on the Create Pipeline button.
A new create pipeline window will appear.
- Give a proper name to your pipeline in the Pipeline name section.
- Select a New service role radio button. It will automatically create a role as per the requirement.
- Leave other settings the same as default and click on Next.
A Source Stage window will appear.
We need to select the option from where we get the code for the application. We will select AWS Code Commit.
The detail window will open to add the information regarding the Code Commit repository.
- Select the Repository name from the drop-down menu.
- Select the Branch name of the repository (by default it is master)
- Leave other settings the same as default and click on Next.
The Code Build Stage window will open.
- Select the Build provider as AWS CodeBuild from the drop-down menu.
- The detail page will open to add information about the Code Build. Select the region from the drop-down menu(Where you want to create a build for the project).
- Click on the Create Project to build the Project.
A new pop-up window will appear to create a build for the project. Add the project detail as per the requirement.
- Give a proper name in the Project name. (e.g: zehncloud-demo-codebuild)
- Give a Description of the project configuration(optional).
- In the Environment section select Ubuntu as an Operating System. Leave other settings the same as the default.
After selecting Ubuntu as an Operating system detail view is open to adding additional detail.
- Select Standard as a Runtime.
- Select the latest image from the drop-down menu in the Image.
- Select Environment type as Linus from the drop-down menu.
- Select the New service role radio button to create the role for code build. Leave other settings the same as the default.
In the Buildspec section, we need to add the commands for which language we are creating the build and where we want to deploy it. Also, additional commands are used if required in pre-build and post-build. Here, I am using the build command for the angular application.
- Select the Insert build command radio button.
- Use the below code in the build command.
- Change the bucket name with your S3 bucket name.
version: 0.2
env:
variables:
S3_BUCKET: "zehncloud.com"
phases:
install:
runtime-versions:
nodejs: 10
pre_build:
commands:
- echo Installing source NPM dependencies...
- npm install
- npm install -g @angular/cli
build:
commands:
- echo Build started on `date`
- ng build --prod --base-href=./
post_build:
commands:
- aws s3 cp dist s3://${S3_BUCKET} --recursive
- echo Build completed on `date`
artifacts:
files:
- '**/*'
base-directory: 'dist*'
discard-paths: yes
After adding all the details in the build project leave other options the same as default and click on Continue to CodePipeline button from the bottom.
The window will automatically close and save the project.
After closing the project window the successful message will appear for creating the project in the build stage window.
- Select the Single build radio button from the Build type and click on the Next button.
A new add deploy stage window will appear. We need to select a deploy provider where the code will be deployed after the build.
- In the Deploy provider select the Amazon S3.
- Select the Region from the drop-down menu where the bucket is created.
- Select the Bucket name from the drop-down menu.
- Click on the check box button Extract the file before deploy and click on Next.
A review window will open to confirm all the added details are correct or not.
You can scroll down to review the complete code pipeline details.
- Click on the Create pipeline button to start the pipeline process.
The Pipeline is successful and Deploy the code into the S3 bucket.
Note: Sometimes the service role created by the build stage not give permission to access the s3 bucket and due to that the build stage will fail and not get completed. If you face the same issue go to the I am role and review the policy created by the build stage and allow permission to access the S3 bucket and retry to complete the code pipeline.
Conclusion
In this article, we have created AWS CodePipeline for the Angular application. Where if any changes are occurred in the code commit repository the codePipeline automatically starts and creates a build for the latest code and push to the S3 bucket.
Related Posts
How to Build and Deploy Angular Code to S3 Bucket using GitHub Actions
Content Introduction Requirement Getting Started Conclusion Introduction Angular is an open-source web application framework. It is a TypeScript-based free and development...
Read More
by Zehntech