Nuxt3 中文课程《实战全栈开发简书》限时优惠
Deploy

Azure

Deploy your Nuxt Application to Azure infrastructure.

Azure Static Web Apps

Zero Configuration ✨
Integration with Azure Static Web Apps provider is possible with zero configuration, learn more.

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

Local preview

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

You can invoke a development environment to preview before deploying.

Terminal
npx nuxi build --preset=azure
npx @azure/static-web-apps-cli start .output/public --api-location .output/server

Configuration

Azure Static Web Apps are configured using the staticwebapp.config.json file.

Nuxt automatically generates this configuration file whenever the application is built with the azure preset.

It adds the following properties based on the following criteria:

PropertyCriteriaDefault
platform.apiRuntimeWill automatically set to node:16 or node:14 depending on your package configuration.node:16
navigationFallback.rewriteIs always /api/server/api/server
routesAll prerendered routes are added. Additionally, if you do not have an index.html file an empty one is created for you for compatibility purposes and also requests to /index.html are redirected to the root directory which is handled by /api/server.[]

Custom Configuration

You can alter the generated configuration using azure.config option. For instance, if you wanted to specify a Node runtime for your Azure Functions, edit your nuxt.config.ts file to the following:

nuxt.config.ts
export default defineNuxtConfig({
  // ...
  nitro: {
    azure: {
      config: {
        // ...
        platform: {
          apiRuntime: 'node:18'
        }
      }
    }
  }
})

Custom routes will be added and matched first. In the case of a conflict (determined if an object has the same route property), custom routes will override generated ones.

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:

InputValue
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 ######
That's it! Now Azure Static Web Apps will automatically deploy your Nitro-powered application on push.

If you are using runtimeConfig, you will likely want to configure the corresponding environment variables on Azure.

More options

Learn about the other Azure deployment presets on Nitro documentation.