1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Laravel 10で 403 forbidden、404 not found

Posted at

はじめに

 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で必要なものはnodejsnpmViteによるビルド
 nodejsはそのままインストールしようとすると古いバージョンが入るので、リポジトリの追加から。

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

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

rootで実行
apt update
rootで実行
apt install nodejs

 これでnodejsnpmがインストールされた。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

 publicasset/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') }}">

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?