To deploy an application to an Azure Web App using GitHub Actions, you’ll need to create a workflow file in your GitHub repository. Here’s a step-by-step guide to set up a GitHub Actions workflow for deploying to an Azure Web App:
1. Create a Service Principal in Azure:
- Navigate to the Azure portal and go to your Azure Active Directory.
- Click on "App registrations" and then "New registration."
- Give your application a name and register it.
- After registration, go to "Certificates & secrets" and create a new client secret.
- Go to "Overview" to get your Application (client) ID and Directory (tenant) ID.
- Go to the Azure portal's "Subscriptions" section, find your subscription, and click on "Access control (IAM)." Assign the "Contributor" role to the service principal.
2. Add Secrets to GitHub Repository:
- Go to your GitHub repository.
- Navigate to "Settings" -> "Secrets and variables" -> "Actions."
- Add the following secrets:
AZURE_CREDENTIALS: JSON containing the service principal credentials. Format it as follows:
json
{
"clientId": "<YOUR_CLIENT_ID>",
"clientSecret": "<YOUR_CLIENT_SECRET>",
"subscriptionId": "<YOUR_SUBSCRIPTION_ID>",
"tenantId": "<YOUR_TENANT_ID>"
}
AZURE_WEBAPP_NAME: Your Azure Web App name.
AZURE_WEBAPP_PACKAGE_PATH: Path to the package or build output (e.g., build/).
3. Create a GitHub Actions Workflow File:
- In your GitHub repository, create a directory called .github/workflows if it doesn’t exist.
- Create a new YAML file in the .github/workflows directory (e.g., azure-webapp-deploy.yml).
4. Define the Workflow: Here’s a basic example of a GitHub Actions workflow to deploy a web app to Azure:
yaml
name: Deploy to Azure Web App
on:
push:
branches:
- main # Deploy on changes to the main branch
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '16' # Specify your Node.js version
- name: Install dependencies
run: npm install
- name: Build application
run: npm run build
- name: Deploy to Azure Web App
uses: azure/webapps-deploy@v2
with:
app-name: ${{ secrets.AZURE_WEBAPP_NAME }}
publish-profile: ${{ secrets.AZURE_CREDENTIALS }}
package: ${{ secrets.AZURE_WEBAPP_PACKAGE_PATH }}
Adjust the Node.js version and commands according to your application’s requirements.
5. Commit and Push:
- Commit the .github/workflows/azure-webapp-deploy.yml file to your repository.
- Push your changes to the main branch.
Monitor the Deployment:
- Go to the "Actions" tab in your GitHub repository to monitor the progress of the workflow.
- Check the Azure portal to ensure that your web app has been updated.
This setup ensures that every time you push to the main branch, GitHub Actions will build and deploy your application to the specified Azure Web App. Adjust the workflow file as needed for your specific build and deployment processes.To deploy an application to an Azure Web App using GitHub Actions, you’ll need to create a workflow file in your GitHub repository. Here’s a step-by-step guide to set up a GitHub Actions workflow for deploying to an Azure Web App:
1. Create a Service Principal in Azure:
- Navigate to the Azure portal and go to your Azure Active Directory.
- Click on "App registrations" and then "New registration."
- Give your application a name and register it.
- After registration, go to "Certificates & secrets" and create a new client secret.
- Go to "Overview" to get your Application (client) ID and Directory (tenant) ID.
- Go to the Azure portal's "Subscriptions" section, find your subscription, and click on "Access control (IAM)." Assign the "Contributor" role to the service principal.
2. Add Secrets to GitHub Repository:
- Go to your GitHub repository.
- Navigate to "Settings" -> "Secrets and variables" -> "Actions."
- Add the following secrets:
AZURE_CREDENTIALS: JSON containing the service principal credentials. Format it as follows:
json
{
"clientId": "<YOUR_CLIENT_ID>",
"clientSecret": "<YOUR_CLIENT_SECRET>",
"subscriptionId": "<YOUR_SUBSCRIPTION_ID>",
"tenantId": "<YOUR_TENANT_ID>"
}
AZURE_WEBAPP_NAME: Your Azure Web App name.
AZURE_WEBAPP_PACKAGE_PATH: Path to the package or build output (e.g., build/).
3. Create a GitHub Actions Workflow File:
- In your GitHub repository, create a directory called .github/workflows if it doesn’t exist.
- Create a new YAML file in the .github/workflows directory (e.g., azure-webapp-deploy.yml).
4. Define the Workflow: Here’s a basic example of a GitHub Actions workflow to deploy a web app to Azure:
yaml
name: Deploy to Azure Web App
on:
push:
branches:
- main # Deploy on changes to the main branch
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '16' # Specify your Node.js version
- name: Install dependencies
run: npm install
- name: Build application
run: npm run build
- name: Deploy to Azure Web App
uses: azure/webapps-deploy@v2
with:
app-name: ${{ secrets.AZURE_WEBAPP_NAME }}
publish-profile: ${{ secrets.AZURE_CREDENTIALS }}
package: ${{ secrets.AZURE_WEBAPP_PACKAGE_PATH }}
Adjust the Node.js version and commands according to your application’s requirements.
Commit and Push:
- Commit the .github/workflows/azure-webapp-deploy.yml file to your repository.
- Push your changes to the main branch.
Monitor the Deployment:
- Go to the "Actions" tab in your GitHub repository to monitor the progress of the workflow.
- Check the Azure portal to ensure that your web app has been updated.
This setup ensures that every time you push to the main branch, GitHub Actions will build and deploy your application to the specified Azure Web App. Adjust the workflow file as needed for your specific build and deployment processes.
Yes, we can also use the publish profile content from Azure as a secret in GitHub Actions for deploying to an Azure Web App. Using the publish profile is a common approach, especially when dealing with Azure App Services.
Here's how you can set up your GitHub Actions workflow using the publish profile method:
Steps to Deploy Using Publish Profile
Get the Publish Profile from Azure:
- Go to the Azure portal and navigate to your Azure Web App.
- Under the "Deployment" section, click on "Deployment Center."
- In the "Deployment Center," select "FTP/Credentials" or "Publish Profile" (the exact name might vary depending on the portal version).
- Download the publish profile file (which is a .publishsettings file).
Add the Publish Profile Content to GitHub Secrets:
- Open the .publishsettings file you downloaded in a text editor.
- Go to your GitHub repository.
- Navigate to "Settings" -> "Secrets and variables" -> "Actions."
- Click "New repository secret" and add a secret with the following details:
- Name: AZURE_WEBAPP_PUBLISH_PROFILE
- Value: Paste the entire content of the .publishsettings file here.
for .yaml sample click here.
.gif)
0 Comments