Now に Nuxt.js アプリをデプロイする

Nuxt.js は Vue で Web アプリケーションが作れるフレームワークの一つです。Node.js 環境で動作し、Heroku や GCE などでも動きますが、最近 Now を目にしたので試しに使ってみたいと思います。

環境

以下の環境で作業します。(Windows はまだ頑張れると信じてる)

  • Windows 10 Home
  • VS Code
  • npm 6.4.1
  • node v10.15.1

Nuxt アプリ作成

Now を試すため、自動的に作成できるよくあるやつを使います。yarn でも可能です。

$ npx create-nuxt-app <project-name>

その後の選択肢は好きに選びます。

$ npm run dev

http://localhost:3000 で動けば OK です。

package.json 設定

{
  "name": "example",
  ...
  "scripts": {
    ...
    "now-build": "nuxt generate" # 追加
  }
}

now.json 設定

Now の設定はここに書きます。Now の現在の最新バージョンは2です。

{
  "version": 2,
  "name": example,
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build"
    }
  ]
}

(最新版使いたいなら) Now Desktop の導入

予め Now に登録しておきます。(インストール時にメールアドレス認証がある)

Now Desktop をインストールします。

個人的には CLI が使えればそれでよかったんですが、なぜか npm install -g now した後に now コマンドが動かず、エラーも出ず…(後述)。コマンド自体は認識されているのですが。

Now Desktop を入れると Now アプリが常駐してくれます。よく使う人には便利です。

Now Desktop をインストールしてみると、今度は now コマンドを認識してくれませんでしたが眠くて何もせず、寝て起きたら動いてました (一番怖い)

Now Cli の導入

起きたら Now Desktop 経由の Now Cli は動きましたが、npm 経由でインストールすると再起動してもやはり動きませんでした。調べたところ、どうやら Windows で now 14.x 以降をインストールするとコマンドが動かないらしいです (2019/3/1)。

Now をつかおう。
Now(ZEIT now.sh)の簡単な使い方を紹介しています。 ▲ ZEIT Δ Now ログインしている場合、ZEIT のサイトを参照すると Dashboard の表示になり、Now の使用状況を参照できます。 一部は now コマンドの代わりにここから設定可能です。 現在 ZEIT Now は動的ファイルの利...

バージョンを指定してインストールすると動きます。

$ npm install -global now@13.1.3
$ now --version
13.1.3

結局 Now Desktop はアンインストールしましたが、タスクマネージャー内の起動設定や C:/users/USER/AppData/Roaming/Now 以下が残ったままなので、完全には消去してくれない感じ…。

デプロイ

$ now

メールアドレス認証が終わればデプロイできるようになります。URL は動的に変更されますが、エイリアスを設定すれば固定できます。