環境構築

【Rocky Linux 10】Wordpress+サブドメインでNuxt.jsの環境構築。

1.基礎インフラの構築

① リポジトリ準備

sudo dnf install -y epel-release https://rpms.remirepo.net/enterprise/remi-release-10.rpm

sudo dnf makecache

② 各種ソフトインストール

sudo dnf install -y nginx mariadb-server nodejs php82-php-fpm php82-php-mysqlnd php82-php-gd php82-php-xml php82-php-mbstring certbot python3-certbot-nginx

③ PHP-FPM設定(TCP 9000番接続)

sudo sed -i 's|^listen = /var/opt/remi/php82/run/php-fpm/www.sock|listen = 127.0.0.1:9000|' /etc/opt/remi/php82/php-fpm.d/www.conf
sudo sed -i 's/user = apache/user = nginx/' /etc/opt/remi/php82/php-fpm.d/www.conf
sudo sed -i 's/group = apache/group = nginx/' /etc/opt/remi/php82/php-fpm.d/www.conf

④パフォーマンス改善:php.ini

メモリ制限を128M→512M、タイムアウトを30秒→300秒へ

sudo sed -i 's/memory_limit = 128M/memory_limit = 512M/' /etc/opt/remi/php82/php.ini
sudo sed -i 's/max_execution_time = 30/max_execution_time = 300/' /etc/opt/remi/php82/php.ini

⑤プロセス詰まり対策:www.conf

同時に動けるPHPの人数を増やし、カスタマイザーのプレビュー待ちを防ぐ

sudo sed -i 's/pm.max_children = 5/pm.max_children = 20/' /etc/opt/remi/php82/php-fpm.d/www.conf
sudo sed -i 's/pm.start_servers = 2/pm.start_servers = 5/' /etc/opt/remi/php82/php-fpm.d/www.conf
sudo sed -i 's/pm.min_spare_servers = 1/pm.min_spare_servers = 5/' /etc/opt/remi/php82/php-fpm.d/www.conf
sudo sed -i 's/pm.max_spare_servers = 3/pm.max_spare_servers = 10/' /etc/opt/remi/php82/php-fpm.d/www.conf

⑥ 起動

sudo systemctl enable --now nginx mariadb php82-php-fpm
sudo systemctl restart php82-php-fpm nginx

# 【動確】9000番ポートがLISTENしていること
ss -nlt | grep 9000

2.データベース作成

sudo mysql -e "CREATE DATABASE wp_db; GRANT ALL PRIVILEGES ON wp_db.* TO 'wp_user'@'localhost' IDENTIFIED BY 'password_here'; FLUSH PRIVILEGES;"

3.ディレクトリ準備(権限の適正化)

sudo mkdir -p /var/www/html /var/www/nuxt-app /var/www/nuxt-bff
# WordPressはWebサーバー(nginx)がファイルを読み書きできるように設定
sudo chown -R nginx:nginx /var/www/html
sudo chown -R rocky:rocky /var/www/nuxt-app /var/www/nuxt-bff

4.Nginx設定(TCP方式)

sudo vi /etc/nginx/conf.d/vhosts.conf
# WordPress (xxx.jp), Nuxt App (app.xxx.jp), Nuxt BFF (api.xxx.jp) の3つを記述
sudo nginx -t && sudo systemctl restart nginx

vhosts.confの内容:

# WordPress
server {
    listen 80;
    server_name xxx.jp www.xxx.jp;
    root /var/www/html;
    index index.php index.html;
    location / { try_files $uri $uri/ /index.php?$args; }
    location ~ \.php$ {
        fastcgi_pass 127.0.0.1:9000;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}
# Nuxt App (Port 3000)
server {
    listen 80;
    server_name app.xxx.jp;
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
    }
}
# Nuxt BFF (Port 3001)
server {
    listen 80;
    server_name api.xxx.jp;
    location / {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
    }
}

5.SSL設定とA+評価用チューニング

sudo certbot --nginx -d xxx.jp -d www.xxx.jp -d app.xxx.jp -d api.xxx.jp
# HSTS等のセキュリティヘッダーを ssl_tuning.conf に集約
sudo vi /etc/nginx/conf.d/ssl_tuning.conf
# HSTS設定を記述
sudo systemctl restart nginx

ssl_tuning.conf内容:

# HSTS (1年間有効、サブドメイン含む、プリロード対応)
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
# クリックジャッキング対策
add_header X-Frame-Options SAMEORIGIN;
# MIMEタイプスニッフィング対策
add_header X-Content-Type-Options nosniff;
# 暗号化プロトコル制限 (TLS 1.2以上)
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
# セキュリティ強度の高い暗号化スイート
ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305';

6.サンプルNuxtアプリの作成と永続起動

# 仮想メモリ(Swap)作成
sudo dd if=/dev/zero of=/swapfile bs=1M count=2048
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

# PM2のインストール
sudo npm install -g pm2

# Nuxt App (3000)
cd /var/www/nuxt-app
npx nuxi@latest init . --force --install=false # minimal, npm, No, No
npm install # Telemetry: No
npm run build
pm2 start .output/server/index.mjs --name "nuxt-app" -- port=3000

# Nuxt BFF (3001)
cd /var/www/nuxt-bff
npx nuxi@latest init . --force --install=false # minimal, npm, No, No
npm install # Telemetry: No
npm run build
PORT=3001 pm2 start .output/server/index.mjs --name "nuxt-bff"

# PM2保存と自動起動
pm2 save
pm2 startup
# 表示された sudo env PATH=... を実行

7.疎通確認

curl -I https://xxx.jp
curl -I https://app.xxx.jp
curl -I https://api.xxx.jp

8.SSL評価の客観的検証

URL: https://www.ssllabs.com/ssltest/analyze.html?d=xxx.jp
※xxx.jpは実際のFQDNに変更して叩く。