Laravel+Vue nginx 本番環境でapp.jsが読み込めない

index.blade.phpでnpm run prodしたapp.jsを読み込むとindex.blade.phpとまったく同じ中身のファイルが返る。

バックエンドにLaravelフロントエンドにVueを用いたwebアプリを作成しています。
webサーバーにはnginxを使用しています。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ config('app.name') }}</title>

  <!-- Scripts -->
  <script src="{{ mix('/js/app.js') }}" defer></script>

</head>
<body style="margin: 0">
  <div id="app"></div>
</body>
</html>

上記の様なbladeでwebpackでコンパイル（npm run prod）したpublic/js/app.jsを読み込んでいるのですが、このapp.jsの中身が上記のbladeと全く同じ中身になってしまいます。
取得したいapp.jsは本番用にコンパイルされたapp.jsです。
ecrからイメージをpullしてきて確認したところきちんとファイルが書き出され、
public/js/app.jsとして確認することができました。

##関係ありそうな情報等
ちなみにディレクトリ構成は以下です。

var/www/laravel├public
               ｜├js
               ｜｜├app.js
               ├resources
               ｜├js
               ｜｜├app.js
               ├その他laravelのファイル

nginxの設定は以下です。

server {
  listen 80;
   server_name example.com;←ドメインは仮です。
    root /var/www/laravel/public/;
    index index.php index.html;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
    }

  location ~ .php$ {
    fastcgi_split_path_info ^(.+.127.0.0.1)(/.+)$;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
  }
 }

webpack.mix.js

const mix = require("laravel-mix");

mix.webpackConfig({
    output: {
        chunkFilename: mix.inProduction()
            ? "prod/chunks/[name].js"
            : "dev/chunks/[name].js"
    }
}).js("resources/js/app.js", "public/js");

関係あるかはわかりませんがphp側のdockerfileも載せます。


FROM php:7.4.1-fpm-alpine
COPY ./docker/php/php.ini /usr/local/etc/php/

ARG TZ
RUN apk update && \
    apk add --update --no-cache --virtual=.build-dependencies \
    autoconf=~2.69 \
    gcc=~9.3 \
    g++=~9.3 \
    make=~4.2 \
    tzdata=2021a-r0 && \
    apk add --update --no-cache \
    icu-dev \
    libzip-dev \
    postgresql-dev \
    freetype-dev \
    bash \
    libjpeg-turbo-dev \
    libpng-dev && \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    echo ${TZ} > /etc/timezone && \
    apk del .build-dependencies && \
    : 'Install PHP Extensions' && \
    docker-php-ext-install -j$(nproc) pdo_pgsql opcache && \
    docker-php-ext-configure gd --with-freetype --with-jpeg && \
    docker-php-ext-install -j$(nproc) gd && \
    apk del --no-cache bash

COPY ./server /var/www

WORKDIR /var/www

RUN chmod -R 777 /var/www/laravel

開発環境では問題がなかったのですがawsのFargateを用いてインフラを構築し、
デプロイしたところこのような現象が発現しました。
初心者ゆえ様々な場所からコードをつぎはぎしているため、必要のないコードや明らかな誤りもあるかと思います。
アドバイスするにあたって必要な情報等あれば教えてください。

どうかアドバイスよろしくお願いいたします。

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

回答1件

自己解決

自己解決しました！

nginxのコンテナにpublic以下の公開フォルダをコピーしていませんでした。

FROM nginx:1.17-alpine

COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

ここを以下のようにしたところうまくいきました

FROM nginx:1.17-alpine

COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

RUN mkdir -p /var/www/laravel/public

COPY ./server/laravel/public /var/www/laravel/public

投稿2021/03/15 12:19

yokoiakinori

総合スコア0