XserverにReactアプリをデプロイする方法

はじめに

Reactで開発されたアプリケーションは、ビルドプロセスを経ることで、HTML、CSS、JavaScriptなどのブラウザで直接実行可能なファイルに変換されます。

そのため、特別な環境を必要とせず、通常の静的ファイルと同様に、Xserverのような一般的なレンタルサーバー上でも問題なく動作させることができます。

本記事では、ReactアプリのビルドファイルをXserverにデプロイする方法を詳しく解説します。

デプロイ手順

筆者の作業環境

本記事では、以下の条件を前提としています。

1. Reactアプリのビルド

ローカル環境でReactアプリをビルドします。

1. ターミナルでプロジェクトディレクトリに移動します。
2. 以下のコマンドを実行してアプリをビルドします。

   npm run build

このコマンドにより、buildディレクトリ内に公開用に最適化されたファイル群が生成されます。

2. ビルドファイルのアップロード

生成されたビルドファイルをXserverの公開ディレクトリにアップロードします。

1. FTPクライアントを使用してXserverに接続します。
2. 公開ディレクトリに移動します。
   • /example.com/public_html/react-app
   • ルートドメインに公開する場合は、/example.com/public_html
3. buildディレクトリ内のすべてのファイルをこのディレクトリにアップロードします。

3. アプリケーションの確認

すべてのファイルのアップロードが完了したら、ブラウザで「https://react-app.example.com」にアクセスし、Reactアプリが正しく表示されることを確認します。

• 以下のようにアプリケーションが画面に表示されます。