Laragon番外編2-1｜Apacheからnginxへ切り替える実践手順｜WordPress編

Laragonでは、Apacheだけでなくnginxを使ってローカルサイトを動かすこともできます。

WordPressを普段Apacheで動かしていると、「nginxへ切り替えると何が変わるのか」「どの設定ファイルを見ればよいのか」が少し分かりにくく感じるかもしれません。

この記事では、実際にToshiLabのローカルWordPress環境をApacheからnginxへ切り替えながら、設定ファイルの場所、Virtual Host、PHP/FastCGIとの接続、発生したエラー、確認方法まで順番に整理します。

単に「nginxを起動できた」で終わらず、WordPressが正常に表示され、CSS・JavaScript・画像・管理画面まで問題なく動作するところまで確認していきます。

この記事で確認すること

今回確認するポイントは、大きく分けると次のとおりです。

• Apacheからnginxへ切り替える
• nginxの設定ファイルがどこにあるか確認する
• Virtual Hostの仕組みを確認する
• WordPressのリクエストがPHPへ渡る流れを理解する
• CSS・画像・JavaScriptが読み込めない場合を確認する
• nginx設定エラーへの対処方法を確認する
• nginx -t、アクセスログ、WordPress全体の動作を確認する

nginxそのものを完全に理解することが目的ではありません。

LaragonでWordPressを動かすときに、どこを確認すればよいのか分かる状態を目指します。

Apacheからnginxへ切り替えた最終状態

今回の最終的なゴールは、Apacheを停止した状態で、nginxがHTTPの80番ポート、HTTPSの443番ポートを使用し、WordPressを正常に表示できる状態です。

nginxへの切り替え後、WordPressトップページだけでなく、CSS・画像・レイアウトまで正常に読み込めることを確認しました。

ここが、この記事で最終的に目指す状態です。

ただし、最初からnginxへ80／443を割り当てたわけではありません。

最初は8080／8443でnginxを確認した

Apacheが80／443を使用している状態で、nginxまで同じポートを使用するとポートが競合します。

そこで切り替え作業の途中では、まずnginxを8080／8443で起動し、nginx自体が正常に動くかを確認しました。

この段階は、あくまで動作確認用の途中構成です。

Virtual Host側でも、この時点では8080／8443を使用していました。

nginxでWordPressが動作することを確認したあと、Apacheを停止し、最終的にnginxを80／443へ変更しました。

この流れを押さえておけば、この記事内に8080／8443と80／443の両方が登場しても混乱しにくくなります。

Laragonのnginx設定ファイルはどこにある？

nginxを使い始めたときに最初につまずきやすいのが、どの設定ファイルを見ればよいのかという点です。

Laragonでは、nginx本体の設定、PHPへの接続設定、プロジェクトごとのVirtual Host設定などが分かれています。

主に確認するのは、次の4か所です。

• nginx本体の nginx.conf
• Laragon側の php_upstream.conf
• sites-enabled 配下のVirtual Host設定
• Virtual Host生成元になる Nginx.server.tpl

順番に見ていきます。

sites-enabledにはプロジェクトごとの設定がある

Laragonでは、プロジェクトごとのnginx設定が sites-enabled 配下に配置されます。

実際のフォルダを見ると、複数の auto.*.conf が並んでいます。

ToshiLabのローカル環境では、auto.toshilab.jp.lab.conf がWordPress用Virtual Hostの設定ファイルとして生成されていました。

ここで注意したいのが、ファイル名に付いている auto. です。

nginx.confから追加設定が読み込まれる

nginx本体のメイン設定ファイルは nginx.conf です。

Laragonでは、このファイルからPHP用設定とVirtual Host設定が読み込まれています。

実際には、nginx.conf から追加の設定ファイルが include されています。

include "C:/laragon/etc/nginx/php_upstream.conf";
include "C:/laragon/etc/nginx/sites-enabled/*.conf";

include "C:/laragon/etc/nginx/php_upstream.conf";
include "C:/laragon/etc/nginx/sites-enabled/*.conf";

この関係が分かると、nginx.conf だけを開いてもWordPress用設定がすべて書かれていない理由が分かります。

Nginx.server.tplはVirtual Hostの生成元

今回確認したLaragon環境では、Nginx.server.tpl というテンプレートを確認できました。

このファイルには、PORT、HOSTNAME、PROJECT_DIR などの変数が用意されており、
LaragonがプロジェクトごとのVirtual Host設定を生成するときに使用します。

sites-enabled にある設定だけではなく、その設定がどこから生成されているのかまで確認しておくと、Laragonのnginx構成を追いやすくなります。

PHPへの接続はphp_upstream.confで管理される

WordPressはPHPで動くため、nginxからPHPへ処理を渡す必要があります。

Laragonでは、その接続先を php_upstream.conf で管理しています。

今回確認した環境では、127.0.0.1:10987 が使用されていました。

upstream php_upstream {
    server 127.0.0.1:10987;
}

