Nuxt/docs/content/3.docs/3.deployment/1.azure.md

185 lines
5.3 KiB
Markdown
Raw Normal View History

---
icon: LogoAzure
---
# Azure
How to deploy Nuxt to Azure Static Web Apps or Azure Functions.
## Azure Functions
::list
- Support for serverless SSR build
- No configuration required
- Static assets served from Azure Function
::
### Setup
```ts [nuxt.config.js|ts]
export default {
nitro: {
preset: 'azure_functions'
}
}
```
::alert
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](https://docs.microsoft.com/en-us/azure/azure-functions/functions-reference-node?tabs=v2#setting-the-node-version).
::
### Local preview
Install [Azure Functions Core Tools](https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local) if you want to test locally.
You can invoke a development environment from the serverless directory.
```bash
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:
```bash
# 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](https://github.com/Azure/functions-action#using-publish-profile-as-deployment-credential-recommended).
Then create the following file as a workflow:
```yml{}[.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-node@v2
with:
node-version: ${{ matrix.node }}
- name: Checkout
uses: actions/checkout@master
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- uses: actions/cache@v2
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-action@v1
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](https://docs.microsoft.com/en-us/azure/app-service/deploy-run-package) to support running your app from the zipfile. This can speed up cold starts.
### Demo
A live demo is available on <https://nuxt-nitro.azurewebsites.net/>
## Azure Static Web Apps
::alert{type=warning icon=🚧}
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](#azure-functions) instead.
::
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.
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:
```yml{}[.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](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.