macOS SequoiaにnginxとPHPをインストールする

# 背景
先日より、必要に迫られて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](https://brew.sh/ja/)

ターミナルを使ってnginxをインストールします。
```:nginxをインストールする
brew install nginx
```
nginxを起動します。
```:nginxを起動する
nginx
```
これでnginxが動いていますので、ウェブサーバーにアクセスして動作を確認してみます。
Safariを起動し、`localhost:8080`へアクセスしてみましょう。
こんな画面が出てきます！
![スクリーンショット 2025-01-26 10.41.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/ab9c1989-65b2-fa6a-9b90-0cfa324aaab6.png)
nginxがMac起動時に起動するかを確認するため、Macを再起動して確認しましょう。
次のPHPのインストールをする前に、再起動をしておいた方が良さそうです。
なので、再起動をしましょう。

# PHPをインストールする
ターミナルを使ってインストールします。
```:PHP8.3をインストールする
brew install PHP@8.3
```
PHPを起動します。
```:PHP8.3を起動する
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を探して開きましょう。
ファイルの末尾に以下の行を追加します。
```:/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`に記載されており、ここに追記しても良いです。
が、このファイルの中身を見ると最後の行に下記のような記述があります。
```:/opt/homebrew/etc/nginx/nginx.conf
    include servers/*;
}
```
serversフォルダの中身をインクルードするんですね。
なので、serversフォルダの中に追加していく方が後のメンテナンスもやりやすいでしょう。
おすすめです。

welcome.com.confの中身は下記のように記述し、保存します。
```conf:/opt/homebrew/etc/nginx/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ファイルを新規作成します。
ファイルの中身は下記のように記述し、保存します。
```:/Users/username/websites/welcome.com/index.html
welcome.com
Hello world
```

## PHPのファイルを置く
`/Users/username/websites/welcome.com/`の中にphpinfo.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の内容が表示されます。
![スクリーンショット 2025-01-26 11.17.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/acccbeba-f898-4507-c2ef-0827ac871026.png)

# PHPのバージョン確認
Safariで`welcome.com:8080/phpinfo.php`へアクセスしてみましょう。
ちゃんと動作していますね。
![スクリーンショット 2025-01-26 11.31.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/f594eca6-5fe2-c3e9-62e1-cd010569414e.png)

# ローカルウェブサイトを追加する
今までの手順を繰り返し、好きなサイトを増やすことができます。
インターネットに公開せず、クローズドな空間でウェブサイトを運営するのに便利な環境です。
また、ウェブサイトだけでなく、htmlやphpで作られたアプリケーションをローカルで動かす環境としても適していると思いました。

以前在籍していた組織では、共有フォルダの中にあるhtmlファイルをダブルクリックしてJavaScriptで作られたアプリケーションを動かしていました。
でも、nginxを使えばウェブサイト名でアクセスできるので、便利そうだなぁ...と思いました。

macOS + nginx + phpという環境を構築したい方の参考になれば幸いです。