How to deploy Angular + Java Springboot into Azure app service using Azure Release Pipeline ?

Hi anupam2706,

Deploying an Angular frontend and a Java Spring Boot backend to Azure App Service using Azure DevOps Release Pipeline involves a few steps. Here's a structured guide to help you achieve this:

Step-by-Step Guide to Deploy Angular + Java Spring Boot to Azure App Service

Prerequisites

1. Azure DevOps Account: Ensure you have an Azure DevOps account.
2. Azure App Service: Create two Azure App Service instances, one for the Angular frontend and one for the Java Spring Boot backend.
3. JFrog Artifactory: Ensure artifacts are correctly published to JFrog.

Step 1: Set Up Release Pipeline in Azure DevOps

1.1. Create a New Release Pipeline

1. Go to your Azure DevOps project.
2. Navigate to Pipelines > Releases.
3. Click on New pipeline.

1.2. Add Artifacts

1. Click Add an artifact.
2. Select JFrog Artifactory as the source type.
3. Choose the repository where your Angular and Spring Boot artifacts are stored.
4. Repeat this step to add both frontend (dist folder) and backend (jar file) artifacts.

1.3. Define Stages

1. Click on Add a stage and choose the Empty job template.
2. Name the stage (e.g., "Deploy Angular Frontend").
3. Add another stage for the backend deployment (e.g., "Deploy Spring Boot Backend").

Step 2: Deploy Angular Frontend

2.1. Add Deployment Task for Angular

1. In the "Deploy Angular Frontend" stage, click on Tasks.

2. Add a new task by clicking on the + button.

3. Search for Extract files and add the task to extract the tar.gz file.

   • Archive file patterns: $(System.DefaultWorkingDirectory)/**/*.tar.gz
   • Destination folder: $(System.DefaultWorkingDirectory)/frontend

4. Add an Azure App Service Deploy task.

   • Azure subscription: Select your subscription.
   • App type: Web App on Linux.
   • App name: Your frontend App Service name.
   • Package or folder: $(System.DefaultWorkingDirectory)/frontend

Step 3: Deploy Java Spring Boot Backend

3.1. Add Deployment Task for Spring Boot

1. In the "Deploy Spring Boot Backend" stage, click on Tasks.
2. Add an Azure App Service Deploy task.
   • Azure subscription: Select your subscription.
   • App type: Web App.
   • App name: Your backend App Service name.
   • Package or folder: $(System.DefaultWorkingDirectory)/**/*.jar

Step 4: Configure and Trigger the Release

4.1. Save and Create Release

1. Click Save to save the release pipeline.
2. Click Create release to start the deployment process.
3. Monitor the release pipeline for any errors and ensure both the frontend and backend are deployed successfully.

Additional Resources

• Official Documentation: https://docs.microsoft.com/en-us/azure/devops/pipelines/ecosystems/java-spring-boot?view=azure-devops
• Comprehensive Guide: https://dev.to/azure/using-azure-pipelines-to-build-test-and-deploy-a-spring-boot-and-angular-applic...

Conclusion

By following these steps, you should be able to deploy your Angular frontend and Java Spring Boot backend to Azure App Service using Azure DevOps Release Pipeline. If you encounter any issues or have further questions, feel free to ask.