A Step-by-Step Guide to Deploying Next.js to Azure App Service Using GitHub Action

workflow Diagram

Step 1: Local Development

Create a Next app.

1. Setup a local environment starting with NPX:

 npx create-next-app@latest  

• This will prompt you for an application name – which will create a new directory for the application with the name you choose:

? What is your project named? … local

After this it will install all needed dependencies into said folder.

• Once the installation is done, cd into the new folder and then start the server using:

Browse the site with http://localhost:3000 to get the default page

 Npm run dev  

Step 2:

Create GitHub repository.

In your local terminal run the following commands in order to Push to Github  

 git add .  

   git commit -m "Initial Commit"  

 git remote add  

  git push  

Step 4:

Create an App Service

Let’s choose Public with Code, Node 18 LTS as runtime, Linux as Operating System,

Let’s click the “+ Create” button and choose “+ Web App”.

Step 5:

You can quickly get started with GitHub Actions by using the App Service Deployment Center. This will automatically generate a workflow file based on your application stack and commit it to your GitHub repository in the root directory in the folder. github. You can deploy a workflow manually using deployment credentials.

                How to call GitHub action with azure app service

Step 1:

Download the (Download publish profile save local disk.)

After downloading and copy.

Step 2:

Right side core clicks settings

Step 3:

Under security click secrets and variable

Choose actions and click.

Step 4:

Crete new repository secrete.

GitHub

Step 5

Go to the workflow file, we should modify the workflow to make the GitHub.

Modify Workflow

We will modify the .github/workflows

Use this yml file.

  name: Deploy to Azure App Service

on:
  push: 
    branches: 
      - master

jobs: 
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Source
        uses: actions/checkout@v3
      - name: Setup Node.js version
        uses: actions/setup-node@v4
        with: 
          node-version: '18.x'
      - name: Install Dependencies
        run: npm install
      - name: Deploy to Azure App Service
        uses: azure/webapps-deploy@v2
        with:
          app-name: nextjsgit
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: .   

Step 7

Try Deploy.

Now we can try to deploy by manually triggering or pushing the code to the selected branch.

When successful, it will mention the domain that you can use.

After the deployment, the application should now be available to browse.

NOTE: To use yarn, simply switch out npm for it in the workflow file