Nuxt.jsが便利すぎた件

ぬにょす(挨拶)。

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

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

環境
Nuxt.jsのインストール
Nuxtアプリケーションの起動

環境

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

Nuxt.jsのインストール

インストール

ここでは、4 つのステップで、Nuxt プロジェクトを立ち上げて実行する方法について説明します。

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

$ 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
Code language: plaintext (plaintext)

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

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

$ cd <my-project>
$ yarn run dev
Code language: plaintext (plaintext)

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

server プロパティ

Nuxt では、アプリケーションのサーバー接続用の変数を nuxt.config.js 内に定義できます。

module.exports = {
  // 略
  server: {
    host: '0.0.0.0'
  },
  // 略
Code language: JavaScript (javascript)

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

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