413エラーの対処法：忘備録

はじめに

昨日、仕事中に発生したエラーについての忘備録です。カスタマー対応中、顧客管理システムで画像ファイルをアップロードしようとした際に413エラーが発生しました。

使用技術

• PHP 8.2

• Ajax (jQuery)

• フレームワーク: Laravel 10

• インフラ: AWS ECS, Docker

413エラーとは？

413エラー（「Payload Too Large」とも呼ばれる）は、サーバーがリクエストを処理するためのペイロードが大きすぎる場合に発生します。つまり、アップロードしようとしているファイルがサーバーの設定で許可されているサイズを超えている場合にこのエラーが表示されます。

413エラーが発生する原因

1. ファイルのサイズが大きすぎる: サーバーの設定で許可されている最大ファイルサイズを超えている

2. Nginxの設定: デフォルトの設定で、特定のサイズ以上のリクエストを拒否するように設定されている場合がある

3. PHPの設定: PHPの設定で、アップロードできるファイルサイズやPOSTデータのサイズが制限されている場合がある

解決方法

1. Nginxの設定を変更する

Nginxの設定ファイル（通常は`nginx.conf`やサイトごとの設定ファイル）に以下の設定を追加または変更します：

server {
    ...
    client_max_body_size 50M;  # ここで最大アップロードサイズを設定します
    ...
}

設定変更後、Nginxを再起動します：

sudo systemctl restart nginx

2. PHPの設定を変更する

PHPの設定ファイル（`php.ini`）で、以下の設定を変更します：

upload_max_filesize = 50M
post_max_size = 50M

設定変更後、PHP-FPMを再起動します：

sudo systemctl restart php-fpm

3. Laravelの設定を確認する

Laravelの設定ファイル（通常は`config/filesystems.php`）で、アップロード制限が設定されている場合があります。必要に応じてこの設定も確認して変更します。

ユーザーに説明する方法

1. エラーページをカスタマイズする

`resources/views/errors/413.blade.php`にカスタムエラーページを作成します：

@extends('layouts.app')

@section('content')
<div class="container">
    <h1>413 エラー - リクエストが大きすぎます</h1>
    <p>アップロードしようとしているファイルが大きすぎます。ファイルサイズを確認し、制限内のサイズで再度試してください。</p>
</div>
@endsection

2. フォームでファイルサイズを検証する

JavaScriptやjQueryを使って、ファイルアップロード前にサイズをチェックし、ユーザーにアラートを表示します：

$('form').on('submit', function(e) {
    var fileInput = $('#file-input')[0];
    if (fileInput.files.length > 0) {
        var fileSize = fileInput.files[0].size / 1024 / 1024; // サイズをMBに変換
        if (fileSize > 50) { // 50MB以上の場合
            alert('ファイルサイズが大きすぎます。50MB以内のファイルを選択してください。');
            e.preventDefault();
        }
    }
});

まとめ

413エラーは、ファイルサイズがサーバーの制限を超えている場合に発生します。NginxやPHPの設定を変更することでこのエラーを回避できます。ユーザーに対しては、エラーメッセージを適切に表示し、ファイルサイズを確認する方法を案内することで、スムーズな利用を促進できます。