An Ultra Minimal Guide to Deploy Nuxt SSR
This short tutorial will be using Zeit Now to deploy Nuxt SSR application.
Expected Usage
In your Nuxt project folder, run
|
1 |
yarn generate |
Then...
|
1 |
now |
It will deploy to Zeit Now server and generate a link for you.
Repo: github.com/Ansonhkg/vue-ssr-deploy-sample
Steps
Create a zeit account
Install Zeit Now
|
1 |
npm i -g now |
Login via terminal
|
1 |
now login |
Create Nuxt App
|
1 |
npx create-nuxt-app my-app |
Add Now Builder for Nuxt.js
In your root directory, add a file called now.json
|
1 2 3 4 5 6 7 8 9 |
{ "version": 2, "builds":[ { "src": "nuxt.config.js", "use": "@nuxtjs/now-builder" } ] } |
This Now builder takes a Nuxt.js application defined by a nuxt.config entrypoint and deploys it to a Now v2 serverless environment.
It features built-in caching of node_modules and the yarn global cache (even with dependency changes!) and multi-stage build for fast and small deployments.
Reference: nuxt/now-builder
Make sure Now have the compatible Node.js version (IMPORTANT)
Open package.json and add the following:
|
1 2 3 |
"engines": { "node": "10.x" } |
Change build directory (IMPORTANT)
Open nuxt.config.js, and add the following.
|
1 2 3 4 5 |
export default { generate: { dir: "public" } }; |
Generate
When launching
nuxt generateor callingnuxt.generate(), Nuxt.js will use the configuration defined in thegenerateproperty.
Run the following command, t should create a directory called public in your project directory.
|
1 |
yarn generate |
Check if public directory is indeed generated. If not, there's something wrong.
Finally, deploy.
Run
|
1 2 3 4 |
now ## for future deployment run now --prod |