Forum Discussion

anupam2706's avatar
anupam2706
Copper Contributor
Jun 25, 2024

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

Hi everyone. Good morning/evening.


We are working on developing a new POC application & need some help with the Azure CI/CD pipeline. Our application is based on frontend as angular & backend as java springboot. We were able to run the build pipeline successfully and publish the artifacts to JFrog artifactory. However, the next challenge we have is how to deploy it to an Azure App Service.

 

Our frontend is running on Angular 16 and backend is java springboot. We have 2 separate artifacts, frontend is generating a dist folder wrapped with tar.gz file & backend is generating a jar file. How can we deploy this together into an Azure App Service using azure devops release pipeline?

  • DTB's avatar
    DTB
    Iron Contributor
    Jun 25, 2024

    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

     

    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.

Resources