0
1

More than 3 years have passed since last update.

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

Posted at

発生した問題

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

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

スクリーンショット 2021-07-13 13.24.29.png
スクリーンショット 2021-07-13 13.53.18.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のパーマリンクの設定で気をつけること

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;
        }
    }
}
0
1
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
0
1