プロジェクト『WebアプリケーションのVPSデプロイ』完了報告書

プロジェクト報告

プロジェクト『WebアプリケーションのVPSデプロイ』完了報告書

1. プロジェクト概要

  • プロジェクト名: Webアプリケーション『皆の秘密基地』のVPSサーバーへのデプロイ
  • 目的: ローカル環境で開発したWebアプリケーションをVPSサーバーにデプロイし、外部からアクセス可能なポートフォリオとして公開する。
  • 実施期間: 2025年9月9日 ～ 2025年9月10日
  • 最終成果: 対象アプリケーションが、指定IPアドレス（http://*.*.*.*）を通じて、24時間365日、外部から安定してアクセス可能な状態を確立した。

2. プロジェクトのタイムラインと課題解決

本プロジェクトでは、サーバー構築からアプリケーションの公開に至るまで、複数の技術的課題が発生した。以下に、主要な課題とその対応策を時系列で記述する。

第一日（2025年9月9日）：サーバー基盤構築とソースコードの整理

サーバーの初期設定と、開発ソースコードのデプロイ準備に注力した。

  • 課題1：SSH接続の失敗

    • 状況: VPS契約後、SSHクライアントからサーバーへの接続を試みたが「Connection timed out」エラーが発生した。
    • 対応: 契約内容（ConoHa WINGとVPSの混同）の確認と、VPSコントロールパネル側の設定を見直すことで接続を確立した。

  • 課題2：Gitリポジトリの履歴問題

    • 状況: 既存のリモートリポジトリに、過去のブランチやサブモジュールが複雑に絡み合っており、クリーンなデプロイを阻害していた。
    • 対応: 混乱を避けるため、リモートリポジトリを一度初期化し、ローカル環境の最新ソースコードを唯一の正として再構築する方針を決定。これにより、安定したコードベースをサーバーに展開した。

  • 第一日の成果:

    • サーバーの初期設定（ユーザー作成、セキュリティ設定）の完了。
    • 整理・統一されたソースコードのサーバーへの配備。

第二日（2025年9月10日）：アプリケーションの起動と公開設定

サーバー環境でのアプリケーションのビルド、起動、および外部公開設定に注力した。

  • 課題3：ビルド時のメモリ不足

    • 状況: npm run buildコマンド実行中に、サーバーのメモリリソースが枯渇し、プロセスが強制終了した。
    • 対応: ログを分析し、Node.jsのメモリ上限に起因する問題と特定。環境変数NODE_OPTIONSに--max-old-space-sizeを設定し、ビルドに必要なメモリを確保することで解決した。

  • 課題4：データベース接続の失敗

    • 状況: アプリケーションの起動には成功したものの、PostgreSQLデータベースへの接続が確立できなかった。
    • 対応: データベースの設定ファイル、アプリケーションの環境変数、およびネットワーク疎通を段階的に確認し、設定の不備を特定・修正した。

  • 課題5：Webサーバーからのアクセス権限エラー

    • 状況: 全ての設定完了後、Nginxからアプリケーションの静的ファイルへのアクセス時に「Permission denied」エラーが発生した。
    • 対応: Linuxのファイルシステム権限に起因する問題と特定。Nginxの実行ユーザーが、アプリケーション配置ディレクトリ（ユーザーのホームディレクトリ配下）にアクセスできるよう、chmodコマンドを用いてディレクトリのパーミッションを適切に変更し、問題を解決した。

3. プロジェクトの成果と獲得知見

成果

本プロジェクトは、設定した全ての目標を達成し、完了した。これにより、対象アプリケーションのインフラ構築から公開までの一連のプロセスを完遂した。

獲得した技術的知見

本プロジェクトを通じて、以下の実践的なスキル・知識を獲得した。

  • Linuxサーバー管理:
    • ユーザー管理、sudo権限設定、SSH鍵認証、ufwを用いたファイアウォール設定など、セキュアなサーバー運用の基礎知識。
  • Webサーバー構築:
    • Nginxをリバースプロキシとして構成し、Node.jsアプリケーションと連携させる技術。
  • プロセス管理:
    • pm2を利用したNode.jsアプリケーションの永続化と、サーバー再起動時の自動起動設定。
  • データベース構築:
    • VPS上でのPostgreSQLのインストール、データベースおよびユーザーの作成、権限管理。
  • 実践的なデバッグ能力:
    • journalctl, pm2 logsなどのコマンドを用いたログ分析に基づく、体系的な問題の切り分けと解決手法。
  • 高度なGit操作:
    • 複雑な履歴を持つリポジトリを整理し、クリーンな状態で再構築する戦略的判断と実行スキル。

