MAMP で localhost:3000 を開けない

Question

現在こちらのサイトを参考に、 作業環境は MAMP で、laravel と Vue.js を用いたアプリ開発をしているのですが、環境構築の段階でつまづいてしまいました。

https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project#fn-(*1)

「フロントエンドのビルド」の項目で、

$ npm run watch

を実行し、localhost:3000 を実行しようとしましたが、開くことができません。
（厳密にいうと、更新しても読み込み時間が長すぎて一向に開かれる気配がありません。）

試したこと

① webpack.mix.js の変更

下記3つを試しました。

mix.browserSync('localhost:8888')
  .js('resources/js/app.js', 'public/js')
  .version()

mix.browserSync('localhost:3000')
  .js('resources/js/app.js', 'public/js')
  .version()

mix.browserSync({
    proxy: '192.168.0.18:3000',
    open: false
})

② MAMP の Ports の設定

Apache と Nginx のポート番号を 8888 や 3000 に変更してみましたがうまくいかず、、

③ php artisan serve の実行

http://127.0.0.1:8000

実行してこちらのリンクを開きましたが、404エラーが出てしまいました。

今も色々試しているのですが、うまくいかず、皆様のお力をお借りしたいです。
何卒よろしくお願いします。

Comments

[gouf]

参照記事は Docker 環境の構築ですが、なぜ MAMP 環境なのに参照されているのですか?
BrowserSync を採用しようとしていますが、Parcel で代用できませんか? : https://parceljs.org/getting_started.html

Answer 1

MAMP にてサーバー接続した際に、URLの末尾に /login /index のように入力することでとりあえず表示することに成功しました！　お騒がせしました。