😂

RemixをVercelにデプロイするときにハマった話

2024/10/09に公開

npm

Vercelにデプロイしようとしたらビルドエラーが出る

一度Vercelにはデプロイした経験があったのですが、その際にもビルドエラーが出た記憶がありましたが、今回も出てしまいました。このエラーのデバッグの手順をここに記そうと思います。

Error: parameter is required (check serviceDomain and apiKey)
    at K (/Users/username/dev/lawquiz_app/node_modules/microcms-js-sdk/src/createClient.ts:101:29)
    at file:///Users/username/dev/lawquiz_app/build/server/index.js?t=1728477148379.5923:311:16
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:475:24)

https://vercel.com/

エラーの原因の特定

エラーメッセージから、microcms-js-sdkというmoduleのクライアントインスタンスがうまく作れていないということがわかります。

MicroCMSについて

microCMSは日本製のヘッドレスCMSで、非常に使いやすいCMSで、Next.jsやRemixなどの有名なフレームワークとの連携方法についてもチュートリアルが用意されています。ドキュメントも全て日本語で読みやすいです。今回は、これを使ってアプリ内の内容の管理を行うことにしています。

https://microcms.io/

エラーの解消法について

まずは、microcmsのクライアントインスタンスが作られている部分に注目してみます。

cms.ts

import { createClient } from "microcms-js-sdk";

export const client = createClient({
    serviceDomain: process.env.VITE_MICROCMS_SERVICE_DOMAIN!,
    apiKey: process.env.VITE_MICROCMS_API_KEY!,
});

クライアントインスタンスが作成されていない原因は、環境変数がうまく読み込めていないことが原因のようでした。

Remixでは、基本的に以下の形式で読み込めるという認識だったので、盲点でした。

process.env.VARIABLE

とりあえずの解決策~強制的に環境変数を読み込む~

公式ドキュメントや他の記事でも示されていた解決方法の一つが、dotenvを使う方法でした。今回はこれを使って、環境変数を読み込むことでビルドできました。

1. dotenvのインストール

npm i dotenv

2. クライアントインスタンスの作成部分の修正

cms.ts

import { createClient } from "microcms-js-sdk";
import dotenv from "dotenv";
dotenv.config();
export const client = createClient({
    serviceDomain: process.env.VITE_MICROCMS_SERVICE_DOMAIN!,
    apiKey: process.env.VITE_MICROCMS_API_KEY!,
});

3. ビルドしてVercelにデプロイ

npm run build
vercel --prod

これで、無事にデプロイすることができました。

https://lawquiz-app.vercel.app/

感想

Remixのデプロイ方法は、公式ドキュメントにも色々やり方が書いてあるのですが、どうも何を使うの普通なのかよくわからないし、それぞれの方法がどう異なるのかよくわかってないところがあるので、もっと理解を深めたいと思っております。