Set Up a CI/CD Pipeline for An Angular 7 Application From Azure DevOps to AWS S3

Today we are going to see how you can set up a CI pipeline over Azure DevOps with CD (continuous deployment) to AWS using Azure DevOps.

As we all know, Azure DevOps provides developer services for smarter collaboration between developers and faster delivery of the project. This means it can be used to manage the sprints and the code. One of the most eye-catching features is the configuration of the build and release of the projects.

Without discussing much theory, let's see the minimum requirements and how you can set up your own pipeline to easily manage the build and release part of the software delivery.

Starting with the minimum requirements:

• 1) Azure DevOps account (A free account would do for the example, but if you want to run the Build and Release task for multiple projects simultaneously, then you have to pay for the agents)

• 2) AWS account

• 3) Sample Angular 7 application

The CI/CD pipeline configuration is divided into steps:

• 1) Configuring AWS S3 to serve the Angular application

• 2) Configuring the Build pipeline for the application on Azure DevOps

• 3) Configuring the Release pipeline for the application on Azure DevOps

•    4) Authenticating Azure DevOps to upload files in the S3 bucket that would host the Angular application

We will be looking into the S3 configuration and the Build configuration on Azure DevOps in this article.
I will be writing the release and authentication part in an upcoming article just after this.

To Enable Website Hosting for An Amazon S3 Bucket

1. Sign in to the AWS Management Console and open the Amazon S3 console.
2. In the list, choose the bucket that you want to use for your hosted website.
3. Choose the Properties tab.
4. Choose Static website hosting, and then choose Use this bucket to host a website.
5. You are prompted to provide the index document and any optional error documents and redirection rules that are needed.
6. When you configure a bucket as a website, you must make the objects that you want to serve publicly readable.
7. Click into your bucket.
8. Select the “Permissions” tab at the top.
9. Under “Public Access Settings,” we want to click “Edit.”
10. Change “Block new public bucket policies,” “Block public and cross-account access if bucket has public policies,” and “Block new public ACLs and uploading public objects,” to be False and Save.

Configure the Build Pipeline for Angular Application on Azure DevOps

1. Go to the Build section of the application as shown below.
2. Click on "New" and "New Build Pipeline" from the dropdown
3. At the bottom select the "Use the classic editor" option.
4. Select the Source, Repository and the branch from which you want the application to build and click "Continue."
5. Select the empty job option at the top.
6. Now add a task as shown below.
7. Search for "Node" and add the task Node.js tool installer from the list of available options
   • Click on the added task in the left pane and change the version spec to the Node version you are using to develop the application (make sure the task version is 1.* at the top)
8. Add another task and search for "npm" and then add the npm task to the pipeline
   • Click on the newly-created npm task and under the command, select "Install" (make sure the task version is 1.* at the top)
9. Add another task similar to step 17 (npm task)
   • This time select the custom option for command and rename the task to "ng build."
   • In the Command and arguments use  run build  or if you --prod   or --aot flag from the command line on your local system you have to configure the package.json of your application. For this insert the line under scripts array in your package.json file.
     
10. Add another task and search for "Copy" and add the task "Copy Files" from the list of available options.
    • In the source folder type dist 
    • In the contents put  **/**  (without the single quotes)
    • In the target folder type  {RepositoryName}/dist 
11. Add the last task by searching for "publish" and add the task "Publish pipeline artifact" from the list of available options.
    • In the file or directory path type "dist".

That's it for the Build part of the article. In the end, the configuration should look something like this.That's it! you can now use the Save & Queue button at the top to see that you have successfully learned how you can implement CI for your application in Azure Devops.

I will start writing the second part for the process in a seperate article soon.

I hope this post was helpful and that you learned something new today. Thank you for reading and happy coding.