はじめに

　Laravel 10から入門したが、Laravelってバージョンによって操作コマンドや記述方法、ディレクトリ構造が部分的に違う。今回は自分が遭遇した403、404の解決事例を備忘録として記述する。

ChatGPTやネット記事に騙されてはいけない

　ChatGPTは古いバージョンの話が混在した返答をしてくる。またネット記事はバージョンが明記されていないものは自分が操作しているバージョンに当てはまるのかどうか確認して実行する。

ウェルカムページが403

　apache2の設定が原因だった。必要なapache2の設定は、AllowOverwride Allと、mod-rewrite有効化。

/etc/apache2/sites-available/000-default.conf

<Virtualhost *:80>
    ServerName *****
    DocumentRoot /home/user/project/public

    <Directory "/home/user/project/public">
        Options FollowSymLinks
        AllowOverwride All
        Reqire All granted
    </Directory>
</Virtualhost>

rootで実行

a2enmod rewrite

systemctl restart apache2

　apacheを再起動するとpublicにあるhtaccessが動くようになり、ウェルカムページが表示されるはず。

それでも403なら

　画像ファイル等を使用している場合、storageにリンクを張る必要がある。

プロジェクトのユーザーで実行

php artisan storage:link

プロジェクトのユーザーで実行

chmod -R 775 storage

chmod -R 775 bootstrap/cache

ついでにログファイルへの書き込み権限も与えておくと良い。

chmod 777 storage/logs/laravel.log

DocumentRootを変えられない場合

　プロジェクトユーザーの公開ディレクトリをUserdirで変更する。

/etc/apache2/mods-available/userdir.conf


    Userdir enabled
    Userdir disabled root appuser

<Directory /home/appuser/project/public>
    Options FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

ログインページが404

　ウェルカムページが表示されているのに"\login"にアクセスすると404となった。
　これはアセットの構築の仕方とbladeの記述方法がネットで調べて出てきた古いバージョンとは違うことが原因だった。

　Laravel 10で必要なものはnodejsとnpm、Viteによるビルド。
　nodejsはそのままインストールしようとすると古いバージョンが入るので、リポジトリの追加から。

rootで実行

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

　上記のコマンドはそのうちサポートしなくなるからGitを見ろという警告文が出た。インストールするときしか使わないので今回はそのまま実行した。

rootで実行

apt update

rootで実行

apt install nodejs

　これでnodejsとnpmがインストールされた。nodejsはLTS版の新しいものを入れておくとベター。（記事を書いているときは18が入った。）

　プロジェクトを作成する一般ユーザーへ移る。プロジェクトディレクトリで以下を実行。

rootからプロジェクトユーザーへ移行

exit

/home/user/projectで実行

npm install

　ファイルが自動で作られる。

Viteでいろいろやる

　プロジェクトディレクトリにvite.config.jsというファイルがあるのでそれを編集し、使用するcssやjsのパスを記述する。書き方は色々あるっぽい。

　画像ファイルやjsファイルも同様に処理する。ここでは例としてcssファイルをあげる。

/home/user/project/vite.config.js

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

　cssファイルをresources/cssに設置して以下を実行。

npm run build

　publicにasset/cssが作られる。jsもcssもまるでコンパイラみたいになったな～。

Viewの記述

　@vite("resources配下のパス")で記述する。

bladeファイルの例

<html>
    <head>
        <title>@yield('title')</title>
        @vite(resources/css/mycss.css)
    </head>

<body>
～　以下略　～

　以前のバージョン（8まで？）だと{{ asset('css/mycss.css') }}のように記述していたらしい。ややこしい。ViteではなくLaravel-mixを使っていたとかなんとか...。

以前の記述方法

<link rel="stylesheet" href="{{ asset('resource/css/mycss.css') }}">

参考