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

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

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

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

PHP

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

解決済

Docker + Laravel + nginx + Vue2.x で app.js が404になる

nakanohitobot
nakanohitobot

総合スコア46

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

PHP

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

1回答

0リアクション

0クリップ

338閲覧

投稿2022/08/03 13:32

編集2022/08/03 14:31

現在の状態

Docker + Laravel + nginx + Vue2.x で環境構築を行っています。
自分でDockerイメージを作成し、LaravelのWelcomeページにアクセスすることはできましたが、Vue2.xの設定で躓いております。

具体的には、npm run development を実行しても、ページが真っ白のままで、Chromeのコンソールに、以下のエラーが出てしまいます。

GET http://localhost/js/app.js net::ERR_ABORTED 404 (Not Found)

Vueのセットアップ手順

環境構築は、Laravelを、Dokcerの appコンテナ(php-fpmコンテナ) /var/www/html/laravel-project にセットアップ後、以下の手順でVueのセットアップを行っています。
※ docker-compose.yamlにて、ローカルの /src に Docker内の /var/www/html/ をマウントしています。


appコンテナ内の /var/www/html/laravel-project でVueをインストール
 npm install vue@2.7.8 --save-dev  npm install vue-template-compiler@2.7.8 --save-dev --production=false  npm install vuetify@2.6.8 --save-dev
src/laravel-project/resources/js/app.js にVueの設定を追加
require("./bootstrap"); window.Vue = require('vue'); Vue.component('app-component', require('./components/App.vue').default); var app = new Vue({ el: '#app', data: { message: 'Hello vue.js!' }, });
App.vueコンポーネントを作成

・src/laravel-project/resources/js/components/App.vueを作成

<template> <h1>Hello World Vue</h1> </template>
BladeファイルからApp.vueを呼び出す
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> {{-- <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}} </head> <body> <div id="app"> <app-component></app-component> </div> <!-- Scripts --> <script src="{{ mix('js/app.js') }}" defer></script> </body> </html>

docker-compose up -d でコンテナを再起動
appコンテナ内の /var/www/html/laravel-project で npm run development を実行

自分で試したこと

nginxの設定変更

public/js/app.js は、確かに存在しておりますので、nginxの設定がいけないのかと思い、エイリアスを指定してみましたが、駄目でした。

location = /js/app.js { alias /var/www/html/laravel-project/public/js/; }

他に、npmやLaravelのキャッシュクリア、app.jsの絶対パスをBladeファイルに指定しても駄目でした。

各種設定ファイルの中身

最後に、DockerFile、nginxのdefault.conf、docker-compose.yaml も掲示します。

DockerFile

FROM php:7.4.20-fpm COPY php.ini /usr/local/etc/php/ RUN apt-get update && apt-get install -y \ vim \ less \ git \ zlib1g-dev libzip-dev unzip \ && docker-php-ext-install zip pdo_mysql WORKDIR /var/www # Composerのインストールと設定 COPY --from=composer /usr/bin/composer /usr/bin/composer ENV COMPOSER_ALLOW_SUPERUSER 1 ENV COMPOSER_HOME /composer ENV PATH $PATH:/composer/vendor/bin RUN composer global require "laravel/installer" # Node.jsのインストール COPY --from=node:16.16.0 /usr/local/bin/node /usr/local/bin/ COPY --from=node:16.16.0 /usr/local/lib/node_modules/ /usr/local/lib/node_modules/ RUN ln -s /usr/local/bin/node /usr/local/bin/nodejs \ && ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm \ && ln -s /usr/local/lib/node_modules/npm/bin/npx-cli.js /usr/local/bin/npx

default.conf

server { listen 80; server_name localhost; location / { root /var/www/html/laravel-project/public; index index.html index.htm index.php; try_files $uri $uri/ /index.php?$query_string; } location = /js/app.js { alias /var/www/html/laravel-project/public/js/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } location ~ \.php$ { root /var/www/html/laravel-project/public; fastcgi_pass app:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } }

docker

version: '3' services: app: build: ./php container_name: app volumes: - ./src:/var/www/html depends_on: - mysql working_dir: /var/www/html nginx: image: nginx:1.15 container_name: nginx ports: - 80:80 volumes: - ./src:/usr/share/nginx/html - ./nginx/default.conf:/etc/nginx/conf.d/default.conf depends_on: - app mysql: image: mysql:5.7 container_name: mysql environment: MYSQL_DATABASE:test_db MYSQL_ROOT_PASSWORD: hoge MYSQL_USER: hoge MYSQL_PASSWORD:hoge TZ: Asia/Tokyo ports: - 3301:3306 volumes: - ./mysql/data:/var/lib/mysql - ./mysql/my.cnf:/etc/my.cnf phpmyadmin: image: phpmyadmin/phpmyadmin container_name: phpmyadmin environment: PMA_ARBITRARY: 1 PMA_HOST: mysql PMA_USER: hoge PMA_PASSWORD:hoge ports: - 3300:80 volumes: - ./phpmyadmin/sessions:/sessions

どなたか、原因が思い当たる方、いらっしゃらないでしょうか?
ご教示いただければ幸いです。

追記です。
var/nginx/log/error.log は空で、特にnginxのエラーはでておりませんでした。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

AbeTakashi

2022/08/03 14:16

403とか404とか500とかのエラーが出てる場合は、まずはサーバ側のログ(nginxやLaravel)を確認することをお勧めします。たぶん404だとnginxが出してると思うので、nginxのエラーログを見ればエラーの原因が分かる可能性があります。
nakanohitobot

2022/08/03 14:30

アドバイスありがとうございます。おっしゃるとおりログについて記載すべきでした。 appコンテナ内の、var/nginx/log/error.log は空であり、なにも書かれておりません。。
AbeTakashi

2022/08/03 14:41

だとすればLaravelが出してるログはどうでしょうか? もしくはnginxの設定でエラーログを吐かない設定になってないでしょうか? 通常の設定で404が出てるなら、何かしらエラーログを出すのが普通だと思いますし、そのログを見ないと解決が難しい案件だと思います。404エラーはPHPプログラム側に直接の原因がある可能性はあまり高くないので、ログを確認することが重要です。
nakanohitobot

2022/08/03 18:37

laravel.logにもなにも記載はありませんでした。 nginxのエラーログを出そうと思い、default.confを編集したところ、なぜか正常に動作するようになりました…。 default.confから、エラーログの設定をコメントアウトしても、正常に動作します。 一体何だったのでしょうか??ファイルを編集したことで、残っていたキャッシュが消えたとか? 試しに最初から(dockerイメージをビルドするところから)始めても、正常に動作しておりますので、これにて解決とさせていただきます。 ありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

PHP

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです