mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 13:45:18 +00:00
chore(docs): improve deployment section (#720)
This commit is contained in:
parent
45728735ad
commit
9fc65e485e
@ -14,7 +14,7 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
Learn more about all the different [config properties](/docs/config)
|
||||
Learn more about all the different [config properties](/docs/directory-structure/nuxt.config)
|
||||
|
||||
<!-- GENERATED_CONFIG_DOCS -->
|
||||
|
||||
|
@ -4,7 +4,7 @@ icon: LogoAzure
|
||||
|
||||
# Azure
|
||||
|
||||
Learn how to deploy Nuxt to Azure Static Web Apps or Azure Functions.
|
||||
How to deploy Nuxt to Azure Static Web Apps or Azure Functions.
|
||||
|
||||
## Azure Functions
|
||||
|
||||
|
@ -7,8 +7,8 @@ icon: LogoCloudFlare
|
||||
How to deploy Nuxt to Cloudflare Workers.
|
||||
|
||||
::list
|
||||
- Support for serverless SSR build
|
||||
- Zero millisecond cold start with edge rendering
|
||||
- Support for Workers build output
|
||||
- Zero millisecond cold start with edge-side rendering
|
||||
- Minimal configuration required
|
||||
::
|
||||
|
||||
|
@ -11,10 +11,9 @@ How to deploy Nuxt to Firebase Hosting.
|
||||
- Minimal configuration required
|
||||
::
|
||||
|
||||
|
||||
## Setup
|
||||
|
||||
Nitro supports Firebase Hosting with Cloud Functions out of the box.
|
||||
Nitro supports [Firebase Hosting](https://firebase.google.com/docs/hosting) with Cloud Functions out of the box.
|
||||
|
||||
**Note**: You will need to be on the **Blaze plan** in order to use Nitro with Cloud Functions.
|
||||
|
||||
@ -33,18 +32,33 @@ This file should then be committed to version control. You can also create a `.f
|
||||
|
||||
Then, just add Firebase dependencies to your project:
|
||||
|
||||
```bash
|
||||
::code-group
|
||||
```bash [Yarn]
|
||||
yarn add --dev firebase-admin firebase-functions firebase-functions-test
|
||||
```
|
||||
```bash [NPM]
|
||||
npm install -D firebase-admin firebase-functions firebase-functions-test
|
||||
```
|
||||
::
|
||||
|
||||
### Using Firebase CLI
|
||||
|
||||
You may instead prefer to set up your project with the `firebase` CLI, which will fetch your project ID for you, add required dependencies (see above) and even set up automated deployments via GitHub Actions.
|
||||
|
||||
```bash
|
||||
# Install firebase CLI globally
|
||||
#### Install firebase CLI globally
|
||||
|
||||
::code-group
|
||||
```bash [Yarn]
|
||||
yarn global install firebase-tools
|
||||
# Initialize your firebase project
|
||||
```
|
||||
```bash [NPM]
|
||||
npm install -g firebase-tools
|
||||
```
|
||||
::
|
||||
|
||||
#### Initialize your firebase project
|
||||
|
||||
```bash
|
||||
firebase login
|
||||
firebase init hosting
|
||||
```
|
||||
|
@ -4,7 +4,7 @@ icon: LogoNetlify
|
||||
|
||||
# Netlify
|
||||
|
||||
How to deploy Nuxt to [Netlify](https://www.netlify.com).
|
||||
How to deploy Nuxt to Netlify.
|
||||
|
||||
::list
|
||||
- Support for serverless SSR build
|
||||
@ -14,7 +14,7 @@ How to deploy Nuxt to [Netlify](https://www.netlify.com).
|
||||
|
||||
## Setup
|
||||
|
||||
Nitro will auto-detect that you are in a Netlify environment and build the correct version of your Nuxt server. The only thing you need to do is ensure that you have Netlify set up to build your project (just select the 'Nuxt' preset from the drop-down menu).
|
||||
Nitro will auto-detect that you are in a [Netlify](https://www.netlify.com) environment and build the correct version of your Nuxt server. The only thing you need to do is ensure that you have Netlify set up to build your project (just select the 'Nuxt' preset from the drop-down menu).
|
||||
|
||||
## Deployment
|
||||
|
||||
|
@ -4,7 +4,7 @@ icon: LogoPM2
|
||||
|
||||
# PM2
|
||||
|
||||
How to deploy Nuxt to a Node.js hosting.
|
||||
How to deploy Nuxt to a Node.js hosting using PM2.
|
||||
|
||||
::list
|
||||
- Support for ultra-minimal SSR build
|
||||
|
@ -4,7 +4,7 @@ icon: LogoVercel
|
||||
|
||||
# Vercel
|
||||
|
||||
Learn how to deploy a Nuxt application to [Vercel](https://vercel.com).
|
||||
How to deploy Nuxt to Vercel.
|
||||
|
||||
::list
|
||||
- Support for serverless build
|
||||
@ -14,7 +14,7 @@ Learn how to deploy a Nuxt application to [Vercel](https://vercel.com).
|
||||
|
||||
## Setup
|
||||
|
||||
By default, Vercel will run your `build` script in the `package.json` and automatically detect the built entrypoint within `.vercel_build_output/`.
|
||||
By default, [Vercel](https://vercel.com) will run your `build` script in the `package.json` and automatically detect the built entrypoint within `.vercel_build_output/`.
|
||||
|
||||
## Deployment
|
||||
|
||||
|
@ -4,13 +4,13 @@ icon: IconPresets
|
||||
|
||||
# Presets
|
||||
|
||||
There are four provided generic presets for Nuxt Nitro that you can use out-of-the-box.
|
||||
Nuxt has four provided generic presets that you can use out-of-the-box.
|
||||
|
||||
1. [Node.js server *(default)*](/deployment/presets/server)
|
||||
2. [Node.js function](/deployment/presets/node)
|
||||
3. [Lambda function](/deployment/presets/lambda)
|
||||
4. [Service worker](/deployment/presets/service-worker)
|
||||
::list{type=success}
|
||||
- [Node.js server *(default)*](/docs/deployment/presets/server)
|
||||
- [Node.js function](/docs/deployment/presets/node)
|
||||
- [Lambda function](/docs/deployment/presets/lambda)
|
||||
- [Service worker](/docs/deployment/presets/service-worker)
|
||||
::
|
||||
|
||||
If you need to [create a custom preset](/deployment/presets/custom), that's possible too. 🚀
|
||||
|
||||
You may also want to check out the docs for [platform presets that are supported out-of-the-box](/build/platforms).
|
||||
If you need to [create a custom preset](/docs/deployment/presets/custom), that's possible too. 🚀
|
||||
|
@ -1,25 +1,33 @@
|
||||
# Custom build preset (advanced)
|
||||
|
||||
- Allows full customization
|
||||
- This is an advanced usage pattern
|
||||
Get full control of Nuxt Nitro output to deploy on any kind of hosting platform.
|
||||
|
||||
### Setup
|
||||
::list{type=info}
|
||||
- Allows full customization
|
||||
- This is an advanced usage pattern
|
||||
::
|
||||
|
||||
::alert{icon=IconPresets}
|
||||
Back to [presets list](/docs/deployment/presets).
|
||||
::
|
||||
|
||||
## Setup
|
||||
|
||||
You can create your own custom build preset. See [the provided presets](https://github.com/nuxt/framework/blob/main/packages/nitro/src/presets) for examples.
|
||||
|
||||
#### Inline preset definition
|
||||
### Inline preset definition
|
||||
|
||||
You can define everything that a custom preset would configure directly in the Nitro options:
|
||||
|
||||
```ts [nuxt.config.js]
|
||||
export default {
|
||||
nitro: {
|
||||
//
|
||||
// preset options
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Reusable preset
|
||||
### Reusable preset
|
||||
|
||||
You can also define a preset in a separate file (or publish as a separate npm package).
|
||||
|
||||
|
@ -1,10 +1,34 @@
|
||||
# Lambda function
|
||||
|
||||
- Compatible with common lambda formats (AWS, Netlify and others)
|
||||
Discover the Lambda function preset with Nitro to deploy Nuxt to any lambda-compatible serverless platform.
|
||||
|
||||
::alert{icon=IconPresets}
|
||||
Back to [presets list](/docs/deployment/presets).
|
||||
::
|
||||
|
||||
## Usage
|
||||
|
||||
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicity set the preset to use:
|
||||
|
||||
```ts [nuxt.config.js|ts]
|
||||
export default {
|
||||
nitro: {
|
||||
preset: 'lambda'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Or directly use the `NITRO_PRESET` environment variable when running `nuxt build`:
|
||||
|
||||
```bash
|
||||
NITRO_PRESET=lambda npx nuxt build
|
||||
```
|
||||
|
||||
### Entrypoint
|
||||
|
||||
With `{ preset: 'lambda' }` the result will be an entrypoint that exports a handler function that responds to an event and returns a response. This preset is compatible with [AWS Lambda](https://docs.aws.amazon.com/lex/latest/dg/lambda-input-response-format.html) and [Netlify Functions](https://docs.netlify.com/functions/build-with-javascript).
|
||||
When running `nuxt build` with the Lambda preset, the result will be an entrypoint that exports a handler function that responds to an event and returns a response.
|
||||
|
||||
This entrypoint is compatible with [AWS Lambda](https://docs.aws.amazon.com/lex/latest/dg/lambda-input-response-format.html) and [Netlify Functions](https://docs.netlify.com/functions/build-with-javascript).
|
||||
|
||||
It can be used programmatically or as part of a deploy.
|
||||
|
||||
|
@ -1,19 +1,46 @@
|
||||
# Node.js function
|
||||
|
||||
- Compatible with many Node.js servers
|
||||
- Drop-in usage with express or native http server
|
||||
- Loads only the chunks required to render the request for optimal cold start timing
|
||||
Discover the Node.js function preset with Nitro to attach Nuxt as a middleware to any Node.js server.
|
||||
|
||||
### Entrypoint
|
||||
::list
|
||||
- Compatible with many Node.js servers
|
||||
- Drop-in usage with express or native http server
|
||||
- Loads only the chunks required to render the request for optimal cold start timing
|
||||
::
|
||||
|
||||
With `{ preset: 'node' }` the result will be an entrypoint exporting a function with the familiar `(req, res) => {}` signature used in [express](https://expressjs.com/), [h3](https://github.com/nuxt-contrib/h3), etc.
|
||||
::alert{icon=IconPresets}
|
||||
Back to [presets list](/docs/deployment/presets).
|
||||
::
|
||||
|
||||
**Warning**
|
||||
## Usage
|
||||
|
||||
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicity set the preset to use:
|
||||
|
||||
```ts [nuxt.config.js|ts]
|
||||
export default {
|
||||
nitro: {
|
||||
preset: 'node'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Or directly use the `NITRO_PRESET` environment variable when running `nuxt build`:
|
||||
|
||||
```bash
|
||||
NITRO_PRESET=node npx nuxt build
|
||||
```
|
||||
|
||||
## Entrypoint
|
||||
|
||||
When running `nuxt build` with the Node preset, the result will be an entrypoint exporting a function with the familiar `(req, res) => {}` signature used in [express](https://expressjs.com/), [h3](https://github.com/unjs/h3), etc.
|
||||
|
||||
::alert{type=warning}
|
||||
It is not recommended to use this preset directly, and particularly not with a 3rd-party server.
|
||||
::
|
||||
|
||||
### Example
|
||||
## Example
|
||||
|
||||
#### Express middleware
|
||||
### Express middleware
|
||||
|
||||
```ts
|
||||
import express from 'express'
|
||||
@ -25,7 +52,7 @@ app.use(handler)
|
||||
app.listen(3000)
|
||||
```
|
||||
|
||||
#### Node server
|
||||
### Node server
|
||||
|
||||
```ts
|
||||
import { createServer } from 'http'
|
||||
|
@ -1,12 +1,20 @@
|
||||
# Node.js server
|
||||
|
||||
:ok_hand: **Default preset** if none is specified or auto-detected <br>
|
||||
:rocket: Loads only the required chunks to render the request for optimal cold start timing <br>
|
||||
:bug: Useful for debugging
|
||||
Discover the Node.js server preset with Nitro to deploy on any Node hosting.
|
||||
|
||||
### Usage
|
||||
::list
|
||||
- **Default preset** 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 debugging
|
||||
::
|
||||
|
||||
You can use the [Nuxt config](/config) to explicity set the preset to use:
|
||||
::alert{icon=IconPresets}
|
||||
Back to [presets list](/docs/deployment/presets).
|
||||
::
|
||||
|
||||
## Usage
|
||||
|
||||
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicity set the preset to use:
|
||||
|
||||
```ts [nuxt.config.js|ts]
|
||||
export default {
|
||||
@ -22,7 +30,7 @@ Or directly use the `NITRO_PRESET` environment variable when running `nuxt build
|
||||
NITRO_PRESET=server npx nuxt build
|
||||
```
|
||||
|
||||
### Entrypoint
|
||||
## Entrypoint
|
||||
|
||||
When running `nuxt build` with the Node server preset, the result will be an entrypoint that launches a ready-to-run Node server.
|
||||
|
||||
@ -30,14 +38,14 @@ When running `nuxt build` with the Node server preset, the result will be an ent
|
||||
node .output/server/index.mjs
|
||||
```
|
||||
|
||||
### Example
|
||||
## Example
|
||||
|
||||
```bash
|
||||
$ node .output/server/index.mjs
|
||||
Listening on http://localhost:3000
|
||||
```
|
||||
|
||||
### Server timings
|
||||
## Server timings
|
||||
|
||||
You can enable the `nitro.timing` option in order to have the logs about the chunk loading and cold start performance.
|
||||
|
||||
|
@ -1,14 +1,41 @@
|
||||
# Service worker
|
||||
|
||||
- Can be used for edge rendering
|
||||
- No dependency on Node.js
|
||||
- No Node.js environment and features
|
||||
Explore the Service worker preset with Nitro to push the boundaries of Nuxt rendering to the edge.
|
||||
|
||||
**Warning**
|
||||
::list
|
||||
- Can be used for edge-side rendering
|
||||
- No dependency on Node.js
|
||||
- No Node.js environment and features
|
||||
::
|
||||
|
||||
::alert{icon=IconPresets}
|
||||
Back to [presets list](/docs/deployment/presets).
|
||||
::
|
||||
|
||||
::alert{type=warning}
|
||||
Deployment as service worker has some limitations since SSR code is not running in Node.js environment but pure JavaScript.
|
||||
::
|
||||
|
||||
### Entrypoint
|
||||
## Usage
|
||||
|
||||
The worker preset produces a service worker that can provide full HTML rendering within a worker context (for example [Cloudflare Workers](/deploy/cloudflare)). It registers appropriate handlers for `fetch`, `install` and `activate`.
|
||||
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicity set the preset to use:
|
||||
|
||||
For more information you can see the [source code](https://github.com/nuxt/nitro/blob/main/src/runtime/entries/service-worker.ts).
|
||||
```ts [nuxt.config.js|ts]
|
||||
export default {
|
||||
nitro: {
|
||||
preset: 'worker'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Or directly use the `NITRO_PRESET` environment variable when running `nuxt build`:
|
||||
|
||||
```bash
|
||||
NITRO_PRESET=worker npx nuxt build
|
||||
```
|
||||
|
||||
## Entrypoint
|
||||
|
||||
The worker preset produces a service worker that can provide full HTML rendering within a worker context (for example [Cloudflare Workers](/docs/deployment/cloudflare)). It registers appropriate handlers for `fetch`, `install` and `activate`.
|
||||
|
||||
For more information you can see the [source code](https://github.com/nuxt/framework/blob/main/packages/nitro/src/runtime/entries/service-worker.ts).
|
||||
|
Loading…
Reference in New Issue
Block a user