Node.jsで作成したアプリケーションをRenderを用いてデプロイする

Last updated at 2025-01-22Posted at 2024-12-20

はじめに

Node.jsアプリケーションを無料でデプロイする際によく使っていた Heroku が2024年12月現在では有料プランのみになってしまいました。代わりのサービスを探していたところ、無料のPaaSサービスとして Render を見つけたので、今回はこちらを使ってアプリケーションのデプロイを試してみました。

前提条件

GitHubで管理されているNode.jsアプリケーションがある
PostgreSQLをデータベースとして使用している

構築手順

1. アダプターの設定

1.1 React(Next.js)の場合

特別なアダプター設定は不要

1.2 Vue.js(NuxtJS)の場合

特別なアダプター設定は不要

1.3 Svelte(SvelteKit)の場合

Node.jsアダプターのインストールをする

bash

npm install -D @sveltejs/adapter-node

svelte.config.js の設定を変更する

// import adapter from '@sveltejs/adapter-auto';  // この行をコメントアウト
import node from '@sveltejs/adapter-node'; 
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),

	kit: {
		// adapter: adapter()　 // この行をコメントアウト
		adapter: node()
	}
};

export default config;

2. Renderの初期設定

Renderのウェブサイトにアクセスし、「Get Started Free」をクリックする
GitHubなど任意のアカウントでログインする
Dashboardにアクセスする

3. PostgreSQLデータベースの作成

画面右上の「Add new」→「PostgreSQL」をクリックする
以下の設定を行う

項目	設定値
Name	任意のサーバー名
Project	オプション
Database	オプション
User	オプション
Region	Oregon (US West)
PostgreSQL Version	16
Datadog API Key	オプション
Plan Options	Free

設定が完了したら「Create Database」をクリックする
STATUS が「Available」になるまで待機する
作成した「TestDB」をクリックし、「Info」を少しスクロールするとデータベース接続情報（環境変数）を確認することができるので、これらをメモしておく

補足

作成したPostgreSQLにlocalから接続するときは、Hostnameの後ろに.oregon-postgres.render.comを追加して環境変数に追加する必要がある

4. アプリケーションのデプロイ

4.1 共通のビルド設定

画面右上の「Add new」→「Web Service」をクリックする
デプロイしたいGitHubリポジトリを選択し「Connect」をクリックし、以下の設定を行う

項目	設定値
Source Code	選択したソースコード
Name	任意のサービス名
Project	オプション
Language	Node
Branch	デプロイ対象のブランチ
Region	Oregon (US West)
Root Directory	オプション
Build Command	各フレームワークのビルド設定を参照
Start Command	各フレームワークのビルド設定を参照
Instance Type	Free
Environment Variables	前手順でメモをしたPostgreSQLの環境変数を設定

4.2 React(Next.js)のビルド設定

React (Next.js) を使っていた場合、「Build Command」「Start Command」を以下のように設定する

項目	設定値
Build Command	yarn; yarn build
Start Command	yarn start

4.3 Vue.js(NuxtJS)のビルド設定

Vue.js (NuxtJS) を使っていた場合、「Build Command」「Start Command」を以下のように設定する

項目	設定値
Build Command	yarn; yarn build
Start Command	yarn start

4.4 Svelte(SvelteKit)のビルド設定

Svelte (SvelteKit) を使っていた場合、「Build Command」「Start Command」を以下のように設定する

項目	設定値
Build Command	npm install; npm run build;
Start Command	node build/index.js

※ ORMとして Prisma を使用している場合は、Build Command に以下のコマンドを追加する必要がある