create-nuxt-app を使って Nuxt.js を NOW(ver.2)で簡単に公開する方法 #JavaScript

Nuxt.js を NOW(ver.2)で公開するまでを簡単に手順にしました。
今回は、Nuxt.js を SSR で使えるようにして、NOW で公開しています。
Static な場合は、NOW の example ページにサンプルがあるのでこちらを参照するといいと思います。Static Nuxt

手順に入る前に

Node.jsとnpxもしくは、yarn、nowをインストールしておきましょう。
ここでは、yarnを使って手順を書いたので、npm派の人は置き換えて読んでください。

Nuxt.js の導入

まずは、create-nuxt-appの導入と実行を行います。
下記のnuxt-testはプロジェクト名かつ、この名前でフォルダが作成されるので適宜置き換えてください。

yarn create nuxt-app nuxt-test

質問があるので、答えます。
Choose rendering modeをUniversalにしているのと、
eslintとprettierでyesを選択しています。

> Generating Nuxt.js project in /work/nuxt/nuxt-test
? Project name nuxt-test
? Project description My remarkable Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint yes
? Use prettier yes
? Author name takutakuma
? Choose a package manager yarn
Initialized empty Git repository in /work/nuxt/nuxt-test/.git/

  To get started:

    cd nuxt-test
    yarn run dev

  To build & start for production:

    cd nuxt-test
    yarn run build
    yarn start

✨  Done in 212.97s.

作成されたフォルダに移動して、実行し

cd nuxt-test
yarn run dev

http://localhost:3000にアクセスすると、
下記のようなエラーが表示されます。(create-nuxt-app@2.1.1 の時点では、、、)

ERROR in ./pages/index.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/takuma/work/nuxt/nuxt-test/pages/index.vue
  36:1  error  Delete `⏎`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

このままだと、困るので、一度閉じてから以下のコマンドを実行しましょう。

"error Delete ⏎ prettier/prettier" in .vue files #114

yarn run lint  -- --fix

再度、サーバを立ち上げて、http://localhost:3000にアクセスすると、
Nuxt.js の初期画面が表示されました。

yarn run dev

NOW の設定と実行

NOW に公開する前に、package.jsonへの追記と、now.jsonの追加を行ってから、NOW コマンドを実行します。

package.json の追記

package.jsonのscriptsにnow-buildを追記します。

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "precommit": "npm run lint"
+    "precommit": "npm run lint",
+    "now-build":"nuxt build && nuxt start"
  },

now.json の追加

フォルダ直下に以下の内容で、now.jsonを追加します。
nameに関しては、適宜変えてください。

{
  "version": 2,
  "name": "nuxt-test",
  "builds": [{ "src": "package.json", "use": "@now/node" }]
}

NOW コマンドの実行

now

コマンドを打って待っていると、URL が表示されるので、問題なければ公開されます。