DockerでNuxt+Firebase開発環境を構築してホストのブラウザから接続してみる

DockerでNuxt開発環境を構築してホストのブラウザから接続するまでの流れです。

【関連記事】
DockerでNuxt開発環境を構築してfirebase loginできるようにする

環境など

Windows 7 に VirtualBox を入れて、そこでUbuntuの仮想マシンを動かしています。
ubuntu内にdockerでnuxt開発環境を構築して、Ubuntuのブラウザからアクセスしようと思います。

手順

ここからの作業はUbuntuでおこないます。
今回は以下の流れでNuxt開発用のDockerコンテナを起動しています。

$ vim Dockerfile
FROM node:lts

RUN apt-get update && \
    apt-get upgrade -y && \
    yarn global add @vue/cli && \
    yarn global add @vue/cli-init

EXPOSE 3000

$ docker build -t [image_name] .
$ docker run -d -it -p 3000:3000 -v $(pwd):/work [image_name]
$ docker exec -it [container_name] bash

ここからの作業はDockerでおこないます。

プロジェクトを作成します。

$ npx create-nuxt-app [project-name]

この状態で、npm run devして、http://localhost:3000/に接続しようとしてもダメでした。

以下の変更を追加でおこないます。

$ vim nuxt.config.js
export default {
  mode: 'universal',
  // ここから
  server: {
    port: 3000,
    host: '0.0.0.0',
  },
  // ここまで
  ...

$ npm run dev

この状態でhttp://localhost:3000へアクセスするとNuxtの起動画面が表示されるはずです。

以上です。