Ubuntu 24.04 (Parallels)にnginxとPHPをインストールする

# 背景
Linuxはラズパイで触ったことがある程度ですが、業務でウェブサーバーnginxを構築しなくてはいけなくなりました。
ついでにPHPも同様に。

ネットを調べればUbuntuにnginxとPHPをインストールする記事は多く出てきます。
色々な苦労をされている先人もいらっしゃいます。

それでもなかなか

- macOS Apple Silicon
- ParallelsにLinux
- nginx
- php, php-fpm

という組み合わせは少なく、見つかったもののうまくいかないという状況でした。
同じような境遇の方がいらっしゃるかもしれないと思い、記録に残すことにしました。

# 動作させる環境
- macOS Sequoia 15.2 Apple Silicon
- Parallels Destop 20 for Mac 20.2.0 (55872)
- Ubuntu 24.04 (Parallelsで簡単インストール)
- nginx
- PHP8.3
- VSCode (UbuntuのTerminalでも可)

# Linux Ubuntuのインストール
Parallelsの機能を利用してインストールします。
数回クリックするだけでインストールできますよ。

![スクリーンショット 2025-01-25 9.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/5a4d502f-deee-c81d-6450-78493af9d420.png)

インストールが完了すると、ログイン画面が表示されます。
ユーザー名は`Parallels`固定のようですね。
![スクリーンショット 2025-01-25 9.09.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/6562cb96-2ddb-6d6c-9639-efc11a64a4e6.png)

クリックするとログインパスワードの設定を求められます。
パスワードを設定しましょう。
![スクリーンショット 2025-01-25 9.11.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/8ab24bff-7712-c428-576f-718cc55ed986.png)

パスワードを設定するとParallels Toolsインストールエージェントのウィンドウが出てきます。
Ubuntuの再起動を促されます。
そのまま指示に従っていきましょう。
![スクリーンショット 2025-01-25 9.15.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/7284a07c-483f-ce13-14d0-585722b9dfa1.png)

Ubuntuの再起動後、再びログイン画面になりますので、ログインしましょう。
ウェルカム画面が表示されます。
![スクリーンショット 2025-01-25 9.17.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/171e4179-7c09-15ad-d9bc-a6145a2356f4.png)

自身の環境のご希望があれば設定をしながら進めます。
私は全て初期選択のままNextボタンを押し続けました。
そして無事Ubuntuのインストールが完了し、起動しました！！
![スクリーンショット 2025-01-25 9.19.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/5a354059-70db-b72e-32d9-6609098e15ba.png)

