Deploying a frontend application with Azure Static Web Apps integrated with Azure DevOps leverages the power of continuous integration and continuous deployment (CI/CD). This guide will walk you through the detailed steps to achieve a seamless deployment of your Vue or React application.
Step 1: Log into Azure Portal
- Access the Azure Portal.
- Navigate to App Services and select Static Web App.
Step 2: Select or Create a Resource Group
- Choose an existing resource group if available.
- To create a new resource group, click on Create new. Use a clear and consistent naming convention (e.g.,
rg-myproject-prod
).
Step 3: Configure Static Web App
- Enter a unique name for your Static Web App.
- Choose the appropriate hosting plan:
- Free
- Standard
- Dedicated Click Compare plans to understand the differences and select the best option.
Step 4: Set Up Deployment with Azure DevOps
- Under Deployment details, select Azure DevOps.
- Authenticate and choose your Azure DevOps organization.
- Select the project, repository, and branch for the deployment.
Step 5: Configure Build Details
- Select from the available build presets or configure a custom build preset.
- Define the App location:
-
/
if the code is in the root directory -
/app
if the code is in a folder namedapp
-
- Specify the API location:
-
/api
if you have Azure Functions code in anapi
folder.
-
- Set the Output location:
- For example, if the build output is in
build
within the app directory, set it tobuild
.
- For example, if the build output is in
Step 6: Advanced Deployment Settings
- If uncertain about some deployment details, select Other to allow post-deployment adjustments.
- Click Next: Advanced to choose the region for Azure Functions and configure staging environments.
Step 7: Add Tags and Review
- Add relevant tags for resource management and tracking.
- Click Next to review all configurations.
- If everything is correct, click Create to initiate the deployment.
Step 8: Deployment Process
- You will be redirected to a deployment page.
- Wait for the deployment to complete. This can take a few minutes.
- Once completed, a notification saying "Your Deployment is complete" will appear.
- Click Go to Resource to navigate to your newly created Static Web App.
Step 9: Verify Azure DevOps Pipeline
- Navigate to your Azure DevOps project.
- Inspect the pipeline for any failures or issues.
- Click on Deployment history to view Azure DevOps pipeline runs.
- Your repository will automatically be added with a YAML file. Review and modify this file to:
- Add deployment approval checks.
- Configure different deployment slots (e.g., staging and production).
- To add a staging slot, include
deployment_environment: staging
under theAzureStaticWebApp@0
task in the YAML file.
Step 10: Verify and Access Your Deployed App
- Once the pipeline run is successful, return to the Azure portal.
- Navigate to Static Web Apps and select your deployed application.
- In the Overview section, click on the provided URL to view your web application.
Conclusion
Deploying a Vue or React application using Azure Static Web Apps combined with Azure DevOps provides a robust CI/CD pipeline, ensuring your app remains up-to-date with the latest code changes. This integration facilitates streamlined deployments, efficient resource management, and enhanced collaboration within your development team.
References
This comprehensive deployment approach not only simplifies the process but also ensures a scalable and maintainable solution for modern web applications.
Sample .yaml
for reference
name: Azure Static Web Apps CI/CD
pr:
branches:
include:
- main
trigger:
branches:
include:
- main
jobs:
- job: build_and_deploy_job
displayName: Build and Deploy Job
condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
pool:
vmImage: ubuntu-latest
variables:
- group: Azure-Static-Web-Apps
steps:
- checkout: self
submodules: true
- task: AzureStaticWebApp@0
inputs:
azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_BAY_02378850F)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
Top comments (0)