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

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

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

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

Laravel 5

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

Q&A

解決済

2回答

4113閲覧

【Laravel-mix】Browsersyncを使用したい

yuta0408

総合スコア9

PHP

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

Laravel 5

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

0グッド

3クリップ

投稿2019/07/28 12:59

編集2019/07/28 13:02

前提・実現したいこと

Laravelを使用したアプリ開発を行なっています。
それにあたり、laravel-mixを使用してフロントの開発環境を構築しており、その中でBrowsersyncを使おうとしています。

発生している問題・エラーメッセージ

Browsersync自体は動作し、http://localhost:3000が開かれるのですが、Cannot GET /とだけ出て、内容が表示されません。
ターミナルで$ npm run watchを打つと、下記が出力されます。

Asset Size Chunks Chunk Names /css/style.css 215 KiB /js/app [emitted] /js/app /js/app.js 3.73 MiB /js/app [emitted] /js/app [Browsersync] Access URLs: ---------------------------------------- Local: http://localhost:3000 External: http://192.168.100.104:3000 ---------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 ---------------------------------------- [Browsersync] Serving files from: public [Browsersync] Watching files...

該当のソースコード

webpack.mix.js

javascript

1mix.js('resources/js/app.js', 'public/js') 2 .sass('resources/sass/style.scss', 'public/css') 3 .sourceMaps(false) 4 .webpackConfig({ 5 module: { 6 rules: [ 7 { 8 test: /.scss/, 9 loader: 'import-glob-loader' 10 } 11 ] 12 } 13 }) 14 .browserSync({ 15 server: 'public', 16 proxy: false, 17 files: [ 18 'views/**/*.blade.php', 19 'public/css/*.css', 20 'public/js/*.js' 21 ] 22})

package.json

{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.19", "bootstrap": "^4.1.0", "browser-sync": "^2.26.7", "browser-sync-webpack-plugin": "^2.0.1", "cross-env": "^5.1", "glob": "^7.1.4", "import-glob-loader": "^1.1.0", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.13", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" }, "browserslist": [ "last 2 versions", "ie 9" ] }

フォルダ構成

app
bootstrap
config
database
node_modules
public
├ css
├ js
├ index.php
resources
├ js
│ ├ components
│ ├ app.js
├ lang
├ sass
│ ├ foundation
│ ├ layout
│ ├ object
│ └ style.scss
├ views
routes
storage
tests
vendor
package.json
webpack.mix.js
※一部省略

試したこと

browsersyncの設定内のproxyやserverやportなどが原因だろうと思い、下記のページやドキュメントなどを参考に変更しました。
https://qiita.com/kan_dai/items/a9087fdb8886203d8eca
○ドキュメント
https://browsersync.io/docs/options/

補足情報(FW/ツールのバージョンなど)

Laravel:5.8

以上になります。非常に初歩的な内容な気もしており、大変恐縮なのですが、お力を貸していただけると大変有り難いです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

laravelと共用させるならbrowsersyncはプロキシモードで使用しなければならないのではないでしょうか?

参考にされているqiitaでは、index.htmlが指定されているのでその記事ではlaravelをapiとして利用しているのではないでしょうか

投稿2019/07/28 13:13

mikkame

総合スコア5036

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

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

yuta0408

2019/07/28 23:21

早速回答いただき、ありがとうございました!その通りで、プロキシを使用したところ表示されるようになりました。serverとproxyの使い分けが全然分かっておらず見当違いのことをしていたようです。本当に助かりました!お時間を割いていただき、ありがとうございました。
mikkame

2019/07/29 09:35

serverはbrowsersyncが簡易的なhttpを立てるだけなので、phpとかhtaccessとかは解釈してくれないんですよね。 proxyなら任意のサーバーをバックに入れることができる感じです
yuta0408

2019/07/29 12:16

serverとproxyの違いのご説明もありがとうございます!大変勉強になりました。
guest

0

webpack.mix.jsの中のbrowsersyncの設定をproxyにしたところ、表示されるようになりました。

JavaScript

1mix.js('resources/js/app.js', 'public/js') 2 .sass('resources/sass/style.scss', 'public/css') 3 .sourceMaps(false) 4 .webpackConfig({ 5 module: { 6 rules: [ 7 { 8 test: /.scss/, 9 loader: 'import-glob-loader' 10 } 11 ] 12 } 13 }) 14 .browserSync({ 15 proxy: "localhost:8888", 16 files: [ 17 './resources/views/**/*.blade.php', 18 './public/css/*.css', 19 './public/js/*.js' 20 ] 21})

投稿2019/07/28 23:22

編集2019/07/28 23:25
yuta0408

総合スコア9

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問