WEB工房しずおかのロゴ

WEB工房しずおか

ConoHa VPS×Ubuntu 24.04で挑むWEBサーバー構築記【LNMP＋Node.js/pnpm環境構築編】

WEB
vpsubuntunginxwebdev
Koshio

ConoHa VPS Ubuntu 24.04 Webサーバー環境構築

みなさん、こんにちは！WEB工房しずおかの開発チームです。

[前回の記事（ConoHa VPS×Ubuntu 24.04で挑むWEBサーバー構築記【SSH接続・ポート変更・Ubuntu24特有落とし穴の回避策】）]では、独自ポート（8823）を使用した安全なSSH接続環境を確立しました。

今回は連載の第2弾として、1台のVPS上で「Laravel + React + LexicalのオリジナルCMS」と「Next.js 5サイトのモノレポ構成」を共存・動作させるためのミドルウェア（Webサーバー環境）構築を進めていきます。

Ubuntu 24.04 LTSにおける最新パッケージの導入手順から、MySQL 8.0導入時のセキュリティ設定・仕様上のポイントまでを分かりやすく解説します！

1. 今回構築するミドルウェア構成

バックエンド（PHP/Laravel）とフロントエンド（Node.js/Next.js）をハイブリッドで運用するため、以下のスタックを揃えます。

  • Webサーバー: Nginx（リバースプロキシおよび静的ファイル配信）
  • バックエンド言語/実行環境: PHP 8.3 + PHP-FPM
  • データベース: MySQL 8.0
  • フロントエンド実行環境: Node.js 20.x (LTS)
  • パッケージマネージャー: pnpm（Next.jsモノレポの依存関係管理用）

2. 作業手順：パッケージの更新から各ミドルウェアの導入まで

作業はすべて、前回作成した管理者権限を持つ一般ユーザー（deployer）でSSH接続して実行します。

STEP 1：システムパッケージの最新化

まずはOSのパッケージリストを更新し、インストール済みのパッケージを最新状態に引き上げます。

# パッケージリストの更新とアップグレード
$ sudo apt update
$ sudo apt upgrade -y

💡 対話型画面（keyboard-configuration等）が出た場合
apt upgrade の途中でキーボードレイアウト等の確認画面が表示された場合は、デフォルト（Japanese）を選択してそのまま進めて問題ありません。

STEP 2：Nginx（Webサーバー）のインストール

リクエストの振り分けや静的ファイルの配信を担うNginxをインストールします。

# Nginxのインストール
$ sudo apt install nginx -y

# 起動状態の確認
$ systemctl status nginx

Active: active (running) と表示されていれば正常に起動しています。

STEP 3：PHP 8.3 および拡張ライブラリのインストール

Laravelを動作させるための PHP 8.3 と、Laravelに必要な拡張モジュール（FPM、MySQL接続、文字列処理、Redis連携等）を一括導入します。

# PHP 8.3と関連拡張モジュールのインストール
$ sudo apt install php8.3-fpm php8.3-mysql php8.3-mbstring php8.3-xml php8.3-bcmath php8.3-curl php8.3-zip php8.3-gd php8.3-intl php8.3-soap php8.3-redis unzip curl -y

# PHP-FPMの起動確認
$ systemctl status php8.3-fpm

STEP 4：MySQL 8.0のインストールと初期セキュリティ設定

CMSのデータを格納するデータベースとしてMySQLをインストールし、セキュリティの初期設定を行います。

# MySQLサーバーのインストール
$ sudo apt install mysql-server -y

# 初期セキュリティ設定ウィザードの起動
$ sudo mysql_secure_installation

実行後、対話形式で初期設定を進めます。

  1. VALIDATE PASSWORD COMPONENT...: n を入力（開発・初期構築時の不必要なパスワード制約トラブルを回避）
  2. Remove anonymous users?: y を入力（匿名ユーザーの削除）
  3. Disallow root login remotely?: y を入力（リモートからのroot直接ログイン禁止）
  4. Remove test database and access to it?: y を入力（テスト用DBの削除）
  5. Reload privilege tables now?: y を入力（設定の即時反映）

❓ 「Set the password for root user?」が表示されない理由
Ubuntu 20.04以降のMySQL 8.0では、初期状態で auth_socket 認証プラグインが有効化されています。Linux上の sudo 権限を持つユーザーであれば sudo mysql -u root で直接ログインできる仕様となっているため、パスワード設定ステップが自動的にスキップされますが、正常な動作です。

STEP 5：Node.js (20.x LTS) および pnpm のインストール

Next.js（モノレポ構成）のビルド・実行環境として、Node.js 20.x LTSと高速パッケージマネージャー pnpm をインストールします。

# NodeSource PPAの追加 (Node.js 20.x)
$ curl -fsSL [https://deb.nodesource.com/setup_20.x](https://deb.nodesource.com/setup_20.x) | sudo -E bash -

# Node.jsのインストール
$ sudo apt install -y nodejs

# pnpmのグローバルインストール
$ sudo npm install -g pnpm

# インストールバージョンの確認
$ node -v  # v20.x.x
$ pnpm -v  # v9.x.x

3. 構築完了の確認

すべてのミドルウェアが正常に導入されたことを確認します。

$ php -v
PHP 8.3.x (cli) (built: ...)

$ node -v
v20.x.x

$ pnpm -v
9.x.x

$ sudo mysql -u root -e "SELECT VERSION();"
+-------------------------+
| VERSION()               |
+-------------------------+
| 8.0.x-0ubuntu0.24.04.1  |
+-------------------------+

バックエンド（Laravel）とフロントエンド（Next.js）を動かすためのすべての基盤ソフトウェアが整いました！

まとめと次のステップ

今回は、ConoHa VPSのUbuntu 24.04環境に、Nginx、PHP 8.3、MySQL 8.0、Node.js 20、pnpm をインストールし、Webサーバーとしての基礎環境（LNMP＋Node.js）を構築しました。

次回（第3弾）は、いよいよ本命である「Laravelプロジェクトの配置・DB連携」および「Nginxによる1つのLaravelと5つのNext.jsサイト（モノレポ）へのリバースプロキシ・マルチドメイン振り分け設定」を実践していきます！

WEB工房しずおかでは、単一のフレームワークにとらわれず、Laravel×Next.jsのようなハイブリッドでモダンなWebシステム構築やインフラ設計を得意としております。WEBシステムのパフォーマンス改善やVPSの運用設計でお悩みの方は、ぜひお気軽にご相談ください！