2026.01.13

GitHubと連携してるアプリをRenderでデプロイする方法

mike

以前GitHubにローカル環境のコードをpushする記事を投稿しましたが、それの続きです。

開発環境から本番環境に切替える設定

しかし、そうなると Render.com でアプリをデプロイする時に必要なファイルがGitHub 経由で連携できません。

そこで、まずはフロントエンドとバックエンドのライブラリ情報を抱えた package.json を作成します。

npm init -y

つぎに、package.json 内の “scripts” を以下のように書き換えます。

  "scripts": {
    "build": "npm install --prefix backend && npm install --prefix frontend"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/<username>/<app_name>.git"
  },

ここまで書き換えたら、VScode からディレクトリ内にある node_modules を削除します。

削除したら、ターミナルで以下のコマンドを打ち込んで、依存関係をインストールします。

npm run build

すると、先ほど削除した node_modules がフロント、バックエンド両方に作成されました。

ディレクトリが作成されたことが確認できたら、先ほど作成した json ファイルの “build” の部分を以下に書き換えて、コマンドを打ちます。

"build": "npm install --prefix backend && npm install --prefix frontend && npm run build --prefix frontend"

npm run build

これでフロントエンドディレクトリ内に dist ディレクトリが作成されていたら成功です。

この工程はどうもReactアプリにおいて最適化されたバージョンをインストールするために必要みたいです。（よく分からん…）

次は、Render.com（本番環境）に上げるための調整を行います。

開発環境では２つのドメインでやりとりしていましたが、本番環境では１つのドメインでできるようにするため、バックエンドのポート番号を開いたらフロントエンドのプログラムが実行されるようにします。

まず、.env ファイルに本番環境かどうかを判断する時に使う変数を追加します。

.env ファイルの一番下に以下のコードを加えます。

NODE_ENV = "development"

backend ディレクトリ内にある server.js に以下のコードを加えます。

import path from "path";

const __dirname = path.resolve();

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../frontend/dist")));

  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "../frontend", "dist", "index.html"));
  });
}

3行目からのコードは app.use(“/api/notes, notesRoutes”); の直後に書くのがポイントです。

if 文で括っているのは本番環境かどうか判断するためですので、それ以外の場合（開発環境）では実行しません。

ちなみに、開発環境でドメイン指定するコードにおいても if 文で括って、CORSの設定の有無を判断しています。

if (process.env.NODE_ENV !== "production") {
  app.use(
    cors({
      origin: "http://localhost:5173",
      optionsSuccessStatus: 200,
    })
  );
}

ここまで出来たらもう一度、buildが完了したらアプリを始動できるようにするため、package.json ファイルに戻って作業します。

“script” に “start” の項目を追加します。

  "scripts": {
    "build": "npm install --prefix backend && npm install --prefix frontend && npm run build --prefix frontend",
    "start": "npm run start --prefix backend"
  },

package.json に修正を加えたらターミナルを開いてビルドコマンドを打ちます。

npm run build

最後に、私が作ったアプリは axios.js で決めうちでURLを指定しています。

でもそれだと無料プランのサーバーの動的URLに対応できないので、動的URLに対応させます。

import axios from "axios";

// 本番環境ではlocalhostは使用できないので動的URLに対応させる
const BASE_URL =
  import.meta.env.MODE === "development" ? "http://localhost:5001/api" : "/api";
const api = axios.create({
  baseURL: BASE_URL,
});

export default api;

お疲れ様でした！これでローカルでの調整はおしまいです。

以上の変更したファイルを git コマンドで add, commit, push しましょう。

git add .
git commit -m "prepared for the deployment"
git push

本番環境（Render.com）にデプロイ

いよいよ Render.com で作業を開始します。

アカウント登録してない人は、新規登録してから始めてください。

管理画面を開いたら、New を押して Web service を選びます。

初期設定では Render.com は GitHub にあるリポジトリと連携する権限がないはずなので、GitHub ボタンを押して指定のリポジトリを連携してください。

連携が完了したら、デプロイにあたって諸々の設定ができる画面に飛びますが、まず設定するのは Build command と Start command です。

それぞれ以下のようにコマンドを変更します。

// Build command
npm run build

// Start command
npm run start

プランはフリープランを選択して、最後に環境変数の値を指定します。

.env ファイルにある記述をコピペします。

その際、NODE_ENV は除外します。

たぶん Render.com には環境変数として NODE_ENV が既に設定されていて、値が production だからだと思います。

ここまで設定が完了したら、Deploy Web Service を押します。

これで、無事アプリがデプロイされました。お疲れ様でした！

補足：コードを修正したいとき

ちなみに、ローカル環境でコードを修正した際は、GitHub にプッシュし直したら Render.com にも反映されます。

git add .
git commit -m "rate limiter update"
git push

言うまでもなくgit push を押せば直ちに GitHub に反映されるわけですが、Render.com にもプッシュした情報が連携されて、Deploying となります。

体感として2~3分くらいで完了します。

開発環境から本番環境に切替える設定

本番環境（Render.com）にデプロイ

補足：コードを修正したいとき

関連