前提・実現したいこと
VirtualBox + Vagrant + HomesteadでLaravel + Nuxt.jsの開発環境構築を行っています。
Laravel側では上手くアプリケーション立ち上げができたのですが、Nuxt.js側を立ち上げようとするもlocalhost:3000に接続できない状況です。
以下の記事を参考に進めました。
- 【Laravel超入門】開発環境の構築(VirtualBox + Vagrant + Homestead + Composer)
- Laravel に Nuxt.js プロジェクトを入れたい
- LaravelとNuxt.jsを同一レポジトリで管理するときの構成
発生している問題
~/MyVagrant/app ```というディレクトリを作り、そこにHomesteadを落とし初期化を実行しました。
$ git clone https://github.com/laravel/homestead.git Homestead
$ cd ~/MyVagrant/app/Homestead
$ bash init.sh
ここでHomestead.ymlが生成されましたので、以下のように設定しました。
ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox
authorize: ~/.ssh/id_rsa.pub
keys:
- ~/.ssh/id_rsa
folders:
- map: ~/MyVagrant/app
to: /home/vagrant/code
sites:
- map: homestead.test
to: /home/vagrant/code/laravel/public
databases:
- homestead
blackfire:
- id: foo
token: bar
client-id: foo
client-token: bar
ports:
- send: 50000
to: 5000
- send: 7777
to: 777
protocol: udp
次に仮想OS側でLaravelをインストールしました。
$ vagrant ssh
ログイン後
$ mkdir code
$ cd code
$ composer create-project laravel/laravel --prefer-dist laravel
/etc/hosts には以下を追記し、homestead.testにアクセスするとLaravelのwelcomeページが表示されました。
192.168.30.10 homestead.test
次に仮想OS側にNuxtを入れようとしました。laravelの中にresources/nuxtというディレクトリを切って入れました。
$ yarn global add vue-cli
$ cd laravel
$ vue init nuxt-community/starter-template resources/nuxt
次に不要なファイルの削除・移動を行い、
$ mv resources/nuxt/package.json package.json
$ mv resources/nuxt/nuxt.config.js nuxt.config.js
nuxt.config.jsの設定を変更しました。
module.exports = {
....
srcDir: 'resources/nuxt',
....
}
<template> <div>HelloWorld</div> </template> ``` Nuxt.js側の立ち上げを試みました。 ``` $ yarn run dev yarn run v1.6.0 $ nuxt nuxt:build App root: /home/vagrant/code/laravel/resources/nuxt +0ms nuxt:build Generating /home/vagrant/code/laravel/.nuxt files... +3ms nuxt:build Generating files... +82ms nuxt:build Generating routes... +12ms nuxt:build Building files... +61ms nuxt:build Adding webpack middleware... +4s ████████████████████ 100%動作確認のため、/resources/nuxt/pages/index.vue を以下のように変更し、
Build completed in 10.053s
DONE Compiled successfully in -943ms 22:27:51
ここで、localhost:3000にホストOS側からアクセスしようとするも、接続できない状況になっております。 ## 試したこと ポート3000が他で使われていないことは以下で確認しました。
$ lsof -i:3000
他に原因など検討がつきましたら、ご教授いただけますと幸いです。 ## 補足情報 Vagrant:2.0.3 VirtualBox:5.1.10 ゲストOS:Ubuntu 18.04 ホストOS:macOS High Sierra 10.13.4 yarn:1.6.0 vue-cli:2.9.3 nuxt:^1.0.0
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/02 00:28