upstream php_upstream {
    server 127.0.0.1:10987;
}

このポート番号はLaragonの環境によって異なる場合があります。

インターネット上の設定例にある 9000 などへ、理由なく書き換えないことが重要です。

WordPress用Virtual Hostを読み解く

ここまで設定ファイルの関係が分かったところで、実際のWordPress用Virtual Hostを見ていきます。

現在の最終構成では、Apacheを停止し、nginxが80／443を使用しています。

listenはnginxが受け付けるポート

現在の最終構成では、HTTPを80、HTTPSを443で受け付けます。

今回のようにApacheとnginxが同じIPアドレスで待ち受ける構成では、両方へ同じ80／443番ポートを割り当てて同時に起動することはできません。

今回の構成では、Apacheを停止し、nginxへ80／443を割り当てています。

443を使う場合はSSL設定も確認する

HTTPSでWordPressを表示する場合は、443番ポートを待ち受ける設定だけでなく、SSL証明書の設定も確認します。

今回のLaragon環境では、Virtual Host内にLaragon用のSSL証明書と秘密鍵が設定されています。

実際の設定では、ssl_certificate と ssl_certificate_key が使用されており、LaragonのSSLファイルを参照しています。

そのため、nginxを443番ポートで起動できても、HTTPSでページやCSS・JavaScript・画像が正常に読み込めない場合は、SSL設定も確認対象になります。

ブラウザから https:// でWordPressへアクセスし、ページ全体が正常に表示されることまで確認しておきましょう。

server_nameはどのホスト名を受け付けるか

server_name には、このVirtual Hostで受け付けるホスト名を指定します。

Laragonのローカルドメインだけでなく、検証用のホスト名を使用する場合も、この設定との対応を確認します。

rootはWordPress本体の場所

今回のWordPress環境では、ドキュメントルートをWordPress本体が置かれている場所へ設定しています。

root "C:/laragon/www/toshilab.jp";

root "C:/laragon/www/toshilab.jp";

今回の記事では、Laravelで使用するような /public ディレクトリをWordPressのrootには指定しません。

WordPress本体が置かれているディレクトリを使用します。

Apacheと違い、nginxは.htaccessを使わない

ApacheでWordPressを動かしている場合、パーマリンクなどのURL書き換えには .htaccess が使われます。

一方、nginxは .htaccess を読み込みません。

そのため、Apacheで使っていた .htaccess の設定をそのままnginxへコピーするのではなく、Virtual HostなどのNginx設定ファイル側でルーティングを設定します。

WordPressでは、この役割を担う重要な設定の1つが try_files です。

リクエストされたファイルやディレクトリが存在するか確認し、見つからない場合は index.php へ処理を渡すことで、WordPressのパーマリンクを動作させます。

try_filesがWordPressのindex.phpへ処理を渡す

WordPressでは、実際のファイルやディレクトリが存在しないURLも多数使用します。

そこで重要になるのが、location / の try_files です。

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

リクエストされたファイルやディレクトリが存在しない場合は、index.php へ処理を渡します。

WordPressのパーマリンクをnginxで動かすうえでも重要な設定です。

PHPはphp_upstreamへ渡される

PHPファイルへのリクエストは、PHP/FastCGIへ渡されます。

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass php_upstream;
}

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass php_upstream;
}

ここで、先ほど確認した php_upstream.conf がつながります。

設定ファイルを個別に暗記するより、

ブラウザ → nginx → Virtual Host → php_upstream → PHP → WordPress

という流れで考えると理解しやすくなります。

ページは開くのにCSS・画像が読み込めない場合

nginxへの切り替え途中では、WordPress本体のページは表示できても、CSS・JavaScript・画像・フォントなどが読み込めない状態になることがあります。

今回もDevToolsで、多数の ERR_CONNECTION_REFUSED が確認されました。

この状態になったら、見た目だけで原因を決めつけず、ブラウザのDevToolsでNetworkやConsoleを確認します。

特に見るのは次の部分です。

• Request URL
• HTTP / HTTPS
• ホスト名
• ポート番号
• HTTPステータス
• ERR_CONNECTION_REFUSED の有無

8080／8443から80／443へ切り替えた直後であれば、古いポート番号を参照しているURLが残っていないかも確認します。

また、HTML本体は表示できているのにCSS・JavaScript・画像などの読み込みだけ失敗している場合は、HTTPS側の443番ポートも確認します。

特に、アセットのRequest URLが https:// になっている場合は、nginxが443番ポートで待ち受けているか、SSL設定が正しく読み込まれているかを確認してください。

HTTP側の80番ポートが正常でも、HTTPS側の443番ポートやSSL設定に問題があると、一部のアセットだけ ERR_CONNECTION_REFUSED になることがあります。

ページ本体が表示された＝nginxへの切り替えが完全に成功したとは限りません。

server_names_hashエラーが出た場合

今回の作業では、nginx起動時に server_names_hash 関連のエラーも発生しました。

