Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】Mastering VPS For Frontend Engineer - Part 3

2025年09月12日に「Dev.to」が公開したITニュース「Mastering VPS For Frontend Engineer - Part 3」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

VPS上のウェブアプリを効率的に運用する最終段階。ファイアウォールでセキュリティを強化し、Dockerでアプリをコンテナ化する。GitHub Actionsでデプロイを自動化し、ロードバランサーで負荷分散も実現。開発効率を高めるための実践的な手順を解説する。

出典: Mastering VPS For Frontend Engineer - Part 3 | Dev.to公開日:

ITニュース解説

VPSにウェブアプリケーションを配置した後、その運用をさらに効率的かつ安全にするための技術的な改善について解説する。この記事では、アプリケーションのセキュリティを強化し、開発とデプロイのプロセスを自動化し、さらにシステムの安定性とスケーラビリティを高める方法を段階的に説明する。

まず、サーバーのセキュリティを確保するため、ファイアウォールを導入する。ファイアウォールは、外部からの不要なアクセスを遮断し、サーバーを守るための重要な仕組みである。UFW(Uncomplicated Firewall)というツールを使用し、サーバーが利用するポートのうち、本当に必要なものだけを開放する。具体的には、サーバーにリモートで接続するためのSSH(22番ポート)、ウェブサイトの表示に使われるHTTP(80番ポート)、そして暗号化された安全な接続のためのHTTPS(443番ポート)を開放する。これにより、攻撃者からサーバーを保護し、脆弱性を減らすことができる。もし、ウェブアプリケーションがバックエンドサービスと通信するために別のポート(例えば3002番ポート)を使っている場合も、同様にそのポートを開放する必要がある。

次に、アプリケーションの実行環境を標準化し、管理を容易にするためにDockerとDocker Composeを導入する。Dockerは、アプリケーションとその実行に必要なすべての要素(ライブラリ、設定ファイルなど)を「コンテナ」と呼ばれる独立した環境にまとめて実行する技術だ。これにより、開発者のPC上でも、テスト環境でも、本番のサーバー上でも、アプリケーションが常に同じように動作することを保証できる。アプリケーションの実行に必要な手順は「Dockerfile」というファイルに記述され、このDockerfileから「イメージ」が作成される。イメージはアプリケーションの実行環境のスナップショットであり、そこから実際のアプリケーションが動作する「コンテナ」が起動される。例えば、Next.jsのようなNode.jsアプリケーションであれば、DockerfileにはNode.jsのバージョン指定、依存関係のインストール、アプリケーションのビルド、起動ポートの指定などが記述される。

複数のコンテナやサービスを扱う場合、Docker Composeが非常に便利である。Docker Composeは、複数のDockerコンテナをまとめて定義し、単一のコマンドでそれらを実行、管理するためのツールである。docker-compose.ymlというYAMLファイルに、アプリケーションの各サービス(例えばフロントエンド、バックエンド、データベースなど)と、それぞれのコンテナの設定を記述する。これにより、複数のdocker runコマンドを手動で実行する手間を省き、複雑なアプリケーション構成も簡単に管理できるようになる。Dockerfileの作成から、イメージのビルド、コンテナの実行、停止、削除といった基本的なDocker操作についても説明し、Docker Composeがいかにそれらの手間を簡略化するかを示す。

続いて、コードの変更を自動的に本番環境に反映させるためのCI/CD(継続的インテグレーション/継続的デリバリー)プロセスとGitHub Actionsを導入する。これまでの手動でのデプロイ作業(サーバーにアクセスし、コードを更新し、Dockerを再ビルドしてコンテナを再起動する)は繰り返しが多く、開発者の負担となっていた。CI/CDとGitHub Actionsを使えば、開発者がGitHubのリポジトリにコードをプッシュするだけで、テストの実行、ビルド、そして本番サーバーへのデプロイまでの一連のプロセスを自動化できる。これは、まるでVercelのようなホスティングサービスが提供する自動デプロイ機能に似ている。

GitHub Actionsは、.github/workflowsディレクトリに配置されたYAML形式のワークフローファイルに基づいて動作する。この自動デプロイを実現するためには、GitHub ActionsがVPSに安全にアクセスできるようにする設定が必要だ。具体的には、SSHキーペアを生成し、その公開鍵をVPSのauthorized_keysファイルに追加する。そして、生成した秘密鍵とVPSのホストIPアドレス、ユーザー名をGitHubリポジトリのシークレットとして登録する。これにより、GitHub Actionsのワークフローが安全にVPSへSSH接続し、指定されたコマンドを実行できるようになる。デプロイのワークフローでは、最新のコードをGitから取得し、古いDockerコンテナを停止・削除し、不要なイメージやボリュームをクリーンアップし、Dockerイメージを再ビルドしてから、新しいコンテナを起動するという一連の作業が自動的に実行される。これにより、開発者はデプロイ作業から解放され、よりスムーズな開発サイクルを実現できる。

最後に、アプリケーションに大量のトラフィックが来た際に、安定してサービスを提供するためのロードバランサーを導入する。Dockerを使えば、アプリケーションの複数のインスタンスを簡単に起動できる。トラフィックが増えて一つのアプリケーションインスタンスだけでは処理しきれなくなった場合、追加のインスタンスを起動し、ユーザーからのリクエストをこれら複数のインスタンスに分散させることで、個々のインスタンスの負荷を下げ、アプリケーション全体の応答性を維持できる。

このトラフィックの分散は、Nginxというウェブサーバーソフトウェアがロードバランサーとして機能することで実現する。まず、docker-compose.ymlファイルを更新し、アプリケーションのインスタンスを複数(例えば、ポート3000と3001でそれぞれ動作する2つのインスタンス)起動するように設定する。次に、Nginxの設定ファイル(通常は/etc/nginx/nginx.conf)にupstreamブロックを定義し、これらのアプリケーションインスタンス(localhost:3000localhost:3001など)を指定する。最後に、ウェブサイトの設定ファイル(/etc/nginx/sites-available/frontendなど)を更新し、アプリケーションへのリクエストをこのupstreamブロックに向けてプロキシするように設定を変更する。Nginxを再起動することで、Nginxは自動的に複数のアプリケーションインスタンスにトラフィックを均等に分散させ、アプリケーションのスケーラビリティと耐障害性を向上させる。

これらの技術を組み合わせることで、VPS上で動作するウェブアプリケーションの運用を、初心者でも安全かつ効率的に、そして将来の成長に対応できるように改善できる。

関連コンテンツ

関連IT用語