Introduction
In this article, we will understand how to use Azure Repos, CI/CD using Pipeline in Azure DevOps, Hosting the same in Azure App Service. We will create an Angular 10 project from scratch and perform all the steps. This is an end-to-end demo explaining the steps in detail, from creating an Angular project in VS Code to managing the source code in Azure DevOps and performing CI/CD to deploy the same in Azure App Service. We will use the current Azure portal settings which have changed over time.
Prerequisites
- Complete Part 1 and Part 2 of the article before starting this.
- 1 Hr. of your focused time is required to complete all 3 parts.
The entire demo is divided into 3 articles, please find the details below:
Let's continue with Section 5,
Configure CI/ CD for the Project by integrating Azure DevOps with Azure App Service
- Before creating a Pipeline in Azure, lets quickly add the production build command in the angular project we created early on.
- Open the Project in VS Code and open package.json file and add the command "prod-build": "ng build --prod", as shown below:
- Run the prod build command in the terminal, as shown below, to know where the deployment files are created.
- Open the Azure DevOps account where we added our source code earlier in the demo.
- After the build was successful, you can find the deployed files in the dist\AngularAppInAzure folder as shown below. In your case, it will be your project name.
- Stage, commit and push the changes to our remote repository to which our code is connected.
- Click the Source Control option as shown below
- Click + icon to stage and after that provide comment and click the tick icon to commit the changes as shown below
- Next, is to push the code to your remote repository as shown below, click ... icon and push the code.
- We can verify the pushed code by opening the package.json file in remote repository and see the changes reflecting as shown below,
- Now, it's time to configure CI/CD in Azure DevOps. Open Azure DevOps and Click Pipelines option as shown below
- Click Create Pipeline option and click the classic editor link at the bottom of the screen as shown below,
- Choose Azure Repos Git and select the Repository as shown below and then click continue.
- Note
We can also choose GitHub/ Bitbucket if our project is in GitHub/ Bitbucket. the entire process remains the same, except this step.
- Start with an Empty job, click Empty job option as shown below
- Once Empty job is selected, we will find the below screen
- Click the + icon next to Agent job 1 as shown above and Type Node in the search box as shown below and click Add Node.js tool installer.
- After Add, select the Node from the Agent job 1 and change the Version and other options of it as shown below
- Add the second task by again clicking the + icon in Agent job 1, this time search for npm and add the same as shown below
- Select the added npm under Agent job 1 and change the details as shown below,
- Note: Expect the values we are modifying, remaining values will be set to its default values (We don't have to touch it for this demo).
- Add the next task, again search for npm and add the same under the Agent job 1 and set the values as shown below,
- Add one more npm task under Agent job 1 for configuring production build as shown below, just repeat the previous steps
- Important Note: The working folder name should be the location of our package.json file. In this demo, the working folder is the root path, so we are leaving that empty.
- Important Note: Remember early on, we configured the command prod-build in our project and pushed the package.json file to remote repository. Pass that command in the production build task as shown below,
- Next task is to archive the project, click + icon and Type Archive files in the search and add the same as shown below,
- Select the Archive option from the Agent job 1 and configure the values as shown below,
- Note: In the below configuration, Root folder should contain the path of the build output (dist folder), which you can verify when you perform a local build, which we have done earlier in this demo. You can refer back to know the build output folder name for your project. Generally, by default it will be the same name as your project name.
- Add the last task to publish the build, search for publish artifact and Add the same as shown below,
- For publishing an artifact, the default values are applicable for this demo, so no changes.
- Click the Triggers tab and select the Enable Continuous integration option, as shown below.
- Click Save & Queue to complete the process.
- Provide comment and click Save and run option as shown below.
- Wait for few seconds and then refresh your browser to see the Jobs running, as shown below
- We can click on the Agent job 1 to see the details of the execution, which can provide you with some insight on the execution process
- Note: It will take few minutes to complete the entire process, once it is complete you can see the status as success as shown below, and you will also receive a mail on the Build Success.
- Now, we are moving on to our final stage which is Continuous Deployment (CD). Let's configure CD. These involves very simple steps.
- Click Releases option under pipelines and click New pipeline button as shown below,
- After you click New Pipeline, the below template will appear, select Azure App Service deployment and click Apply.
- Provide the Stage name as Production as shown below and close the Stage window- We can give a meaningful Stage name.
- Next, click inside the Production Box which says "1 job, 1 task" as shown below
- After opening that, we have to map all the Azure App service details here which we created earlier in the Azure Portal. These values will be automatically available as the user account is mapped to that Azure portal account.
- When we select the Free Trial option under Azure subscription, it may ask to Authorize as shown below, please click the Authorize button and login with your Azure portal account. If the authorization is done already, you will not be prompted to Authorize
- On successful authorization, we can map the other values as shown below, ensure you map the App Service which we created in the Azure portal and click Save as shown below:
- When you click Save, you will be prompted with the below dialog box, click Ok on the same. We are mapping our folder path in Azure App Service where the code will be deployed.
- Change the name of the pipeline and save the same as shown below:
- Next step is to click the tan which says Pipeline and click Add an Artifact option as shown below
- Choose the Source (build pipeline) which we already created and click Add, as shown below
- Next Step is to enable the Continuous deployment trigger as shown below, this will ensure whenever a build is successful, automatically it will start the release to the production environment.
- The below step is not required, just for your knowledge purpose. We can also schedule the release by clicking the Pre-deployment conditions as shown below. you can explore Azure DevOps to learn more it. There is an approval process before the build and much more. But for our demo, we are not using it.
- At last, click Save and complete the process as shown below:
- Finally, we need to push some code from VS Code to remote repository, which will trigger the (Build Pipeline) CI process automatically and then completes the (Release Pipeline) CD process automatically and the changes will be available in the LIVE URL.
- We can find the Live URL from the Azure Portal under App Service as shown below,
- https://app-techinjection-live.azurewebsites.net
- Adding a line of code in the project and then stage, commit and push the code to azure remote repository to trigger the CI/CD Process automatically, please see below,
- The explanation of commit and push to remote repository is given earlier in the demo, refer to that.
- Note: changed the title property in app.component.ts
- Wait for few seconds and refresh the Azure pipelines screen, you will find the below status. We can see the build is automatically started.
- The build will be completed in few minutes. Once the build completes, the release pipeline will start the deployment automatically.
- Once the CI is completed, you can navigate to Releases option to see the CD happening as shown below.
- Click on the Release-1 option to see the complete details of the Release pipeline, as shown below.
- Now, we can open the browser and type the LIVE URL to see the hosted app. Please note the changes that we did on the app.
Well, we are done. So from now on, any changes done on the code and pushed to remote repository, it will trigger the pipelines and the changes can be seen in LIVE URL. Please note that you can learn more on Azure Pipelines to manage pipelines more effectively.
Please refer to Part 1 and Part 2 of this blog to complete the entire demo:
Thanks. I really appreciate everyone for reading through this article.