長いホスト名や複数の server_name を扱った場合、nginxから server_names_hash_bucket_size の値を増やすよう求められることがあります。

今回の環境では、nginx.conf の http ブロック内で値を調整しました。

server_names_hash_bucket_size 128;

server_names_hash_bucket_size 128;

設定値を変更したら、いきなりnginxを再読み込みせず、先に構文チェックを行います。

Nginx設定はバックアップしてから変更する

nginxの設定ファイルは、1文字の間違いでもnginxが起動できなくなる原因になります。

そこで、設定変更は決まった順番で行うのがおすすめです。

基本的な流れは次のとおりです。

1. 編集対象の設定ファイルをバックアップする
2. 必要な箇所だけ変更する
3. nginx -t を実行する
4. 問題がなければnginxの設定を再読み込みする
5. error.log を確認する
6. ブラウザでWordPressを確認する

設定変更と再読み込みを一気に進めないことが大切です。

nginx -tで構文チェックする

nginxには、設定ファイルの構文を確認するための -t オプションがあります。
※今回の検証環境では nginx-1.28.2 を使用していたため、次のフォルダへ移動して確認しました。使用しているnginxのバージョンに合わせてフォルダ名を読み替えてください。

cd C:\laragon\bin\nginx\nginx-1.28.2
.\nginx.exe -t

cd C:\laragon\bin\nginx\nginx-1.28.2
.\nginx.exe -t

正常なら、

syntax is ok

test is successful

と表示されます。

エラーが表示された場合は、再読み込みせず、表示されたファイル名や行番号を確認して修正します。

構文チェックが成功したら、設定を再読み込みします。

.\nginx.exe -s reload

.\nginx.exe -s reload

reload はnginxの設定を再読み込みする操作です。

ログファイルを再オープンする reopen とは用途が異なるので、混同しないようにします。

access.logでHTTP 200を確認する

ブラウザでページを表示できたら、アクセスログも確認しておくと安心です。

200 が記録されていれば、そのリクエストに対してnginxからHTTP 200のレスポンスが返されたことを確認できます。

表示がおかしい場合は、access.log だけではなく error.log も合わせて確認します。

必要に応じてApacheへ戻す

nginxでの検証後、元のApache環境へ戻したい場合は、先にnginxを停止してからApacheを起動します。

今回の最終構成ではnginxが80番・443番ポートを使用しているため、nginxを動かしたままApacheを同じポートで起動するとポートが競合します。

Laragonでnginxを停止し、Apacheを80番・443番ポートで起動したあと、WordPressのトップページや管理画面が正常に表示されることを確認してください。

切り替え後に表示できない場合は、Apacheとnginxの両方が同じポートを使用していないかも確認します。

WordPress全体を最終確認する

最後に、トップページが表示されたことだけで作業完了にはしません。

WordPressでは、管理画面、投稿、固定ページ、パーマリンク、画像、CSS、JavaScript、プラグインまで確認します。

少なくとも、次の項目を確認します。

• トップページ
• /wp-admin/
• 投稿ページ
• 固定ページ
• パーマリンク
• 画像
• CSS
• JavaScript
• 主要プラグイン
• access.log
• error.log

ここまで問題がなければ、Apacheからnginxへの切り替え確認は完了です。

まとめ

LaragonでWordPressをnginxへ切り替える場合、単にApacheを停止してnginxを起動するだけではありません。

大切なのは、どの設定ファイルが使われているのか、Virtual HostがどのようにWordPressへ処理を渡しているのか、PHP/FastCGIへどのようにつながっているのかまで確認することです。

今回の実作業では、8080／8443を使った途中検証から始め、最終的にApacheを停止してnginxを80／443で稼働させました。

途中では、静的ファイルの ERR_CONNECTION_REFUSED や server_names_hash エラーも発生しました。

こうしたトラブルも、設定ファイルの関係とログの場所が分かっていれば、一つずつ原因を追っていけます。

nginxの設定を変更するときは、

バックアップ → 編集 → nginx -t → 再読み込み → ログ確認 → ブラウザ確認

という流れを崩さないようにしましょう。

Laragon番外編の流れへ戻る

Laragon番外編では、nginxだけでなく、MySQL・phpMyAdmin・PHP・Node.js・Python・Go・Javaなど、開発環境を構成する各ツールを順番に扱っていきます。
今回の位置を確認したい場合は、「開発環境」の入口へ戻れます。

Laragon番外編では、Nginxだけでなく、複数バージョンの追加や切り替えなど、ローカル開発環境を扱うためのポイントを順番に整理しています。

Laragon番外編の流れを確認する

Laragon番外編1｜複数バージョンを追加・切り替える仕組みを理解する

次に読む

次は、MySQLとphpMyAdminをLaragonで追加・切り替える仕組みを確認していきます。

Laragon番外編3｜MySQL・phpMyAdminを追加・切り替える

Laragon番外編3｜MySQLを追加・切り替える｜phpMyAdminで接続確認する

toshi

フルスタックエンジニア

XFacebookInstagramContact

C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。