docs: merge deployment pages in getting started (#7765)

This commit is contained in:
Clément Ollivier 2022-09-30 08:12:58 +02:00 committed by GitHub
parent 2e080c259f
commit b2d1730cd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 160 additions and 346 deletions

View File

@ -0,0 +1,145 @@
# Deployment
A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments.
::alert{type=info}
If you are looking for a list of cloud providers that support Nuxt 3, see the [list below](#supported-hosting-providers).
::
## Node.js Server
Discover the Node.js server preset with Nitro to deploy on any Node hosting.
::list
- **Default output format** if none is specified or auto-detected <br>
- Loads only the required chunks to render the request for optimal cold start timing <br>
- Useful for deploying Nuxt apps to any Node.js hosting
::
### Entry Point
When running `nuxt build` with the Node server preset, the result will be an entry point that launches a ready-to-run Node server.
```bash
node .output/server/index.mjs
```
### Example
```bash
$ node .output/server/index.mjs
Listening on http://localhost:3000
```
### Configuring Defaults at Runtime
This preset will respect the following runtime environment variables:
- `NITRO_PORT` or `PORT` (defaults to `3000`)
- `NITRO_HOST` or `HOST` (defaults to `'0.0.0.0'`)
- `NITRO_SSL_CERT` and `NITRO_SSL_KEY` - if both are present, this will launch the server in HTTPS mode. In the vast majority of cases, this should not be used other than for testing, and the Nitro server should be run behind a reverse proxy like nginx or Cloudflare which terminates SSL.
#### Using PM2
To use `pm2`, use an `ecosystem.config.js`:
```js [ecosystem.config.js]
module.exports = {
apps: [
{
name: 'NuxtAppName',
exec_mode: 'cluster',
instances: 'max',
script: './.output/server/index.mjs'
}
]
}
```
#### Using Cluster Mode
You can use `NITRO_PRESET=node_cluster` in order to leverage multi-process performance using Node.js [cluster](https://nodejs.org/dist/latest/docs/api/cluster.html) module.
By default, the workload gets distributed to the workers with the round robin strategy.
### Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/node" title="the Nitro documentation for node-server preset"}
## Static Hosting
There are two ways to deploy a Nuxt application to any static hosting services:
- Static site generation (SSG) pre-renders routes of your application at build time.
- Using `ssr: false` to produce a pure client-side output.
### Crawl-based Pre-rendering
Use the [`nuxi generate` command](/api/commands/generate) to build your application. For every page, Nuxt uses a crawler to generate a corresponding HTML and payload files. The built files will be generated in the `.output/public` directory.
```bash
npx nuxi generate
```
### Manual Pre-rendering
You can manually specify routes that [Nitro](/guide/concepts/server-engine) will fetch and pre-render during the build.
```ts [nuxt.config.ts|js]
defineNuxtConfig({
nitro: {
prerender: {
routes: ['/user/1', '/user/2']
}
}
})
```
### Client-side Only Rendering
If you don't want to pre-render your routes, another way of using static hosting is to set the `ssr` property to `false` in the `nuxt.config` file. The `nuxi generate` command will then output an `.output/public/index.html` entrypoint and JavaScript bundles like a classic client-side Vue.js application.
```ts [nuxt.config.ts|js]
defineNuxtConfig({
ssr: false
})
```
## Presets
In addition to Node.js servers and static hosting services, a Nuxt 3 project can be deployed with several well-tested presets and minimal amount of configuration.
You can explicitly set the desired preset in the [`nuxt.config`](/guide/directory-structure/nuxt.config) file:
```js [nuxt.config.js|ts]
export default {
nitro: {
preset: 'node-server'
}
}
```
... or use the `NITRO_PRESET` environment variable when running `nuxt build`:
```bash
NITRO_PRESET=node-server nuxt build
```
🔎 Check [the Nitro deployment](https://nitro.unjs.io/deploy) for all possible deployment presets and providers.
### Supported Hosting Providers
Nuxt 3 can be deployed to several cloud providers with a minimal amount of configuration:
- :IconCloud{class="h-5 w-4 inline mb-2"} [AWS](https://nitro.unjs.io/deploy/providers/aws)
- :LogoAzure{class="h-5 w-4 inline mb-2"} [Azure](https://nitro.unjs.io/deploy/providers/azure)
- :LogoCloudFlare{class="h-5 w-4 inline mb-2"} [CloudFlare](https://nitro.unjs.io/deploy/providers/cloudflare)
- :IconCloud{class="h-5 w-4 inline mb-2"} [Digital Ocean](https://nitro.unjs.io/deploy/providers/digitalocean)
- :LogoFirebase{class="h-5 w-4 inline mb-2"} [Firebase](https://nitro.unjs.io/deploy/providers/firebase)
- :IconCloud{class="h-5 w-4 inline mb-2"} [heroku](https://nitro.unjs.io/deploy/providers/heroku)
- :IconCloud{class="h-5 w-4 inline mb-2"} [layer0](https://nitro.unjs.io/deploy/providers/layer0)
- :LogoNetlify{class="h-5 w-4 inline mb-2"} [Netlify](https://nitro.unjs.io/deploy/providers/netlify)
- :IconCloud{class="h-5 w-4 inline mb-2"} [Render](https://nitro.unjs.io/deploy/providers/render)
- :IconCloud{class="h-5 w-4 inline mb-2"} [Stormkit](https://nitro.unjs.io/deploy/providers/stormkit)
- :LogoVercel{class="h-5 w-4 inline mb-2"} [Vercel](https://nitro.unjs.io/deploy/providers/vercel)

View File

@ -1,60 +0,0 @@
# Node.js Server
Discover the Node.js server preset with Nitro to deploy on any Node hosting.
::list
- **Default output format** if none is specified or auto-detected <br>
- Loads only the required chunks to render the request for optimal cold start timing <br>
- Useful for deploying Nuxt apps to any Node.js hosting
::
## Entry Point
When running `nuxt build` with the Node server preset, the result will be an entry point that launches a ready-to-run Node server.
```bash
node .output/server/index.mjs
```
## Example
```bash
$ node .output/server/index.mjs
Listening on http://localhost:3000
```
## Configuring Defaults at Runtime
This preset will respect the following runtime environment variables:
- `NITRO_PORT` or `PORT` (defaults to `3000`)
- `NITRO_HOST` or `HOST` (defaults to `'0.0.0.0'`)
- `NITRO_SSL_CERT` and `NITRO_SSL_KEY` - if both are present, this will launch the server in HTTPS mode. In the vast majority of cases, this should not be used other than for testing, and the Nitro server should be run behind a reverse proxy like nginx or Cloudflare which terminates SSL.
### Using PM2
To use `pm2`, use an `ecosystem.config.js`:
```js [ecosystem.config.js]
module.exports = {
apps: [
{
name: 'NuxtAppName',
exec_mode: 'cluster',
instances: 'max',
script: './.output/server/index.mjs'
}
]
}
```
### Using Cluster Mode
You can use `NITRO_PRESET=node_cluster` in order to leverage multi-process performance using Node.js [cluster](https://nodejs.org/dist/latest/docs/api/cluster.html) module.
By default, the workload gets distributed to the workers with the round robin strategy.
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/node" title="the Nitro documentation for node-server preset"}

View File

@ -1,38 +0,0 @@
# Static Hosting
There are two ways to deploy a Nuxt application to any static hosting services:
- Static site generation (SSG) prerenders every route of your application at build time. For every page, Nuxt uses a crawler to generate a corresponding HTML and payload files.
- Using `ssr: false` to produce a pure client-side output.
## Prerendering
Use the [`nuxi generate` command](/api/commands/generate) to build your application. The HTML files will be generated in the `.output/public` directory.
```bash
npx nuxi generate
```
## Client-side Only Rendering
If you don't want to prerender your routes, another way of using static hosting is to set the `ssr` property to `false` in the `nuxt.config` file. The `nuxi generate` command will then output an `index.html` entrypoint like a classic client-side Vue.js application.
```ts [nuxt.config.ts|js]
defineNuxtConfig({
ssr: false
})
```
## Advanced
You can manually specify routes that [Nitro](/guide/concepts/server-engine) will fetch and prerender during the build.
```ts [nuxt.config.ts|js]
defineNuxtConfig({
nitro: {
prerender: {
routes: ['/user/1', '/user/2']
}
}
})
```

View File

@ -1,37 +0,0 @@
# Deployment Presets
In addition to Node.js servers and static hosting services, a Nuxt 3 project can be deployed with several well-tested presets and minimal amount of configuration.
You can use the [Nuxt config](/guide/directory-structure/nuxt.config) to explicitly set the preset to use:
```js [nuxt.config.js|ts]
export default {
nitro: {
preset: 'node-server'
}
}
```
Or directly use the `NITRO_PRESET` environment variable when running `nuxt build`:
```bash
NITRO_PRESET=node-server nuxt build
```
🔎 Check [the Nitro deployment](https://nitro.unjs.io/deploy) for all possible deployment presets and providers.
## Supported Hosting Providers
Nuxt 3 can be deployed to several cloud providers with a minimal amount of configuration:
- :IconCloud{class="h-5 w-4 inline mb-2"} [AWS](/guide/deploy/providers/aws)
- :LogoAzure{class="h-5 w-4 inline mb-2"} [Azure](/guide/deploy/providers/azure)
- :LogoCloudFlare{class="h-5 w-4 inline mb-2"} [CloudFlare](/guide/deploy/providers/cloudflare)
- :IconCloud{class="h-5 w-4 inline mb-2"} [Digital Ocean](/guide/deploy/providers/digitalocean)
- :LogoFirebase{class="h-5 w-4 inline mb-2"} [Firebase](/guide/deploy/providers/firebase)
- :IconCloud{class="h-5 w-4 inline mb-2"} [heroku](/guide/deploy/providers/heroku)
- :IconCloud{class="h-5 w-4 inline mb-2"} [layer0](/guide/deploy/providers/layer0)
- :LogoNetlify{class="h-5 w-4 inline mb-2"} [Netlify](/guide/deploy/providers/netlify)
- :IconCloud{class="h-5 w-4 inline mb-2"} [Render](/guide/deploy/providers/render)
- :IconCloud{class="h-5 w-4 inline mb-2"} [Stormkit](/guide/deploy/providers/stormkit)
- :LogoVercel{class="h-5 w-4 inline mb-2"} [Vercel](/guide/deploy/providers/vercel)

View File

@ -1,7 +0,0 @@
---
layout:
aside: true
asideClass: ''
navigation:
redirect: /guide/deploy/node-server
---

View File

@ -1,11 +0,0 @@
---
icon: IconCloud
---
# AWS
How to deploy Nuxt to [AWS Lambda](https://aws.amazon.com/lambda/)
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/aws" title="the Nitro documentation for AWS deployment"}

View File

@ -1,18 +0,0 @@
---
icon: LogoAzure
---
# Azure
How to deploy to [Azure Static Web Apps](https://azure.microsoft.com/en-us/services/app-service/static/) or [Azure Functions](https://azure.microsoft.com/en-us/services/functions).
::list
- Support for serverless SSR build
- Auto-detected when deploying
- Minimal configuration required
::
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/azure" title="the Nitro documentation for Azure deployment"}

View File

@ -1,18 +0,0 @@
---
icon: LogoCloudFlare
---
# Cloudflare Workers
How to deploy Nuxt to [Cloudflare Workers](https://workers.cloudflare.com/).
::list
- Support for Workers build output
- Zero-millisecond cold start with edge-side rendering
- Minimal configuration required
::
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/cloudflare" title="the Nitro documentation for Cloudflare deployment"}

View File

@ -1,11 +0,0 @@
---
icon: IconCloud
---
# DigitalOcean
Nitro supports deploying on the [Digital Ocean App Platform](https://docs.digitalocean.com/products/app-platform/) with minimal configuration.
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/digitalocean" title="the Nitro documentation for DigitalOcean deployment"}

View File

@ -1,15 +0,0 @@
---
icon: LogoFirebase
---
# Firebase Hosting
How to deploy Nuxt to [Firebase Hosting](https://firebase.google.com/docs/hosting).
Nitro supports [Firebase Hosting](https://firebase.google.com/docs/hosting) with Cloud Functions out of the box.
**Note**: You need to be on the **Blaze plan** to use Nitro with Cloud Functions.
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/firebase" title="the Nitro documentation for Firebase deployment"}

View File

@ -1,11 +0,0 @@
---
icon: IconCloud
---
# Heroku
How to deploy Nuxt to [Heroku](https://www.heroku.com/).
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/heroku" title="the Nitro documentation for Heroku deployment"}

View File

@ -1,3 +0,0 @@
---
navigation: false
---

View File

@ -1,13 +0,0 @@
---
icon: IconCloud
---
# Layer0
Nitro provides a built-in preset to generate output format compatible with [Layer0](https://www.layer0.co/).
Layer0 extends the capabilities of a traditional CDN by not only hosting your static content, but also providing server-side rendering for progressive web applications as well as caching both your APIs and HTML at the network edge to provide your users with the fastest browsing experience.
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/layer0" title="the Nitro documentation for Layer0 deployment"}

View File

@ -1,41 +0,0 @@
---
icon: LogoNetlify
---
# Netlify
How to deploy Nuxt to [Netlify](https://www.netlify.com/).
::list
- Support for serverless SSR using Netlify Functions and Edge
- Auto-detected when deploying
- No configuration required
::
## Setup
Normally, the deployment to Netlify does not require any configuration. Nuxt will auto-detect that you are in a [Netlify](https://www.netlify.com) build environment and build the correct version of your Nuxt server. For new sites, Netlify will detect that you are using Nuxt and set the publish directory to `dist` and build command to `npm run build`. If you are upgrading an existing site, you should check these and update them if needed.
To trigger a deploy, just push to your git repository [as you would normally do for Netlify](https://docs.netlify.com/configure-builds/get-started/).
By default, Nuxt will server-render each page on server hit using [Netlify Functions](https://docs.netlify.com/functions/overview/). You can optionally configure deployment to use [Netlify Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/) or [Netlify On-demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/).
## Netlify Edge Functions
[Netlify Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/) use [Deno](https://deno.land) and the powerful V8 JavaScript runtime to let you run globally distributed functions for the fastest possible response times. Nuxt output can directly run the server at the edge - closer to your users!
Read more in the [Netlify Edge Functions announcement](https://www.netlify.com/blog/announcing-serverless-compute-with-edge-functions).
## On-demand Builders
[Netlify On-demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/) are serverless functions used to generate web content as needed thats automatically cached on Netlifys Edge CDN. They enable you to build pages for your site when a user visits them for the first time and then cache them at the edge for subsequent visits (also known as Incremental Static Regeneration).
## Custom Redirects
If you want to add custom redirects, you can do so by adding a [`_redirects`](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file) file in the [`public`](/guide/directory-structure/public) directory.
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/netlify" title="the Nitro documentation for Netlify deployment"}

View File

@ -1,11 +0,0 @@
---
icon: IconCloud
---
# Render
How to deploy Nuxt to [Render](https://render.com/)
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/render" title="the Nitro documentation for Render deployment"}

View File

@ -1,11 +0,0 @@
---
icon: IconCloud
---
# StormKit
How to deploy Nuxt to [StormKit](https://app.stormkit.io/?referral=nuxtjs).
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/stormkit" title="the Nitro documentation for StormKit deployment"}

View File

@ -1,41 +0,0 @@
---
icon: LogoVercel
---
# Vercel
Nuxt on Vercel supports server-rendered pages and API routes.
::list
- Support for serverless build
- Auto-detected when deploying
- No configuration required
::
## Git
1. Push your code to your git repository (GitHub, GitLab, Bitbucket).
2. [Import your project](https://vercel.com/new) into Vercel.
3. Vercel will detect that you are using Nuxt and will enable the correct settings for your deployment.
4. Your application is deployed! (e.g. [nuxt.vercel.app](https://nuxt.vercel.app/))
After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/environments#preview), and all changes made to the Production Branch (commonly “main”) will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).
Learn more about Vercels [Git Integration](https://vercel.com/docs/concepts/git).
## CLI
1. Install the [Vercel CLI](https://vercel.com/cli).
2. Vercel will detect that you are using Nuxt and will enable the correct settings for your deployment.
3. Your application is deployed! (e.g. [nuxt.vercel.app](https://nuxt.vercel.app/))
```bash
npm i -g vercel
npx nuxi init -t v3-vercel
vercel
```
## Learn More
:ReadMore{link="https://nitro.unjs.io/deploy/providers/vercel" title="the Nitro documentation for Vercel deployment"}

View File

@ -49,3 +49,18 @@
/guide/features/app-config /guide/directory-structure/app.config 302!
/guide/features/runtime-config /guide/going-further/runtime-config 302!
/guide/features/teleports /api/components/teleports 302!
/guide/deploy/node-server /getting-started/deployment 302!
/guide/deploy/static-hosting /getting-started/deployment 302!
/guide/deploy/presets /getting-started/deployment 302!
/guide/deploy/providers/aws https://nitro.unjs.io/deploy/providers/aws 302!
/guide/deploy/providers/azure https://nitro.unjs.io/deploy/providers/azure 302!
/guide/deploy/providers/cloudflare https://nitro.unjs.io/deploy/providers/cloudflare 302!
/guide/deploy/providers/digitalocean https://nitro.unjs.io/deploy/providers/digitalocean 302!
/guide/deploy/providers/firebase https://nitro.unjs.io/deploy/providers/firebase 302!
/guide/deploy/providers/heroku https://nitro.unjs.io/deploy/providers/heroku 302!
/guide/deploy/providers/layer0 https://nitro.unjs.io/deploy/providers/layer0 302!
/guide/deploy/providers/netlify https://nitro.unjs.io/deploy/providers/netlify 302!
/guide/deploy/providers/render https://nitro.unjs.io/deploy/providers/render 302!
/guide/deploy/providers/stormkit https://nitro.unjs.io/deploy/providers/stormkit 302!
/guide/deploy/providers/vercel https://nitro.unjs.io/deploy/providers/vercel 302!