Vagrant上でNode.jsを動かす際にハマりがちなポイントを雑に紹介する

Nuxt.js でアプリを作成する際に環境構築でハマったポイント（もしくは初めての場合ハマるであろうポイント）と、その対処法を紹介します。

ちなみに今回は、Windows10 Home 上に VirtualBox + Vagrant で Linux 環境を作り、さらにその Linux 上で Docker を起動させて実行環境を作るという方式でアプリを作成していました。

ハマりポイント① : ポートフォワーディング

事象

ブラウザで localhost:3000 等でアクセスしようとする場合、ホストOS（windows）とゲストOS（Linux）でポートフォワーディングの設定を済ませておく必要があります。

対応方法

Vagrantfile に次のようにポートフォワーディングの設定を追加します。

Vagrantfile

+  config.vm.network "forwarded_port", guest: 3000, host: 3000

ハマりポイント②：yarn install

事象

yarn install をした際に次のようなエラーが出る場合があります。
私の場合は次のようなエラーが出ました。

error An unexpected error occurred: "EPROTO: protocol error, symlink '../../../../webpack/bin/webpack.js' -> '/nuxt/node_modules/@nuxtjs/friendly-errors-webpack-plugin/node_modules/.bin/webpack'".

対応方法

yarn install する際に、オプションとして --no-bin-links を付けて実行します。

$ yarn install --no-bin-links

参考
■ 【npm】【Vagrant】Vagrantの共有フォルダ上でnpm installすると失敗する原因と、–no-bin-linksオプションをつけると成功する理由

ハマりポイント③：sh: 1: cross-env: not found

事象

yarn dev で 開発サーバーを起動しようとすると（特に express を導入している場合に）、次のようなエラーが出る場合があります。

/bin/sh: 1: cross-env: not found
error Command failed with exit code 127.

Error: spawn nodemon ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:201:19)
    at onErrorNT (internal/child_process.js:379:16)
    at process._tickCallback (internal/process/next_tick.js:178:19)
    at Function.Module.runMain (internal/modules/cjs/loader.js:697:11)
    at startup (internal/bootstrap/node.js:201:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
error Command failed with exit code 1.

対応方法

package.json の scripts において node_modules のパスを記載するようにします。

package.json（失敗時）

  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
  },

package.json（成功時）

  "scripts": {
    "dev": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/nodemon/bin/nodemon.js server/index.js --watch server",
  },

ハマりポイント④：アプリケーションの HOST, PORT 設定

事象

開発サーバーを起動してブラウザで localhost:3000 等にアクセスしても、ページが表示されない場合があります。

対応方法

アプリケーション側で HOST と PORT の設定をします。
サーバーの設定ファイルで指定したり、

server/index.js

const host = process.env.HOST || '0.0.0.0'
const port = process.env.PORT || 3000

起動スクリプトにオプションで渡したりする方法があります。

package.json

  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3000 node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/nodemon/bin/nodemon.js server/index.js --watch server",
  },