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 でも可能です.

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

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

terminal
$ npm run dev

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

now.json 設定

ルートディレクトリに now.json に設定内容を書きます.Now の現在の最新バージョンは2です.

(追記 2019.8.31)Nuxt.js が公式に対応してくれたので,楽になりました.

now.json
{
  "version": 2,
  "name": example-project,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxt-js/now-builder"
    }
  ]
}

Now Cli の導入

(追記 2019.8.31)Windows でもちゃんと動作することを確認しました.

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

https://jpn.now.sh/

terminal
$ npm i -g now

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

デプロイ

予め Zeit.co でアカウントを取得しておいてから先に進みます.

terminal
$ now login
> Enter your email: xxxxxxx@example.com
  inside it and make sure the security code matches Witty Salamander.
√ Email confirmed
> Ready! Authenication token and personal details saved in "~\.now"

メールアドレス認証が終わればデプロイできるようになります.

terminal
$ now
> Deploying ~\path\to\project under <currentdir>
> Using project example-project
> Synced 12 files (345.67KB) [1s]
> Ready! Deployed to https://example-project.xxxxx.now.sh

最後に出力される URL で接続できます.URL は動的に変更されますが,エイリアスを設定すれば固定できると思います.また,独自ドメインの設定も可能です.

参考

ZEIT NOW に Nuxt をデプロイする | Qiita