# nginxをインストールする
nginxの公式サイトを参考にしてインストールします。
[nginxのUbuntuインストール解説](https://nginx.org/en/linux_packages.html#Ubuntu)

この公式サイトの解説をしてくれているQiitaの記事も見つかりました。
こちらのサイトを見ながらインストールでもいいでしょう。
とってもわかりやすいし、今後の助けにもなります。
[一つ一つ解説しながらUbuntuにnginxをインストールする](https://qiita.com/ran-sakata/items/4fc643e001bca12e5894)

私はUbuntu上のTerminalを使ってインストールしました。

インストールが完了したら、nginxを起動します。
```:nginxを起動する
sudo systemctl start nginx
```

起動しているかの確認は下記の通り。
```:nginxの状態を確認する
sudo systemctl status nginx
```
`Active`の項目が`active (running)`になっていればOKです。
なっているはず...です。

![スクリーンショット 2025-01-25 9.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/44c76fc6-9ab7-9190-d72a-18670f51189b.png)

nginxが動いてますので、ウェブサーバーにアクセスして動作を確認してみます。
ウェブブラウザFirefoxを起動し、`localhost`にアクセスしてみましょう。
こんな画面が出てきます!


![スクリーンショット 2025-01-25 9.36.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/d7c9c191-9c2e-94db-48fc-ef81fb6f50fd.png)

nginxがubuntu起動時に起動するかを確認するため、再起動して確認しましょう。
私の環境では、再起動しないとPHPのインストールがうまくいきませんでした。
再起動しましょう！

# PHPをインストールする
UbuntuのTerminalでインストールします。
```:PHPをインストールする
sudo apt install php8.3
```

# PHP-FPMをインストールする
同じくUbuntuのTerminalでインストールします。
```:PHP-FPMをインストールする
sudo apt install php-fpm
```
php-fpmを起動します。
```:PHP-FPMを起動する
sudo systemctl enable --now php8.3-fpm
```
起動しているかを確認します。
```:PHP-FPMの状態を確認する
sudo systemctl status php8.3-fpm
```
`active (running)`になっていればOKです。
なっているはず...
![スクリーンショット 2025-01-25 10.07.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/2e8b0229-c988-9147-dacd-1d87225aea7d.png)

ここでも再起動して、Ubuntu起動時にphpが起動するかを確認しておきます。
再起動しましょう！

# MacのVSCodeでSSH接続する
今までVSCodeは使ったことがありませんでした。
周りでは使っている人がいましたが、今一つ便利さがわかっていませんでした。
エディタであることはわかってましたが、LinuxなどにSSH接続してファイル編集する機能が抜群です。
ここではVSCodeを使ってnginxやPHPの設定をしていきますが、Ubuntu上のTerminalでも同じことができます。ただし、viやnanoを使える...というのが前提ですよ。

## UbuntuのIPアドレスを調べる
UbuntuのTerminalでIPアドレスを表示されます。
```:IPアドレスを調べる
ip a
```
![スクリーンショット 2025-01-25 9.41.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/b174de94-750c-512a-f996-b080b7afa00c.png)

Parallelsの推奨設定で使っていると、10.211.55.XXXというアドレスになります。
インストールしたMacからはSSHでアクセスできますが、他のMacやPCからはアクセスできないIPアドレスです。

他のMacやPCからもアクセスしたい場合は、Parallelsの設定を変更して、LAN上のIPアドレスを割り当てます。
![スクリーンショット 2025-01-25 9.45.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/e0a427de-eb18-3e79-5849-41619cadbcc6.png)

Terminalで`ip a`と入力し、再度IPアドレスを確認してみましょう。
LAN上のDHCPサーバーが割り当ててくれたIPアドレスに変わっていますね。
![スクリーンショット 2025-01-25 9.47.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/75443250-dbca-a143-3053-931b71ca9fe2.png)

## VSCodeを起動して接続
LinuxのIPアドレスは`10.211.55.18`であることはわかったので、VSCodeで接続します。
ユーザー名は`parallels`です。

![スクリーンショット 2025-01-25 9.54.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/a5df0bd4-b23e-459d-23de-203c4ea00ad7.png)

![スクリーンショット 2025-01-25 9.56.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/0b97e4ff-e6ee-a254-d748-b83a39641442.png)
## 今から編集するファイルのあるフォルダを追加する
nginx、phpの設定を変更します。
変更必要なファイルが存在するフォルダをVSCodeに追加しましょう。
```:追加するフォルダ
/etc/
/etc/nginx/conf.d/
/var/www/
/etc/php/8.3/fpm/pool.d/
```
これで準備は整いました！

![スクリーンショット 2025-01-25 10.29.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/46f08647-e0a7-3b83-4aaa-a97bfd96c3ed.png)

# ローカルのウェブサイトを作る設定やファイルの追加
`welcome.com`というウェブサイトを作ることにしましょう。

## /etc/hostsにwelcome.comを追加する
/etc/hostsを編集します。
VSCodeの/etc/からhostsを探して開きましょう。
ファイルの末尾に以下の行を追加します。
```:/etc/hosts
127.0.0.1 welcome.com
```
保存しようとすると、アクセス権がないという警告が出ます。
VSCodeならターミナルも使えますので、ここからアクセス権を644から646に変更します。
これでhostsを保存できます。
```:/etc/hostsのアクセス権を変更
sudo chmod 646 /etc/hosts
```

## 設定ファイル.confを追加する
`/etc/nginx/conf.d/`にwelcome.comの設定ファイルを追加します。
VSCodeで`/etc/nginx/conf.d/`内に`welcome.com.conf`というファイルを新規作成します。
ここでもアクセス権の警告が出ます。
`/etc/nginx/conf.d/`のアクセス権を755から757に変更します。
これでこのフォルダ内にファイルを作成することができます。
```:/etc/nginx/conf.d/のアクセス権を変更
sudo chmod -R 757 /etc/nginx/conf.d/
```
ファイルの中身は下記のように記述し、保存します。
```conf:/etc/nginx/conf.d/welcome.com.conf
server {
    listen 80;
    server_name welcome.com;
    root /var/www/welcome.com/;

    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass unix:/run/php/php8.3-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    location ~ /\.ht {
        deny all;
    }
}
```
## ウェブサイトのファイルを置く
ローカルのウェブサイトを表示するためのファイルは`/var/www/`に配置します。
VSCodeで`/var/www/`の中に`welcome.com`フォルダを新規作成します。
ここでもまたアクセス権の警告が出ます。
`/var/www/`のアクセス権を755から757に変更します。
```:/var/www/のアクセス権を変更
sudo chmod -R 757 /var/www/
```
`/var/www/welcome.com`フォルダの中に`index.html`ファイルを新規作成します。
ファイルの中身は下記のように記述し、保存します。
```http:/var/www/welcome.com/index.html
Welcome.com
Hello World
```

## PHPの設定を変更する
VSCodeに追加した`/etc/php/8.3/fpm/pool.d/`の中にある`www.conf`ファイルを変更します。
このファイルの中の4行を変更します。
```:/etc/php/8.3/fpm/pool.d/www.conf変更前
user = www-data
group = www-data
listen.owner = www-data
listen.group = www-data
```
```:/etc/php/8.3/fpm/pool.d/www.conf変更後
user = nginx
group = nginx
listen.owner = nginx
listen.group = nginx
```
このファイルもアクセス権の警告が出ますので、アクセス権を644から646へ変更します。
```:/etc/php/8.3/fpm/pool.d/www.confのアクセス権を変更
sudo chmod 646 /etc/php/8.3/fpm/pool.d/www.conf
```
これでwww.confファイルを保存できます。

## PHPのファイルを置く
`/var/www/welcome.com`フォルダの中に`phpinfo.php`ファイルを新規作成します。
ファイルの中身は下記のように記述し、保存します。
```php:/var/www/welcome.com/phpinfo.php
<?php
phpinfo();
?>
```
これで設定は完了しました！
Ubuntuを再起動しましょう！
再起動後、ウェブサイトへアクセスしてみます。

# ローカルウェブサイトへアクセスしてみる
Ubuntuを再起動します。
設定類を反映させるためです。
Ubuntuを再起動させず、Terminalでnginxやphpを再起動しても設定が反映されます。

## Welcome.comへアクセスする
Firefoxで`welcome.com`へアクセスしてみましょう。
先ほど作ったindex.htmlの内容が表示されます。

![スクリーンショット 2025-01-25 11.06.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/f8ccc570-a2ba-c8aa-5b1c-51765380333b.png)

## PHPのバージョン確認
Firefoxで`welcome.com/phpinfo.php`へアクセスしてみましょう。
ちゃんと動作してますね。

![スクリーンショット 2025-01-25 11.08.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202602/54c9c1d4-8f88-f864-9416-e471baf29d8d.png)

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

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

`macOS (Apple Silicon/Sequoia) + Parallels + Ubuntu + nginx + php`という環境を構築したい方の参考になれば幸いです。