質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Vagrant

Vagrantは、VirtualBox上の仮想マシンを コマンドラインから作成してくれるソフトウェアです。 ビルド環境など容易に構築が可能です。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

5771閲覧

localhost:3000に接続できない(Laravel + Nuxt.js + Vagrant + Homestead)

nbi

総合スコア8

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Vagrant

Vagrantは、VirtualBox上の仮想マシンを コマンドラインから作成してくれるソフトウェアです。 ビルド環境など容易に構築が可能です。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/05/01 22:38

編集2018/05/01 23:11

前提・実現したいこと

VirtualBox + Vagrant + HomesteadでLaravel + Nuxt.jsの開発環境構築を行っています。
Laravel側では上手くアプリケーション立ち上げができたのですが、Nuxt.js側を立ち上げようとするもlocalhost:3000に接続できない状況です。

以下の記事を参考に進めました。

発生している問題

~/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',
....
}

動作確認のため、/resources/nuxt/pages/index.vue を以下のように変更し、
<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%

Build completed in 10.053s

DONE Compiled successfully in -943ms 22:27:51

OPEN http://localhost:3000

ここで、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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

MacならLaravelプロジェクト作成やnuxtのインストール・実行を全部Mac側でやればいいです。
http://localhost:3000はvagrant内なのでMac側からはlocalhostでは見えない。
おそらくhttp://homestead.test:3000でなら見えるはずけど
いちいちvagrant sshするのは無駄。
Mac側でyarn run devのほうが早い。

ついでに書くとphp artisan migrateもMac側からできる。
ドキュメントでさえvagrant内で実行するように書いてるけど。
https://readouble.com/laravel/5.6/ja/migrations.html#running-migrations

.envのDB_HOSTをHomestead.ymlのipと同じにするだけ。

DB_HOST=192.168.10.10

投稿2018/05/02 00:11

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nbi

2018/05/02 00:28

Larvelとaxiosを使った通信までいけました! 丁寧に教えていただき、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問