Azure

How to deploy Nuxt to Azure Static Web Apps or Azure Functions.

Azure Functions

Support for serverless SSR build
No configuration required
Static assets served from Azure Function

Setup

nuxt.config.js|ts
export default {
  nitro: {
    preset: 'azure_functions'
  }
}
If you encounter any issues, please ensure you're using a Node.js 14+ runtime. You can find more information about how to set the Node version in the Azure docs .

Local preview

Install Azure Functions Core Tools if you want to test locally.

You can invoke a development environment from the serverless directory.

NITRO_PRESET=azure_functions yarn build
cd .output
func start

You can now visit http://localhost:7071/ in your browser and browse your site running locally on Azure Functions.

Deploy from your local machine

To deploy, just run the following command:

# To publish the bundled zip file
az functionapp deployment source config-zip -g <resource-group> -n <app-name> --src dist/deploy.zip
# Alternatively you can publish from source
cd dist && func azure functionapp publish --javascript <app-name>

Deploy from CI/CD via GitHub Actions

First, obtain your Azure Functions Publish Profile and add it as a secret to your GitHub repository settings following these instructions .

Then create the following file as a workflow:

.github/workflows/azure.yml
name: azure
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
jobs:
  deploy:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [ ubuntu-latest ]
        node: [ 14 ]
    steps:
      - uses: actions/setup-[email protected]
        with:
          node-version: ${{ matrix.node }}

      - name: Checkout
        uses: actions/[email protected]

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - uses: actions/[email protected]
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-azure

      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: yarn

      - name: Build
        run: npm run build
        env:
          NITRO_PRESET: azure_functions

      - name: 'Deploy to Azure Functions'
        uses: Azure/functions-[email protected]
        with:
          app-name: <your-app-name>
          package: .output/deploy.zip
          publish-profile: ${{ secrets.AZURE_FUNCTIONAPP_PUBLISH_PROFILE }}

Optimizing Azure Functions

Consider turning on immutable packages to support running your app from the zip file. This can speed up cold starts.

Demo

A live demo is available on https://nuxt-nitro.azurewebsites.net/

Azure Static Web Apps

🚧
Azure Static Web Apps currently defaults to a Node.js 12.x runtime, which means it is not currently compatible with Nuxt Nitro. For now, you can deploy via Azure Functions instead.

How to deploy Nuxt to Azure Static Web Apps with Nuxt Nitro.

Support for serverless SSR build
Auto-detected when deploying
Minimal configuration required

Setup

Azure Static Web Apps are designed to be deployed continuously in a GitHub Actions workflow . By default, Nitro will detect this deployment environment and enable the azure preset.

Local preview

You can invoke a development environment to preview before deploying.

NITRO_PRESET=azure yarn build
npx @azure/static-web-apps-cli start .output/public --api-location .output/server

Deploy from CI/CD via GitHub Actions

When you link your GitHub repository to Azure Static Web Apps, a workflow file is added to the repository.

When you are asked to select your framework, select custom and provide the following information:

Input Value
app_location '/'
api_location '.output/server'
output_location '.output/public'

If you miss this step, you can always find the build configuration section in your workflow and update the build configuration:

.github/workflows/azure-static-web-apps-<RANDOM_NAME>.yml
###### Repository/Build Configurations ######
app_location: '/'
api_location: '.output/server'
output_location: '.output/public'
###### End of Repository/Build Configurations ######

Note

Pending an update in the Azure Static Web Apps workflow , you will also need to run the following in your root directory:

mkdir -p .output/server
touch .output/server/.gitkeep
git add -f .output/server/.gitkeep

That's it! Now Azure Static Web Apps will automatically deploy your Nitro-powered Nuxt application on push.

Edit this page on GitHub Updated at Mon, Dec 6, 2021