背景
先日より、必要に迫られてLinuxのUbuntuにnginxとPHPを構築しました。
LinuxはMacで動作する仮想環境Parallels上にインストールし、そのLinuxにnginxとPHPをインストールして利用しています。
nginxはmacOSでも使えるということで、Macにローカルサイトを作ってみよう！
ということでインストールしてみました。
いろいろ苦労したところもありましたので、同じような境遇の方がいらっしゃるかもしれないと思い、記録に残すことにしました。
動作させる環境
- macOS Sequoia 15.2 Apple Silicon
- nginx
- PHP8.3
- VSCode (MacのTerminalでも可)
nginxをインストールする
Homebrewを使ってインストールします。
Homebrewをインストールされていない方は、公式サイトを参考にしてインストールしてください。
Homebrew
ターミナルを使ってnginxをインストールします。
brew install nginx
nginxを起動します。
nginx
これでnginxが動いていますので、ウェブサーバーにアクセスして動作を確認してみます。
Safariを起動し、localhost:8080へアクセスしてみましょう。
こんな画面が出てきます！
nginxがMac起動時に起動するかを確認するため、Macを再起動して確認しましょう。
次のPHPのインストールをする前に、再起動をしておいた方が良さそうです。
なので、再起動をしましょう。
PHPをインストールする
ターミナルを使ってインストールします。
brew install PHP@8.3
PHPを起動します。
brew services start php@8.3
VSCodeに今から編集するファイルのあるフォルダを追加する
ローカルにウェブサイトを作るために、nginx設定の編集・追加の作業が必要になります。
ターミナルを使ってもいいですし、使い慣れたエディタを使えばOKです。
私は最近、ようやくVSCodeを使い始めました。
編集するファイルのあるフォルダは下記の通りです。
/private/etc/
/opt/homebrew/etc/nginx/servers/
必要に応じてウェブサイトのドキュメントを置くフォルダ
これで準備は整いました。
ローカルのウェブサイトを作っていきましょう。
ローカルウェブサイトを作る設定やファイルの追加
welcome.comというウェブサイトを作ることにしましょう。
ウェブサイトのドキュメントを保存する場所
ホームに作った方が後々のメンテナンスもやりやすいでしょう。
ホームの下にwebsitesというフォルダを作り、この中にサイトドキュメントのフォルダを作っていくことにします。
websitesフォルダの中にwelcome.comというフォルダを作ります。
/private/etc/hostsにwelcome.comを追加する
/private/etc/hostsを編集します。
VSCodeのprivate/etc/からhostsを探して開きましょう。
ファイルの末尾に以下の行を追加します。
127.0.0.1 welcome.com
このファイルはユーザーにアクセス権が与えられていませんので、保存しようとすると警告が出ます。
VSCodeであればsudo権限で再試行...というボタンが表示されるので、ボタンを押してパスワードを入力すれば保存できます。
設定ファイル.confを追加する
/opt/homebrew/etc/nginx/servers/にwelcome.com.confというファイルを新規作成します。
ローカルウェブサイトのサーバー設定情報は/opt/homebrew/etc/nginx/nginx.confに記載されており、ここに追記しても良いです。
が、このファイルの中身を見ると最後の行に下記のような記述があります。
include servers/*;
}
serversフォルダの中身をインクルードするんですね。
なので、serversフォルダの中に追加していく方が後のメンテナンスもやりやすいでしょう。
おすすめです。
welcome.com.confの中身は下記のように記述し、保存します。
server {
listen 8080;
server_name welcome.com;
location / {
root /Users/username/websites/welcome.com;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location ~ \.php$ {
root /Users/username/websites/welcome.com;
fastcgi_split_path_info ^(.+?\.php)(/.*)$;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
}
ウェブサイトのファイルを置く
/Users/username/websites/welcome.com/の中にindex.htmlファイルを新規作成します。
ファイルの中身は下記のように記述し、保存します。
welcome.com
Hello world
PHPのファイルを置く
/Users/username/websites/welcome.com/の中にphpinfo.phpファイルを新規作成します。
ファイルの中身は下記のように記述し、保存します。
<?php
phpinfo();
?>
これで設定は完了しました！
Macを再起動しましょう。
再起動後、ウェブサイトへアクセスしてみます。
ウェブドキュメントフォルダのアクセス権
私はここでハマりました...
nginxがアクセスする場所、今回の場合はウェブドキュメントフォルダに該当しますが、トップディレクトリからアクセスする場所まで「実行権(x)」が必要なのです。
この実行権がないため、403 Forbiddenがウェブブラウザに表示され、ずっと原因がわからず途方に暮れていました。
/Users/username/websites/welcome.comのそれぞれのフォルダ、つまり、
/Users
/Users/username
/Users/username/websites
/Users/username/websites/welcome.com
それぞれに実行権が必要です。
私はうかつにも
chmod -R go+rx /Users/username
と実行してしまい、ホームフォルダ以下のもの全てにrxを追加してしまいました。
Macを使う分に支障ありませんが、アクセス権は個々のフォルダひとつずつ変更することをお勧めします。
ローカルウェブサイトへアクセスしてみる
Macを再起動します。
設定類を反映させるためです。
Macを再起動させず、ターミナルでnginxやphpを再起動しても設定が反映されます。
welcome.comへアクセスする
Safariでwelcome.com:8080へアクセスしてみましょう。
先ほど作ったindex.htmlの内容が表示されます。
PHPのバージョン確認
Safariでwelcome.com:8080/phpinfo.phpへアクセスしてみましょう。
ちゃんと動作していますね。
ローカルウェブサイトを追加する
今までの手順を繰り返し、好きなサイトを増やすことができます。
インターネットに公開せず、クローズドな空間でウェブサイトを運営するのに便利な環境です。
また、ウェブサイトだけでなく、htmlやphpで作られたアプリケーションをローカルで動かす環境としても適していると思いました。
以前在籍していた組織では、共有フォルダの中にあるhtmlファイルをダブルクリックしてJavaScriptで作られたアプリケーションを動かしていました。
でも、nginxを使えばウェブサイト名でアクセスできるので、便利そうだなぁ...と思いました。
macOS + nginx + phpという環境を構築したい方の参考になれば幸いです。