Angular application CI/CD AWS CodePipeline in S3 Step-by-Step Tutorial

hey everyone in this video we are going to be building a crcd pipeline for an angular application using the aws code pipeline let's take a look at what our deployment architecture is going to look like we'll be using an angular application located in a github repository then we'll configure the aws code pipeline so that whenever we commit any changes to our angular application aws code pipeline will detect the changes and will start the deployment process to our s3 bucket let's get started in our angular application we need to create a yaml file in the root directory of our application and the name must be buildspec.yml this file will contain all the specifications and instruction for the build stage of our code pipeline the environment variables in our ktc s3 bucket name the node.js version the installation of the angular cli and all other dependencies the build command and also the base directory now we have to save the file commit the changes and push it to our remote repository in our aws management console search for the s3 service we are going to create a new bucket give it a name and we need to disable block or public access so we can access it from anywhere then click i acknowledge and create bucket now that our bucket is created let's open it and we need to go to the properties tab scrolling down to the bottom of the page which is a section static website hosting which is currently disabled click add to enable it here we need to specify the default page of our application in our case will be index.html and the errors page.html in the permissions tab we also need to add a bucket policy to make this bucket access public in the aws s3 documentation web page we can find an example of this bucket policy which we will use copy and paste the content from the documentation in our bucket policy configuration then replace the resource example with our bucket arn name and click save changes now as you can see in the permission overview our bucket has public access going back to properties tab the in the static website hosting we can open the url where our page will be located if we click open we'll see an 404 not found message because we haven't uploaded anything yet now it's time to configure our code pipeline in the management console search for the code pipeline service here we are going to create a new pipeline specify the name and leave the default configuration settings in the source stage we need to configure a new connection with our github repository we will wish github version 2 we need to create a new connection choose a name and click connect to github we need to install a new app and click connect in this window you can choose all the repository from your github or select an individual one in my case i will choose only one now we can connect with our repository as you can see we are ready to connect and we can select the repository name and the branch name that we are going to use read the default selection and click next in the build stage we will use code build aws code build and will create a new project we need to specify a name in the environment section we will use a managed image ubuntu is an operating system standard runtime the latest image linux as an environment type will create a new service role and will with the build spec yaml files that we've previously previously created in our angular application and we'll also use a cloud watch to store and see our logs because in our build spec file we have declared an environment variable for the bucket name here we need to declare the variable so we'll click on the add environment variable button we will copy from our build spec file the variable name then from our s3 bucket we will copy the arn for our bucket and paste it into the value input field now we are into our last stage the deployment stage as a deploy provider we will use the amazon s3 service we will select our packet name and very important click on extract file before deploy and here we can see a review of our configuration which is ready to start in the next page we'll see all the pipeline stages and the status for every stage our first stage is a source stage and here the pipeline will connect to our github repository and we'll download our last commit under source we can see our last commit id and message now that the source stage was successful the pipeline will enter the build stage we'll open up the build spec file and execute all the instructions by clicking on the detail link we can see the entire log of the building stage because we have a successful build stage the pipeline will enter into the deploy stage in this case we'll copy all the generated files from the this directory into our s3 bucket after completion we can open up our s3 bucket go into properties tab static website hosting and we can click on the url to see our angular application deployed now we are going to make a small change into our angular application we will have this title in the index html page and commit the changes into our github repository the code pipeline will detect the changes will pick up our last commit build the application and execute the deployment into the h3 bucket let's see it in action now let's refresh our web page and as you can see we have a new title all we had to do was to commit the changes i hope this tutorial has been informative for you and i would like to thank you for watching

Channel: IBERCODE

Views: 1,294

Keywords: angular cicd, angular aws cicd, angular aws codepipeline, aws codepipeline, angular continuous integration continuous deployment

Id: i8NyeqSc4GI

Length: 13min 35sec (815 seconds)

Published: Mon Mar 01 2021