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

VPS（仮想専用サーバー）上に自作のWebアプリケーションを公開するためには、いくつかの重要な設定が必要である。まず、WebサーバーソフトウェアであるNGINX（エンジンエックス）を導入する。NGINXは、ユーザーのブラウザから送られてくるリクエストを受け取り、サーバー上で動いているアプリケーションにそのリクエストを届ける役割を担う。これは、多くのリクエストを高速かつ効率的に処理できるため、Webサイトのパフォーマンスを大きく向上させる。NGINXの重要な機能の一つに「リバースプロキシ」がある。これは、外部からのリクエストを直接アプリケーションに届けるのではなく、一度NGINXが受け取り、適切なアプリケーションに振り分ける仕組みである。これにより、セキュリティを高めたり、複数のアプリケーションを同じサーバーで動かしたりすることが可能になる。サーバーにNGINXをインストールした後、設定ファイルを通じてその動作を制御する。主な設定ファイルは/etc/nginx/ディレクトリ内にあり、特に/etc/nginx/sites-available/にサイトごとの設定ファイルを作成し、/etc/nginx/sites-enabled/にその設定ファイルを有効化するためのリンクを置くのが一般的である。これにより、複数のWebサイトを管理しやすくなる。

Webアプリケーションをサーバー上で実際に動かす工程をデプロイと呼ぶ。デプロイの方法は、アプリケーションの種類によって異なる。例えば、Next.jsのようにサーバー側でページを生成する機能（サーバーサイドレンダリング、SSR）を持つアプリケーションの場合、Node.js環境で常にアプリケーションを動かし続ける必要がある。このとき、NGINXは外部からのHTTPリクエスト（通常はポート80番）を受け取り、それを内部で動いているNext.jsアプリケーション（例えばポート3000番）に転送するように設定する。この設定がリバースプロキシの具体的な実装である。しかし、Node.jsアプリケーションは予期せぬエラーで停止してしまうことがある。そこで、PM2というプロセス管理ツールを利用する。PM2は、アプリケーションが停止した場合に自動で再起動したり、複数のアプリケーションの実行状態を監視したりする機能を提供し、サービスを安定して稼働させるために非常に重要である。

一方、ReactやVue.jsなどで作られた静的なWebアプリケーションの場合、サーバー側でプログラムを動かし続ける必要はない。ビルドされたHTML、CSS、JavaScriptファイル一式をサーバーに配置し、NGINXがそれらのファイルを直接ユーザーに返すように設定するだけでよい。この場合、PM2は不要である。ただし、React Routerのようなライブラリでページ遷移を実装している場合、注意が必要である。ユーザーが特定のページ（例：/about）に直接アクセスすると、NGINXはそのパスに対応するファイルを探しに行くが見つけられない。これを解決するため、どのパスへのリクエストであっても、まずは起点となるindex.htmlを返すようにNGINXを設定する必要がある。これにより、ページ遷移の処理をアプリケーション側のJavaScriptに任せることができる。

次に、サーバーのIPアドレスではなく、人間が覚えやすいドメイン名（例：example.com）でWebサイトにアクセスできるように設定する。まずドメイン販売サービスでドメインを取得し、そのドメインのDNS（Domain Name System）設定を変更する。DNSは、ドメイン名とサーバーのIPアドレスを対応付ける、いわばインターネット上の住所録のような役割を持つ。具体的には、ドメインの管理画面で、ネームサーバーを契約しているVPSプロバイダのものに指定する。さらにVPSプロバイダの管理画面で、自分のドメイン名（@でルートドメインを示す）がサーバーのIPアドレスを指すようにAレコードを設定し、www付きのドメイン名も同じサイトを表示するようにCNAMEレコードを設定するのが一般的である。最後に、NGINXの設定ファイルにあるserver_nameディレクティブを、IPアドレスから取得したドメイン名に書き換える。

最後に、Webサイトのセキュリティを強化するためにSSL証明書を導入し、通信をHTTPS化する。HTTPSは、ブラウザとサーバー間の通信を暗号化するプロトコルであり、これにより第三者によるデータの盗聴や改ざんを防ぐことができる。また、Googleなどの検索エンジンはHTTPS化されたサイトを優遇するため、SEO（検索エンジン最適化）の観点からも重要である。従来、SSL証明書は有料であることが多かったが、Let's Encryptという非営利団体が提供するサービスを利用すれば、無料で取得できる。Certbotというツールを使えば、コマンドをいくつか実行するだけで証明書の取得からNGINXへの設定、さらには有効期限（90日）が切れる前の自動更新まで簡単に行える。Certbotはドメインの所有権を確認した後、必要な設定を自動的にNGINXの設定ファイルに追記し、サーバーを再起動することなくHTTPS通信を有効にする。これらの手順を完了することで、自作のWebアプリケーションをVPS上に安全かつ安定して公開し、世界中のユーザーに届けることが可能になる。