現在の状態
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のエラーはでておりませんでした。

回答1件
あなたの回答
tips
プレビュー