Nuxt.jsが便利すぎた件

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のインストール

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

$ 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 にサーバー設定を追記します。

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

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

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

コメント

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