Nuxt.jsが便利すぎた件

ぬにょす(挨拶)。

WebアプリのフロントエンドにVue.js、バックエンドにRailsという構成でアレコレしていたのですが、Nuxt.jsならどっちもイケる事が分かって乗り換えました。フロントもバックもJavaScriptに統一できるので、コーディングもしやすくなりました。

ここではNuxtプロジェクトの始め方をメモしておきます。

環境

VirtualBox上のUbuntu Server 18.04
Node.js v11.13.0
Yarn 1.15.2

Nuxt.jsのインストール

Nuxt 2 - インストール（ja.nuxtjs.org）

プロジェクトのひな形を作成するコマンドが提供されているので、それを実行します。途中、対話形式でオプションを設定します。

$ yarn create nuxt-app <my-project>
? Project name hello_nuxt
? Project description My terrific Nuxt.js project
? Use a custom server framework express
? Choose features to install Progressive Web App (PWA) Support, Linter / Formatter, Prettier, Axios
? Use a custom UI framework buefy
? Use a custom test framework jest
? Choose rendering mode Universal
? Author name miyabi-satoh
? Choose a package manager yarn

Nuxtアプリケーションの起動

プロジェクトディレクトリに移動してコマンドを実行します。

$ cd <my-project>
$ yarn run dev

http://localhost:3000 で動いているとのことですが、ホストPCから http://仮想マシンのIP:3000 にブラウザでアクセスすると弾かれます。プロジェクトディレクトリ直下の nuxt.config.js にサーバー設定を追記します。

Nuxt 2 - server プロパティ（ja.nuxtjs.org）

module.exports = {
  // 略
  server: {
    host: '0.0.0.0'
  },
  // 略

Nuxtアプリケーションを再起動してアクセスすると、初期ページが表示されました。

ものの数分でWebアプリケーションの土台が出来てしまいました。素晴らしいの一言です。