ウェブログラム ~学習するな実践せよ~

DockerやVagrantで立てたNuxt.jsにブラウザからアクセス出来ない

2019/01/30

「Docker」や「VirtualBox+Vagrant」などの仮想環境でNuxt.jsを起動した場合に、ホストOS(MacOSやWindows)のブラウザからアクセス出来ないことが多々あります。

今回は簡単にアクセスできるようになる方法を紹介します。

Nuxt.jsの設定を追記する

Nuxt.jsのデフォルトの設定だと「localhost:3000」でアクセスを受け付けています。しかし、仮想環境を利用している場合であれば、ホストOSからアクセスすることが出来ません。

デフォルトの設定であれば、Nuxt.jsを起動するとコンソール上に

Listening on: http://localhost:3000

と表示されます。

プロジェクト直下の設定ファイルを編集します。

nuxt.config.js
module.exports = {
server: {
host: '0.0.0.0',
port: 3000
},

ホストを「0.0.0.0」、ポートを「3000」にします。

そしてもう一度、Nuxt.jsを起動すると、ホストOSのブラウザからアクセス出来るようになります。

今回ポートは3000にしていますが、好きなポートに変更してもらってOKです。

特にDockerなどを使用している場合はDockerfileのEXPOSEでブラウザアクセスするポートを開放しているかと思いますので、そのポートを指定してあげてください。

私の環境であれば、

Dockerfile
FROM node:8.11.3-alpine
WORKDIR /app
RUN apk update && \
apk add git && \
npm install -g npm && \
npm install -g vue-cli
EXPOSE 9000
CMD ["/bin/sh"]

このようなDockerfileを記述しています。9000番を開放しているため、Nuxt.jsの設定ファイルは以下のようにしてあります。

nuxt.config.js
module.exports = {
server: {
host: '0.0.0.0',
port: 9000
},

以上で終わりです。

2019/01/30