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

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

ただいまの
回答率

90.48%

  • PHP

    20902questions

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

  • Laravel 5

    1998questions

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

  • Vagrant

    1233questions

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

  • Vue.js

    775questions

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

  • Nuxt.js

    70questions

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 652

nbi

score 2

 前提・実現したいこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

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 09:28

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • PHP

    20902questions

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

  • Laravel 5

    1998questions

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

  • Vagrant

    1233questions

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

  • Vue.js

    775questions

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

  • Nuxt.js

    70questions