4. サーバーデプロイ手順書（再現用）

本プロジェクトで確立した、Webアプリケーションのデプロイ手順を以下に記録する。

フェーズ0：ローカル環境の準備

  1. SSH秘密鍵の配置

    • サーバー契約時にダウンロードした秘密鍵ファイル（.pem）を、ローカルPCの~/.ssh/（またはC:\Users\ユーザー名\.ssh\）ディレクトリに配置する。

  2. SSHクライアントの設定

    • VSCodeの拡張機能「Remote - SSH」などを使用し、SSH設定ファイルに以下の情報を追記する。
    Host [任意のホスト名]
    HostName [サーバーのIPアドレス]
    User root
    IdentityFile [秘密鍵のパス]

フェーズ1：サーバーの初期設定（rootユーザーで実行）

  1. 初回ログイン: 上記で設定したホストにrootユーザーでSSH接続する。
  2. 作業用ユーザーの作成: 
    # ユーザー作成とパスワード設定
adduser [ユーザー名]
# 管理者権限(sudo)を付与
usermod -aG sudo [ユーザー名]
  3. 作業用ユーザーへのSSH鍵認証設定: 
    mkdir -p /home/[ユーザー名]/.ssh
cp /root/.ssh/authorized_keys /home/[ユーザー名]/.ssh/authorized_keys
chown -R [ユーザー名]:[ユーザー名] /home/[ユーザー名]/.ssh
  4. SSHセキュリティ設定:
    • sudo nano /etc/ssh/sshd_configコマンドで設定ファイルを開き、PermitRootLoginの値をnoに変更して保存する。
    • sudo systemctl restart sshでSSHサービスを再起動する。
  5. ファイアウォールの設定: 
    sudo ufw allow OpenSSH
sudo ufw allow http
sudo ufw allow https
sudo ufw enable

フェーズ2：開発環境の構築（作業用ユーザーで実行）

注意: 以降の作業は、SSH設定ファイルのUserを作成したユーザー名に変更して再接続し、すべて作業用ユーザーで実行する。

  1. Node.jsのインストール (nvm経由): 
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts
  2. PostgreSQLのインストールと設定: 
    sudo apt update
sudo apt install postgresql postgresql-contrib -y
sudo -u postgres psql
    • psql対話モード内で以下を実行する。
    CREATE DATABASE [データベース名];
CREATE USER [DBユーザー名] WITH PASSWORD '[パスワード]';
GRANT ALL PRIVILEGES ON DATABASE [データベース名] TO [DBユーザー名];
\q

フェーズ3：アプリケーションの配備

  1. ソースコードのクローン: 
    git clone [リポジトリURL]
  2. 環境変数の設定:
    • プロジェクトディレクトリに移動し、.envファイルを作成・編集する。データベース接続情報などを記述する。
  3. 依存パッケージのインストールとビルド: 
    # サーバーサイド
npm install

# クライアントサイド
cd client
npm install
NODE_OPTIONS="--max-old-space-size=2048" npm run build
cd ..

フェーズ4：公開とプロセスの永続化

  1. Nginxの設定:

    • sudo apt install nginx -yでNginxをインストール。
    • /etc/nginx/sites-available/に新規設定ファイル（例：default）を作成し、以下を記述する。
    server {
    listen 80;
    server_name [サーバーのIPアドレス];

    root /home/[ユーザー名]/[プロジェクトディレクトリ名]/client/build;
    index index.html;

    location /api {
        proxy_pass http://localhost:3000; # Node.jsサーバーのポート
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        try_files $uri /index.html;
    }
}
    • sudo nginx -tで構文をチェックし、sudo systemctl reload nginxで設定を反映させる。

  2. PM2によるプロセス管理:

    npm install -g pm2
# アプリケーションを起動
pm2 start server.js --name [プロセス名]
# サーバー再起動時の自動起動設定
pm2 startup
# 表示されたコマンドを実行する
pm2 save

  3. パーミッションの設定:

    • Nginxがユーザーのホームディレクトリ内にあるファイルにアクセスできるよう権限を付与する。
    # ホームディレクトリへの実行権限
chmod o+x /home/[ユーザー名]
# ビルド済みファイルへの読み取り権限
chmod -R o+r /home/[ユーザー名]/[プロジェクトディレクトリ名]/client/build

フェーズ5：動作確認

Webブラウザから http://[サーバーのIPアドレス] にアクセスし、アプリケーションが正常に表示・動作することを確認する。