開発運用

React.js Heroku デプロイガイド

最終更新： 22/02/2025
1分未満

React.jsをHerokuにデプロイする手順を、完全かつ包括的に説明します。React.jsは、ユーザーインターフェースを作成するための非常に人気のあるJavaScriptライブラリであり、Herokuはクラウドベースのプラットフォームとして、アプリケーションのデプロイとホスティングを簡単に行える環境を提供しています。この記事では、ReactアプリケーションをHerokuにデプロイする方法を、基本的なセットアップから公開まで順を追って説明します。

必要なツールと前提条件

まず、ReactアプリケーションをHerokuにデプロイするために必要なツールをインストールします。

関連記事

  1. Node.js: ReactはNode.jsを使用して動作するため、Node.jsがインストールされている必要があります。公式サイトからインストールできます。

  2. Heroku CLI: Heroku CLIは、Herokuにデプロイするために必要なコマンドラインツールです。Herokuの公式サイトからインストールできます。

  3. Git: HerokuはGitを使ってアプリケーションを管理するので、Gitがインストールされていることを確認します。

ステップ1: Reactアプリケーションの作成

まず、Reactのアプリケーションを作成します。まだ作成していない場合は、以下のコマンドで新しいReactプロジェクトを作成します。

bash
npx create-react-app my-app
cd my-app

これで、my-appという名前のReactアプリケーションが作成され、ディレクトリに移動します。

ステップ2: プロジェクトのビルド

Reactアプリケーションは開発モードで動作していますが、Herokuにデプロイするには、アプリを本番用にビルドする必要があります。以下のコマンドでビルドを行います。

bash
npm run build

このコマンドを実行すると、buildというディレクトリが作成され、アプリケーションの静的ファイル（HTML、CSS、JavaScriptなど）がその中に格納されます。このビルドファイルをHerokuにデプロイします。

ステップ3: Herokuのセットアップ

次に、Herokuのアカウントを作成し、CLIを使用してログインします。

  1. Herokuにログイン: 以下のコマンドを実行して、Heroku CLIを通じてログインします。
bash
heroku login

これにより、ブラウザが開き、Herokuアカウントの認証情報を入力する画面が表示されます。

  1. 新しいHerokuアプリを作成: アプリケーションをデプロイするために、Herokuで新しいアプリケーションを作成します。
bash
heroku create my-app-name

my-app-nameはアプリケーション名で、Heroku上で一意である必要があります。名前が既に使用されている場合は、別の名前を指定してください。

ステップ4: Gitの初期化とコミット

Herokuにデプロイするためには、アプリケーションがGitで管理されている必要があります。もしまだGitリポジトリを初期化していない場合、以下のコマンドで初期化します。

bash
git init
git add .
git commit -m "Initial commit"

これにより、現在のプロジェクトがGitリポジトリとして初期化され、変更がコミットされます。

ステップ5: Herokuへのデプロイ準備

HerokuはNode.jsアプリケーションをデプロイする際、アプリケーションの依存関係を管理するためにpackage.jsonを使用します。Reactアプリケーションはクライアントサイドのフレームワークなので、Herokuにデプロイするには、サーバー側でもアプリケーションをホストする必要があります。以下の手順でそれを実現します。

  1. heroku-postbuildスクリプトの追加: package.jsonにHeroku用のビルドスクリプトを追加します。これにより、Herokuがビルド後に必要な操作を実行できるようになります。
json
"scripts": {
  "start": "node server.js",
  "heroku-postbuild": "npm run build"
}
  1. server.jsファイルの作成: HerokuでReactアプリケーションを提供するために、Expressサーバーを使って静的ファイルをホストします。server.jsというファイルをプロジェクトのルートディレクトリに作成します。
javascript
const express = require('express');
const path = require('path');
const app = express();

// ビルドしたReactアプリを提供
app.use(express.static(path.join(__dirname, 'build')));

// すべてのリクエストに対してindex.htmlを返す
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// ポートの設定
const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

このserver.jsは、Reactのビルド済みファイルを提供するための基本的なExpressサーバーです。

  1. package.jsonにExpressを依存関係として追加:
bash
npm install express --save

ステップ6: Herokuにデプロイ

すべての準備が整ったら、以下のコマンドでReactアプリケーションをHerokuにデプロイします。

bash
git push heroku master

これにより、GitのリモートリポジトリであるHerokuにコードがプッシュされ、アプリケーションがデプロイされます。

ステップ7: アプリケーションの確認

デプロイが完了すると、Herokuは自動的にURLを生成してアプリケーションをホストします。以下のコマンドでアプリケーションにアクセスできます。

bash
heroku open

これにより、ブラウザが開き、Heroku上にデプロイされたReactアプリケーションが表示されます。

まとめ

これで、React.jsアプリケーションをHerokuにデプロイする手順は完了です。Herokuは非常に簡単にアプリケーションをホスティングできるプラットフォームであり、これを使うことでReactアプリケーションを素早くインターネット上に公開できます。デプロイの過程で発生する問題に対処し、ステップバイステップで解決することで、アプリケーションの公開がスムーズに行えるようになります。

最終更新： 22/02/2025
1分未満
Back to top button