diff --git a/docs/content/3.docs/3.deployment/1.azure.md b/docs/content/3.docs/3.deployment/1.azure.md index 5aac381771..a711980629 100644 --- a/docs/content/3.docs/3.deployment/1.azure.md +++ b/docs/content/3.docs/3.deployment/1.azure.md @@ -6,6 +6,54 @@ icon: LogoAzure How to deploy Nuxt to Azure Static Web Apps or Azure Functions. +## Azure Static Web Apps + +How to deploy Nuxt to Azure Static Web Apps with Nuxt Nitro. + +::list +- 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](https://docs.microsoft.com/en-us/azure/static-web-apps/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. + +```bash +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. + +Find the build configuration section in this workflow and update the build configuration: + +```yml{}[.github/workflows/azure-static-web-apps-.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](https://github.com/Azure/static-web-apps-deploy), you will also need to run the following in your root directory: +```bash +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. + ## Azure Functions ::list @@ -114,42 +162,3 @@ Consider [turning on immutable packages](https://docs.microsoft.com/en-us/azure/ ### Demo A live demo is available on https://nuxt-nitro.azurewebsites.net/ - -## Azure Static Web Apps - -How to deploy Nuxt to Azure Static Web Apps with Nuxt Nitro. - -::list -- 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](https://docs.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow). By default, Nitro will detect this deployment environment and enable the `azure` preset. - -### 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. - -Find the build configuration section in this workflow and update the build configuration: - -```yml{}[.github/workflows/azure-static-web-apps-.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](https://github.com/Azure/static-web-apps-deploy), you will also need to run the following in your root directory: -```bash -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. diff --git a/packages/nitro/src/presets/azure.ts b/packages/nitro/src/presets/azure.ts index 627767ebb4..7692f1032d 100644 --- a/packages/nitro/src/presets/azure.ts +++ b/packages/nitro/src/presets/azure.ts @@ -2,7 +2,7 @@ import consola from 'consola' import fse from 'fs-extra' import globby from 'globby' import { join, resolve } from 'pathe' -import { writeFile } from '../utils' +import { hl, prettyPath, writeFile } from '../utils' import { NitroPreset, NitroContext } from '../context' export const azure: NitroPreset = { @@ -17,60 +17,60 @@ export const azure: NitroPreset = { } } -async function writeRoutes ({ output: { serverDir, publicDir } }: NitroContext) { +async function writeRoutes ({ output }: NitroContext) { const host = { version: '2.0' } - const routes = [ - { - route: '/*', - serve: '/api/server' + const config = { + routes: [], + navigationFallback: { + rewrite: '/api/server' } - ] + } - const indexPath = resolve(publicDir, 'index.html') + const indexPath = resolve(output.publicDir, 'index.html') const indexFileExists = fse.existsSync(indexPath) if (!indexFileExists) { - routes.unshift( - { - route: '/', - serve: '/api/server' - }, + config.routes.unshift( { route: '/index.html', - serve: '/api/server' + redirect: '/' + }, + { + route: '/', + rewrite: '/api/server' } ) } const folderFiles = await globby([ - join(publicDir, 'index.html'), - join(publicDir, '**/index.html') + join(output.publicDir, 'index.html'), + join(output.publicDir, '**/index.html') ]) - const prefix = publicDir.length + const prefix = output.publicDir.length const suffix = '/index.html'.length folderFiles.forEach(file => - routes.unshift({ + config.routes.unshift({ route: file.slice(prefix, -suffix) || '/', - serve: file.slice(prefix) + rewrite: file.slice(prefix) }) ) - const otherFiles = await globby([join(publicDir, '**/*.html'), join(publicDir, '*.html')]) + const otherFiles = await globby([join(output.publicDir, '**/*.html'), join(output.publicDir, '*.html')]) otherFiles.forEach((file) => { if (file.endsWith('index.html')) { return } - const route = file.slice(prefix, -5) - const existingRouteIndex = routes.findIndex(_route => _route.route === route) + const route = file.slice(prefix, '.html'.length) + const existingRouteIndex = config.routes.findIndex(_route => _route.route === route) if (existingRouteIndex > -1) { - routes.splice(existingRouteIndex, 1) + config.routes.splice(existingRouteIndex, 1) } - routes.unshift( + config.routes.unshift( { route, - serve: file.slice(prefix) + rewrite: file.slice(prefix) } ) }) @@ -94,12 +94,14 @@ async function writeRoutes ({ output: { serverDir, publicDir } }: NitroContext) ] } - await writeFile(resolve(serverDir, 'function.json'), JSON.stringify(functionDefinition)) - await writeFile(resolve(serverDir, '../host.json'), JSON.stringify(host)) - await writeFile(resolve(publicDir, 'routes.json'), JSON.stringify({ routes })) + await writeFile(resolve(output.serverDir, 'function.json'), JSON.stringify(functionDefinition)) + await writeFile(resolve(output.serverDir, '../host.json'), JSON.stringify(host)) + await writeFile(resolve(output.publicDir, 'staticwebapp.config.json'), JSON.stringify(config)) if (!indexFileExists) { await writeFile(indexPath, '') } - consola.success('Ready to deploy.') + const apiDir = resolve(output.serverDir, '..') + + consola.success('Ready to run', hl('npx @azure/static-web-apps-cli start ' + prettyPath(output.publicDir) + ' --api-location ' + prettyPath(apiDir)), 'for local testing') }