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 です。

now.json 設定

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

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

{
  "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)。

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

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

デプロイ

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

$ 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"

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

$ 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

タイトルとURLをコピーしました