【Express】ExpressアプリをRenderにデプロイする方法

Expressjs
2025.06.04

こんにちは、かつコーチです。

ローカル環境でExpressアプリを作れるようになったら、次は誰でもアクセスできるようにインターネット上に公開してみましょう。

この記事では、無料枠から始められるホスティングサービスRenderを使って、Expressアプリをデプロイする手順を解説します。

GitHub連携から公開まで、実際の画面操作に沿って進めていきます。

環境変数の設定やstart scriptの注意点も併せて紹介するので、初めてのデプロイでもつまずかずに進められます。

Renderとは？

Renderは、GitHubリポジトリと連携するだけで、Webアプリを簡単に公開できるクラウドホスティングサービスです。

無料プランが用意されており、個人の学習用アプリやポートフォリオの公開先として人気があります。

似たサービスに「Railway」や「Heroku」もありますが、無料枠の使いやすさから、近年はRenderを選ぶ初学者が増えています。

サーバーの設定ファイルをほとんど書かずに、ボタン操作だけでデプロイできる手軽さが魅力です。

基本の書き方 / 実装手順

手順1：デプロイ前にpackage.jsonを整える

デプロイの前に、まずpackage.jsonの設定を確認します。

{
  "name": "todo-api",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.19.2"
  }
}

Renderは、デプロイ時にデフォルトでnpm startというコマンドを実行します。

そのため、scriptsの中に"start": "node server.js"のように、アプリを起動するコマンドを必ず定義しておく必要があります。

手順2：ポート番号を環境変数から取得するようにする

ローカル開発では、ポート番号を3000のように固定で書くことが多いと思います。

しかし、Renderのような本番環境では、サービス側が動的にポート番号を割り当てるため、固定値のままではアプリが起動できません。

// ❌ ローカル用に固定したままのポート指定
app.listen(3000, () => {
  console.log('サーバーを起動しました');
});

// ✅ 環境変数からポート番号を取得する
const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`サーバーを起動しました: ポート${PORT}`);
});

process.env.PORTは、Renderが自動的に設定してくれる環境変数です。

ローカルで動かすときは環境変数が存在しないため、|| 3000でローカル用のデフォルト値にフォールバックする書き方にしておくと便利です。

手順3：GitHubにリポジトリをプッシュする

Renderは、GitHubリポジトリと連携してデプロイする仕組みのため、事前にコードをGitHubにプッシュしておく必要があります。

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/todo-api.git
git push -u origin main

node_modulesフォルダは容量が大きく、Render側でも改めてnpm installが実行されるため、.gitignoreに含めてリポジトリから除外しておきましょう。

# .gitignore
node_modules/
.env

手順4：Renderで新規Webサービスを作成する

GitHubへのプッシュが完了したら、Renderの管理画面で新しいWebサービスを作成します。

  1. Render公式サイトでアカウントを作成し、ログインする
  2. ダッシュボードの「New +」ボタンから「Web Service」を選択する
  3. 連携するGitHubリポジトリを選択する
  4. 各種設定を入力する

設定項目は主に以下の通りです。

項目設定値の例
Name任意のサービス名（例：todo-api）
RegionSingapore（日本から比較的近いリージョン）
Branchmain
Build Commandnpm install
Start Commandnpm start
Instance TypeFree

Build Commandは依存パッケージをインストールするコマンド、Start Commandはアプリを起動するコマンドです。

手順5：環境変数を設定する

APIキーやデータベースの接続情報など、コードに直接書きたくない値は環境変数として設定します。

Renderの管理画面では、「Environment」タブから環境変数を追加できます。

例えば、.envファイルで以下のように管理していた値があるとします。

API_KEY=your-secret-key
NODE_ENV=production

これと同じキーと値を、Renderの「Environment」タブに1つずつ登録します。

環境変数を.gitignoreに含めた.envファイルに書いていても、Render側には自動で反映されない点に注意してください。

必ず管理画面から手動で登録する必要があります。

手順6：デプロイを実行して公開を確認する

設定が完了したら、「Create Web Service」ボタンを押すとデプロイが始まります。

ビルドログがリアルタイムで表示されるので、エラーが出ていないか確認しながら待ちましょう。

デプロイが成功すると、https://あなたのサービス名.onrender.comのようなURLが発行され、そこからアプリにアクセスできるようになります。

よくあるつまずきポイント・エラー対処

ポート番号を固定していてデプロイに失敗する

初めてのデプロイでよくあるのが、ポート番号の固定によるエラーです。

// ❌ Before：ポート番号を3000に固定したまま
app.listen(3000, () => {
  console.log('起動しました');
});

このままデプロイすると、Renderのログに「Application failed to respond」といった表示が出て、サービスが正常に起動しません。

Render側が割り当てたポートとアプリが待ち受けているポートが一致していないことが原因です。

// ✅ After：process.env.PORTを参照する
const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`起動しました: ポート${PORT}`);
});

ローカルとRenderの両方で動くように、必ず環境変数からポート番号を取得する形にしておきましょう。

start scriptが定義されておらずデプロイに失敗する

もう1つよくあるのが、package.jsonにstartスクリプトが定義されていないケースです。

{
  "scripts": {
    "dev": "nodemon server.js"
  }
}

devスクリプトしかない状態でRenderの標準設定のままデプロイすると、ビルドログに以下のようなエラーが表示されます。

npm error Missing script: "start"

Renderのデフォルトの起動コマンドはnpm startのため、scriptsの中にstartという名前のスクリプトが必要です。

{
  "scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  }
}

startスクリプトを追加してから、再度デプロイを実行すると解決します。

まとめ

この記事のポイント

  • Renderは、GitHub連携だけでExpressアプリを公開できる無料ホスティングサービス
  • ポート番号は固定せず、process.env.PORTから取得する形にしておく
  • package.jsonのscriptsにstartコマンドを必ず定義しておく
  • .envの内容は、Renderの「Environment」タブから手動で登録する
  • デプロイ失敗時は、まずビルドログでエラー内容を確認する

次に読むべき記事

  • シンプルなREST APIを作る（CRUD実装）
  • エラーハンドリングミドルウェアで一元的にエラーを処理する
  • Expressで最小構成のサーバーを立てる（npm init〜起動まで）

タグ: Express, 初心者向け, デプロイ

タイトルとURLをコピーしました