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

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

# 目次
- [はじめに](#はじめに)
- [前提条件](#前提条件)
- [構築手順](#構築手順)
    - [1. アダプターの設定](#1-アダプターの設定)
        - [1.1 React(Next.js)の場合](#11-reactnextjsの場合)
        - [1.2 Vue.js(NuxtJS)の場合](#12-vuejsnuxtjsの場合)
        - [1.3 Svelte(SvelteKit)の場合](#13-sveltesveltekitの場合)
    - [2. Renderの初期設定](#2-renderの初期設定)
    - [3. PostgreSQLデータベースの作成](#3-postgresqlデータベースの作成)
    - [4. アプリケーションのデプロイ](#4-アプリケーションのデプロイ)
        - [4.1 共通のビルド設定](#41-共通のビルド設定)
        - [4.2 React(Next.js)のビルド設定](#42-reactnextjsのビルド設定)
        - [4.3 Vue.js(NuxtJS)のビルド設定](#43-vuejsnuxtjsのビルド設定)
        - [4.4 Svelte(SvelteKit)のビルド設定](#44-sveltesveltekitのビルド設定)
        - [4.5 デプロイの確認](#45-デプロイの確認)
- [最後に](#最後に)
- [参考文献](#参考文献)

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

# 構築手順

## 1. アダプターの設定

### 1.1 React(Next.js)の場合
- 特別なアダプター設定は不要

### 1.2 Vue.js(NuxtJS)の場合
- 特別なアダプター設定は不要

### 1.3 Svelte(SvelteKit)の場合

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

```md:bash
npm install -D @sveltejs/adapter-node
```

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

```javascript
// 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のウェブサイト](https://render.com/)にアクセスし、「Get Started Free」をクリックする
- GitHubなど任意のアカウントでログインする
- Dashboardにアクセスする

## 3. PostgreSQLデータベースの作成
- 画面右上の「Add new」→「PostgreSQL」をクリックする
![スクリーンショット 2024-12-20 1.39.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714319/5ebe439e-14ca-9d48-f3ad-daae8b37baf5.png)

- 以下の設定を行う

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

- 設定が完了したら「Create Database」をクリックする
- STATUS が「Available」になるまで待機する
![スクリーンショット 2024-12-20 1.37.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714319/59db7012-d0c3-4a58-5d21-486576d92c34.png)

- 作成した「TestDB」をクリックし、「Info」を少しスクロールするとデータベース接続情報（環境変数）を確認することができるので、これらをメモしておく
![スクリーンショット 2024-12-20 1.30.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714319/773cd463-78b7-b361-115a-1543ad48f78d.png)

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

## 4. アプリケーションのデプロイ
### 4.1 共通のビルド設定
- 画面右上の「Add new」→「Web Service」をクリックする
![スクリーンショット 2024-12-20 1.41.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714319/a695e05f-bd51-ca1f-ddf4-f6e3228af526.png)

- デプロイしたい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](https://www.prisma.io/) を使用している場合は、Build Command に以下のコマンドを追加する必要がある
```md:bash
npx prisma migrate dev; npx prisma generate; npx prisma migrate deploy
```

### 4.5 デプロイの確認
- 設定が完了したら「Deploy Web Service」をクリックする
- STATUS が「Deployed」になるまで待機する
![スクリーンショット 2024-12-20 1.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714319/9fdf7fa9-7b41-2267-3994-0ff521817b48.png)

- 作成した「TestApp」をクリックする
- 生成されたURL `https://xxx.onrender.com` からアプリケーションにアクセスすることができる

![スクリーンショット 2024-12-20 1.02.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714319/4233b032-9dcd-0819-8a2a-70ec9aa647d8.png)

# 最後に
RenderのFreeプランの利用には以下の制限があります

- コールドスタート
    - 15分間アクセスがない場合、サーバーがコールドスタンバイ状態に移行
    - 再アクセス時に約1分の起動時間が必要
- 利用時間制限
    - ウェブサイトの月間アクセス時間が750時間まで
- データベースの制限
    - PostgreSQLは1ヶ月の期間限定
    - 継続利用には有料プランへの移行が必要
    - 無料で継続利用する場合は定期的な再作成が必要（ただしデータは保持されない)

このような制限を考慮すると、RenderのFreeプランは開発段階でのテストやプロトタイプのデモンストレーションにはちょうど良いと感じました。ただし、継続的なサービス運用や本番環境での利用を考えている場合は、安定性とパフォーマンスの観点から有料プランへの移行が必要だと思いました。

# 参考文献
- [Document PostgreSQL構築](https://render.com/docs/postgresql-creating-connecting)
- [Document Web Services構築](https://render.com/docs/web-services)
- [Document React(Next.js)のビルド設定](https://render.com/docs/deploy-nextjs-app)
- [Document Vue.js(NuxtJS)のビルド設定](https://render.com/docs/deploy-nuxtjs)
- [Document Svelte(SvelteKit)のビルド設定](https://render.com/docs/deploy-sveltekit)