Vagrant+Dockerの開発環境上でNuxt.jsのスターターキットを実行してブラウザで表示させたい

ここに質問の内容を詳しく書いてください。
Vagrant(ubuntu-xenial-16.04)上にDocker環境を構築し、下記Nuxt.jsのプロジェクトをブラウザで表示させたいのですが、"npm run dev"してlocalhost:3000にアクセスしても表示されません。

nuxt/starter

https://github.com/kaydwithers/blog-in-5-minutes-demo

実行するDockerコンテナは下記の通りです。
・nginx
・node:10.11.0-alpine

docker ps時の一覧

my-blog_nginx       "nginx -g 'daemon of…"   16 minutes ago      Up 16 minutes       0.0.0.0:3000->80/tcp   my-blog_nginx_1
my-blog_nuxt        "node"                   16 minutes ago      Up 16 minutes       80/tcp                 my-blog_nuxt_1

docker-compose.yml

version: '3'

services:
  nginx:
    build: ./nginx
    ports:
      - '3000:80'
    # volumes:
    #   - ./data/www:/var/www/
    #   - ./nginx/server.conf:/etc/nginx/nginx.conf

  nuxt:
    build: ./nuxt
    volumes:
      - ./data/www:/app
    tty: true

Dockerfile

Nuxtディレクトリ配下

FROM node:10.11.0-alpine

WORKDIR /app

RUN apk update && \
    npm install -g npm && \
    npm install -g vue-cli

nginxディレクトリ配下

FROM nginx:latest

RUN apt update && \
    apt install -y vim less && \
    apt install nginx

試したこと

ポートフォワードの設定か、docker-compose.ymlのnginxのvolumes設定が怪しい感じがしています。＃でコメントアウトしているのは、上記の設定だとWEBサーバーが起動しないので、確認のためコメントアウトしたところ、localhost:3000でnginxのwelcomeページは表示されました。

参考情報

https://qiita.com/akashixi/items/2ebe9404c64a8854b4e5
https://qiita.com/hisako135/items/082115b50df92ef3e941

当方、Docker、Nuxt.jsの開発が初めてのため、試行錯誤しましたが、万策尽きましたのでお力をお貸しいただけると幸いです。

kazto

2019/03/13 23:12

vagrant上にdockerを載せることに何か理由はありますでしょうか。通常であれば直接Dockerを使えば良いように思います。

kohske25

2019/03/14 13:51 編集

これという理由は無いのですが、普段の開発環境をVagrant上で行っており、ローカル環境を汚染しないこともあり、Vagrantを利用しておりました。調べた感じでも同様の環境で構築している人が多く見受けられたということもありますが。 https://qiita.com/keik/items/1745f0726487760fb05f