RenderとUpstashでNext.jsアプリをサーバーレスRedisと共にデプロイする方法

Renderは、即時デプロイやオートスケーリングなどの機能を備えた強力なインフラストラクチャプラットフォームです。この記事では、Upstashを使ってシンプルなNext.jsアプリケーションを作成し、それをRenderにデプロイする手順を解説します。

注意：このチュートリアルでは、UpstashでRedisインスタンスがすでに作成済みであることを前提としています。まだ作成していない場合は、Upstashコンソールから簡単に作成できます。

はじめに

まず、新しいNext.jsアプリを作成し、そのディレクトリに移動しましょう。

npx create-next-app upstash-render && cd upstash-render

ここではフォルダ名をupstash-renderとしていますが、お好みの名前に変更しても問題ありません。

次に、Redisインスタンスとの通信を簡単にするため、Upstash Redis SDKをインストールします。npmまたはYarnを使用してください。

Yarnの場合：

yarn add @upstash/redis

npmの場合：

npm i @upstash/redis

環境変数の設定

SDKのインストールが完了したら、必要な環境変数を.env.localというファイルにコピーします。UpstashコンソールからUPSTASH_REDIS_REST_URLとUPSTASH_REDIS_REST_TOKENを取得してください。

UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE
UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE

Q: なぜ.envではなく.env.localを使うのですか？
A: ローカル環境では環境変数を.env.localに保存しておき、Renderにデプロイする際にはRender側で環境変数を設定できるようにするためです。

閲覧数カウンターの実装

次に、アプリケーションにシンプルな閲覧数カウンターを実装してみましょう。まずpages/index.jsを開き、先ほどインストールしたSDKをインポートします。ファイルの先頭は以下のようになります。

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { Redis } from "@upstash/redis";

const redis = Redis.fromEnv();

続いて、ファイルの末尾にgetServerSidePropsを追加し、サーバー側からUpstashデータベースへリクエストを送信できるようにします。

export async function getServerSideProps(ctx) {
  // 現在のパスを取得
  const key = ctx.req.url;
  // 現在の閲覧数を取得
  const views = await redis.get(key);
  // 閲覧数を1つ増やす
  await redis.incr(key);
  return {
    props: {
      views: views ? parseInt(views) : 0,
    },
  };
}

これで完了です！ページがリクエストされるたびに、そのページの閲覧数が1ずつ増加します。この実装は動的ページ（例：[slug].js）でも再利用できます。では、この値をWebページ上に表示するにはどうすればよいのでしょうか？

ページの先頭、インポート文の直下にある以下のコードを見てください。

export default function Home() {

これを次のように変更します。

export default function Home({ views }) {

getServerSideProps経由でpropsとして返されたviewsは、変数を参照するだけでサイト上で利用できます。この例では、見出しの下の説明文を削除し、以下のように書き換えました。

<p className={styles.description}>このページは {views} 回閲覧されました</p>

これで、ページを再読み込みするたびに閲覧数が1ずつ増えていくはずです！

GitHubへのプッシュ

次のステップでRenderへのデプロイをスムーズに行うため、コードをGitHubにプッシュしておきましょう。GitHubで新しいリポジトリを作成し、以下のコマンドを実行します。

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your_username/repo_you_just_made.git
git push origin main

これらのコマンドを実行すると、作成したばかりのGitHubリポジトリにコードがプッシュされます。

Renderへのデプロイ

Upstashを使ったアプリの完成ですが、どのようにデプロイすればよいのでしょうか？その答えがRenderです。まずは無料アカウントを作成しましょう。

Renderダッシュボードにアクセスして始めてください。

各認証プロバイダーでサインインすることもできますし、メールアドレスとパスワードを使うことも可能です。

サインアップ後、メールアドレスの確認を求められるので、受信したメール内のリンクをクリックして認証を完了させてください。

認証が完了するとダッシュボードにリダイレクトされます。「New Web Service」をクリックしてください。

「New Web Service」をクリックしたら、前のステップでコードをプッシュしたリポジトリのURLを貼り付けます。

次に、アプリのデプロイ設定を行います。スタートコマンドはyarn start、ビルドコマンドはyarn; yarn build、環境はNodeに設定してください。リージョンなどのその他の項目は自由に選択できます。

このアプリにはRenderの無料プランを選択できます。実行に多くのリソースは必要ありません。

最後のステップとして、環境変数を追加します。これらは先ほど作成した.env.localまたはUpstashコンソールで確認できます。

あとは「Create Web Service」をクリックするだけです！うまく動作することを祈りましょう。

デプロイが完了するまで数分待ち、画面左上に表示されているURLにアクセスしてください。

筆者がデプロイしたサンプルはこちら：https://upstash-example.onrender.com

おめでとうございます！

これで、Next.jsとUpstashを使用したアプリケーションをRenderに正常にデプロイできました！

Twitterで@upstashをフォローし、Discordサーバーにもぜひ参加してみてください。

プロジェクトのソースコード：
https://github.com/upstash/redis-examples/tree/master/using-render

動作デモ：
https://upstash-example.onrender.com/