AWS Elastic Beanstalk で作成したWordPress環境で、カスタムパーマリンクを設定すると404になってしまう問題の解決（Nginx）

# 発生した問題

## WordPressでカスタムパーマリンクを設定すると、記事ページなどが404になってしまう

「基本」であれば問題は無い。
しかし、カスタムパーマリンクに変更すると記事ページなどが404になってしまう。また、投稿ページでも一部JavaScriptファイルが404で読み込めないエラーが発生し、投稿、下書き保存などができなくなってしまう。

![スクリーンショット 2021-07-13 13.24.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85825/9a11a3b0-fcb8-ef45-6cf6-343c19cf7963.png)
![スクリーンショット 2021-07-13 13.53.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85825/5d1f8ec4-39e5-9d35-880a-3a81989b0660.png)

補足だが、ここで言う「カスタムパーマリンク」は「基本」以外の全ての設定のことである。
「基本」以外のパーマリンクは、WordPressがサジェストとして用意しているだけで、構造は全てカスタムパーマリンクと変わらない。（カスタムパーマリンクでも同じ設定ができる。）

## 環境

| Key | Value | Reamrks |
|:---|:---|:---|
| AWS | Elastic Beanstalk | |
| プロキシサーバ | Nginx | |
| SSL | Yes | |
| ロードバランサー | application | |
| DB | MySQL | |


# 解決方法

## nginx.conf に追記を行う

以下の設定を追記する。

```nginx.conf
http {
    server {
        location / {
            try_files $uri $uri/ /index.php?$args;
        }
    }
}
```

参考: [【Nginx】WordPressのパーマリンクの設定で気をつけること](https://hacknote.jp/archives/57635/)

### Before


```nginx.conf
#Elastic Beanstalk Nginx Configuration File

user                    nginx;
error_log               /var/log/nginx/error.log warn;
pid                     /var/run/nginx.pid;
worker_processes        auto;
worker_rlimit_nofile    32633;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    include       conf.d/*.conf;

    map $http_upgrade $connection_upgrade {
        default     "upgrade";
    }

    server {
        listen        80 default_server;
        access_log    /var/log/nginx/access.log main;

        client_header_timeout 60;
        client_body_timeout   60;
        keepalive_timeout     60;
        gzip                  off;
        gzip_comp_level       4;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        # Include the Elastic Beanstalk generated locations
        include conf.d/elasticbeanstalk/*.conf;
    }
}
```

### After

```nginx.conf
#Elastic Beanstalk Nginx Configuration File

user                    nginx;
error_log               /var/log/nginx/error.log warn;
pid                     /var/run/nginx.pid;
worker_processes        auto;
worker_rlimit_nofile    32633;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    include       conf.d/*.conf;

    map $http_upgrade $connection_upgrade {
        default     "upgrade";
    }

    server {
        listen        80 default_server;
        access_log    /var/log/nginx/access.log main;

        client_header_timeout 60;
        client_body_timeout   60;
        keepalive_timeout     60;
        gzip                  off;
        gzip_comp_level       4;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        # Include the Elastic Beanstalk generated locations
        include conf.d/elasticbeanstalk/*.conf;

        # WordPress custom permalink
        # @see https://hacknote.jp/archives/57635/
        location / {
            try_files $uri $uri/ /index.php?$args;
        }
    }
}
```