Laravel nginxでroot以外のページがNot Foundになってしまう

Question

現在Vue/Vue Router/Laravelを使用してアプリケーションの開発をしています。
dockerで開発環境を構築しサーバーはnginxを使用しています。
タイトルにもある通りなんですがvue routerを使用しコンポネートのrootを設定しており
http://localhostに設定してあるコンポネートのpathは問題なく表示されるのですが
他のコンポネートを表示させるために追加したURLを叩くと404notfoundが表示されてしまい
困っております。
解決方法としてnginxのdefault.confファイルにtry_files $uri $uri/ /index.php?$query_string;を
追加すればURLが'/'以外もアクセスできるというので下記のように追加しました。

server {
  listen 80;
    index index.php index.html;
    root /var/www/public;

  location / {
    root /var/www/public;
    index  index.html index.php;
    try_files $uri $uri/ /index.php?$query_string; ⇦追加
    }
}

これを追加した場合はコンテナを再起動しないと反映されませんでしょうか?
保存してnpm run watchで動かしてみたのですが404notfoundと表示されてしまいました。
また別の対応方法があればご教示頂きたいです。

一応下記にrouter.jsを載せておきます。http://localhost/favoriteでfavoritePageコンポネートを表示させたいです。

import Vue from "vue";
import VueRouter from "vue-router";

import topPage from "./page/topPage.vue";
import favoritePage from "./page/favoritePage.vue"

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        component: topPage
    },
    {
        path: "/favorite",
        component: favoritePage
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
});


export default router;

FROM php:7.2-fpm
COPY php.ini /usr/local/etc/php/

RUN apt-get update \
  && apt-get install -y zlib1g-dev mariadb-client \
  && docker-php-ext-install zip pdo_mysql

# nodejs install
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get install -y nodejs

#Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php -r "if (hash_file('sha384', 'composer-setup.php') === 'e5325b19b381bfd88ce90a5ddb7823406b2a38cff6bb704b0acc289a09c8128d4a8ce2bbafcd1fcbdc38666422fe2806') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1

ENV COMPOSER_HOME /composer

ENV PATH $PATH:/composer/vendor/bin


WORKDIR /var/www

RUN composer global require "laravel/installer"

version: '3'

services:
  php:
    container_name: php
    build: ./docker/php
    volumes:
      - ./myapp/:/var/www

  nginx:
    image: nginx
    container_name: nginx
    ports:
    - 80:80
    volumes:
    - ./myapp/:/var/www
    - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
    - php

  db:
    image: mysql:5.7
    container_name: db-host
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: database
      MYSQL_USER: docker
      MYSQL_PASSWORD: docker
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
    - ./docker/db/data:/var/lib/mysql
    - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
    - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
    - 3306:3306

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db-host
      - PMA_USER=docker
      - PMA_PASSWORD=docker
    links:
      - db
    ports:
      - 8080:80
    volumes:
      - /sessions

ちなみに下記のサイトを参考にしました。
https://qiita.com/3no3_tw/items/25cb7c0c09d51b56eb5a

myappの構成を追記しました。
myapp
-app
-bootstrap
-config
-database
-node_modules
-public
-resources
-routes
-storage
-tests
-vender
各種package.json等のファイル

Comments

[gemmaro]

コンテナ内で `$ nginx -s reload` しても解決しませんか (ref: https://nginx.org/en/docs/beginners_guide.html#control)

[hiroki88]

コンテナの中で行ったところbash: nginx: command not foundとなってしまいました。
phpコンテナを使用しているからでしょうか?
docker-compose exec php bashでコンテナに入りました。

[gemmaro]

Bashシェルがnginxを知らないということは、次の2つが考えられます。
* nginxはインストールされているが、PATHが通っていない
* nginxがインストールされていない
もし後者であれば、nginx用の設定ファイルがあっても、サーバの振舞いには影響しません。

「PHPコンテナを使用している」とのことですが、これはPHPのDockerイメージ (https://hub.docker.com/_/php) を使用されているということでしょうか。差し支えなければ、Dockerfileも掲載していただけますと幸いです。Dockerfileで素材となっているイメージと、それに追加でインストールしているパッケージの情報がわかります。

また、全体の構成がどのようであるのかについて、私がまだ把握できていません。問題の解決自体には関係しないかもしれませんが、docker-compose.ymlファイルの中身やファイル構成も有益な情報です。構成については図にすると分かりやすいこともあります。こちらでも問題文から想像できる構成について、図を描いて確認させていただくかもしれません。

[hiroki88]

そうなんですね。教えて頂いたことを確認してみます。
Dockerfileとdocker-compose.ymlを追加しました。
お手数ですが見ていただけると嬉しいです。

[rubytomato]

vueのビルドファイルはデフォルトではdistディレクトリだとおもいますが、publicに出力されるように変更されているのでしょうか?

[hiroki88]

そこらへんの設定はしていないと思います。
もし可能であればvueの出力先の変更はどちらで行うか教えて頂いてもよろしいですか?

[rubytomato]

そのあたりは、"vue build dist 変更"などのキーワードで調べるとわかると思いますので、調べてみてください。

単にvueのビルドファイルを反映したいのであれば、
nginxのdefault.confの

root /var/www/public;

の部分を、

root /var/www/dist;

に変えると、ルーティングも反映されるように思います。

あとは、phpプロジェクトとvueプロジェクトの役割がどうなっているのかよくわからないので、このあたりの情報も追記頂けると回答できるかもしれません。（たとえば、バックエンドがphpでフロントがvueとか、phpプロジェクトにjQueryの代わりにvueを入れているとかなど）
その時はmyappディレクトリ下の構成も追記ください。

[hiroki88]

かしこまりました。
一応nginxのdefault.confではroot /var/www/public;となっております。

役割としてはバックエンドにPHP、フロントエンドでvueを使用しております。jQueryは使用しておりません。
参考にしているのは下記のサイトになります。
https://www.hypertextcandy.com/vue-laravel-tutorial-authentication

[rubytomato]

> 一応nginxのdefault.confではroot /var/www/public;となっております。
vueでビルドを行った後に、default.confのこの部分を /var/www/dist; に変えてみたらどうなりますか？

myapp下の構成を追記して頂きましたが、ビルドして出来るはずのdistやソースディレクトリのsrcが見当たらないのですが、これらは全部vueプロジェクト関連のディレクトリ・ファイルでしょうか？

[hiroki88]

myapp下の構成についてはvueプロジェクトではなくLaravelで作成されたものになります。

Answer 1

https://qiita.com/yoshinyan/items/f84006301a3ed79b1cda
こちらのサイトを参考に修正しました。