開発運用

ReactとNode.jsのHerokuデプロイ

最終更新： 2月 22, 2025
1 分の読み

React.jsとNode.jsを使ったアプリケーションをHerokuにデプロイする方法を、完全かつ包括的に解説します。これには、フロントエンドのReactアプリケーションとバックエンドのNode.jsアプリケーションをHerokuにデプロイするための一連のステップが含まれます。この記事を通じて、HerokuにReact.jsとNode.jsアプリを展開するために必要な準備と手順を順を追って学ぶことができます。

1. 前提条件

まず、React.jsとNode.jsを使用したアプリケーションをHerokuにデプロイするためには、以下のツールをインストールしておく必要があります。

関連記事
  • Node.js: Node.jsはバックエンドサーバーとして機能します。公式サイトからインストールできます。
  • npm (Node Package Manager): Node.jsにはnpmが含まれており、パッケージ管理に使用します。
  • Heroku CLI: Herokuにアプリケーションをデプロイするために、Heroku CLIが必要です。Heroku CLIのインストールガイドに従ってインストールしてください。
  • Git: ソースコードの管理とHerokuへのプッシュにはGitが必要です。もしインストールされていない場合は、Gitの公式サイトからインストールできます。

2. プロジェクトのセットアップ

React.jsとNode.jsのアプリケーションを作成します。

2.1. React.js（フロントエンド）アプリの作成

まず、Reactアプリを作成します。以下のコマンドを使ってReactアプリを作成します。

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

これで、my-react-appというReactアプリケーションのプロジェクトが作成されます。

2.2. Node.js（バックエンド）アプリの作成

次に、バックエンドとしてNode.jsアプリケーションを作成します。Reactアプリとは別のディレクトリでNode.jsのAPIを作成します。

bash
mkdir my-node-api
cd my-node-api
npm init -y

これでmy-node-apiというディレクトリにNode.jsのアプリケーションが作成されます。次に、Expressというフレームワークをインストールして、APIサーバーを構築します。

bash
npm install express

server.jsというファイルを作成して、以下のコードを記述します。

js
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

app.get('/', (req, res) => {
  res.send('Hello from Node.js API');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

これで簡単なNode.jsバックエンドのAPIサーバーが作成されます。

3. React.jsとNode.jsの統合

フロントエンドのReactアプリケーションとバックエンドのNode.jsアプリケーションを統合します。まず、Reactアプリがバックエンドにリクエストを送信できるように、ReactアプリからAPIを呼び出すコードを追加します。

Reactアプリ内の任意のコンポーネントに、以下のようなAPIリクエストのコードを追加します。

js
import { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    fetch('/api')
      .then(response => response.text())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>{data}h1>
    div>
  );
}

export default App;

次に、ReactアプリとNode.jsのバックエンドを統合するために、バックエンド側でAPIエンドポイントを設定します。Node.js側で/apiというルートを追加し、リクエストに応じたレスポンスを返します。

js
app.get('/api', (req, res) => {
  res.send('Hello from Node.js API');
});

4. Herokuでの設定

4.1. Herokuアプリの作成

次に、Heroku上でアプリケーションを作成します。Heroku CLIを使用して、次のコマンドで新しいHerokuアプリを作成します。

bash
heroku create my-app-name

これにより、Herokuにアプリケーションが作成されます。

4.2. Gitの設定

プロジェクトのルートディレクトリでGitを初期化します。

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

その後、Herokuにコードをプッシュするために、HerokuのGitリモートを設定します。

bash
git remote add heroku https://git.heroku.com/my-app-name.git

4.3. Procfileの作成

Herokuでアプリを実行するために、Procfileを作成します。このファイルはHerokuがどのコマンドでアプリケーションを起動するかを指定します。

プロジェクトのルートにProcfileという名前のファイルを作成し、以下の内容を追加します。

makefile
web: npm start

4.4. 必要なファイルの準備

ReactアプリとNode.jsアプリを同じリポジトリでデプロイするために、以下の手順を行います。

  • Reactアプリのビルドを作成します。
bash
cd my-react-app
npm run build
  • ビルドされたReactアプリをNode.jsアプリのpublicディレクトリにコピーします。
bash
cp -r build/* ../my-node-api/public/
  • package.jsonファイルで、Reactアプリをビルドした後に静的ファイルを提供するようにNode.jsサーバーを設定します。
json
"scripts": {
  "start": "node server.js"
}

これで、Node.jsサーバーがReactアプリを提供できるようになりました。

5. Herokuへのデプロイ

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

bash
git push heroku master

Herokuがコードをデプロイし、アプリケーションが自動的に起動します。デプロイが完了したら、以下のコマンドでアプリケーションのURLを確認できます。

bash
heroku open

これで、React.jsとNode.jsを使ったアプリケーションがHeroku上で正常に動作するはずです。

6. まとめ

この記事では、React.jsとNode.jsを使ったアプリケーションをHerokuにデプロイする方法をステップバイステップで解説しました。まずReactアプリとNode.jsアプリを作成し、それらを統合した後、Herokuにデプロイしました。この方法を使うことで、簡単にフルスタックのアプリケーションをHerokuでホストすることができます。

最終更新： 2月 22, 2025
1 分の読み
Back to top button