現在の状態

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
1FROM php:7.4.20-fpm
2COPY php.ini /usr/local/etc/php/
3RUN apt-get update && apt-get install -y \
4    vim \
5    less \
6    git \
7    zlib1g-dev libzip-dev unzip \
8  && docker-php-ext-install zip pdo_mysql
9
10WORKDIR /var/www
11
12# Composerのインストールと設定
13COPY --from=composer /usr/bin/composer /usr/bin/composer
14ENV COMPOSER_ALLOW_SUPERUSER 1 
15ENV COMPOSER_HOME /composer
16ENV PATH $PATH:/composer/vendor/bin
17RUN composer global require "laravel/installer"
18
19# Node.jsのインストール
20COPY --from=node:16.16.0 /usr/local/bin/node /usr/local/bin/
21COPY --from=node:16.16.0 /usr/local/lib/node_modules/ /usr/local/lib/node_modules/
22RUN ln -s /usr/local/bin/node /usr/local/bin/nodejs \
23    && ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm \
24    && ln -s /usr/local/lib/node_modules/npm/bin/npx-cli.js /usr/local/bin/npx
25

default.conf
1server {
2    listen       80;
3    server_name  localhost;
4
5
6    location / {
7        root   /var/www/html/laravel-project/public;
8        index  index.html index.htm index.php;
9        try_files $uri $uri/ /index.php?$query_string;
10    }
11
12    location = /js/app.js {
13        alias /var/www/html/laravel-project/public/js/;
14    }
15
16    error_page   500 502 503 504  /50x.html;
17    location = /50x.html {
18        root   /usr/share/nginx/html;
19    }
20
21    location ~ \.php$ {
22        root           /var/www/html/laravel-project/public;
23        fastcgi_pass   app:9000;
24        fastcgi_index  index.php;
25        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
26        include        fastcgi_params;
27    }
28}

docker
1version: '3'
2services:
3    app:
4        build: ./php
5        container_name: app
6        volumes:
7            - ./src:/var/www/html
8        depends_on:
9            - mysql
10        working_dir: /var/www/html
11    nginx:
12        image: nginx:1.15
13        container_name: nginx
14        ports:
15            - 80:80
16        volumes:
17            - ./src:/usr/share/nginx/html
18            - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
19        depends_on:
20            - app
21    mysql:
22        image: mysql:5.7
23        container_name: mysql
24        environment:
25            MYSQL_DATABASE:test_db
26            MYSQL_ROOT_PASSWORD: hoge
27            MYSQL_USER: hoge
28            MYSQL_PASSWORD:hoge
29            TZ: Asia/Tokyo
30        ports:
31            - 3301:3306
32        volumes:
33            - ./mysql/data:/var/lib/mysql
34            - ./mysql/my.cnf:/etc/my.cnf
35    phpmyadmin:
36        image: phpmyadmin/phpmyadmin
37        container_name: phpmyadmin
38        environment:
39            PMA_ARBITRARY: 1
40            PMA_HOST: mysql
41            PMA_USER: hoge
42            PMA_PASSWORD:hoge
43        ports:
44        - 3300:80
45        volumes:
46        - ./phpmyadmin/sessions:/sessions

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

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

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イメージをビルドするところから）始めても、正常に動作しておりますので、これにて解決とさせていただきます。ありがとうございました。

行動規範の内容に同意します

回答1件

自己解決

nginxのエラーログを出そうと思い、default.confを編集したところ、なぜか正常に動作するようになりました…。
default.confから、エラーログの設定をコメントアウトしても、正常に動作します。
一体何だったのでしょうか？？ファイルを編集したことで、残っていたキャッシュが消えたとか？

試しに最初から（dockerイメージをビルドするところから）始めても、正常に動作しておりますので、これにて解決とさせていただきます。

投稿2022/08/03 18:39

nakanohitobot

総合スコア48