概要
Webフロントエンドフレームワークを使用する際、サーバーサイドを別言語・別フレームワークで実装することはよくあります。SvelteKitを使っている場合でも同様です。
前段にNginxやロードバランサーを配置してパスやメソッドごとにリクエストを振り分けることが一般的ですが、Cloudflare Pagesなどのサービスを使うと、そのような構成が難しいこともあります。また、ローカル環境でNginxやプロキシ設定を行うのは手間がかかることも。
そこで、SvelteKitのサーバールーティング機能を使って、Web APIサーバーへのプロキシを簡単に設定する方法を紹介します。
結論
以下は、/api以下のリクエストをhttp://127.0.0.1:8080にリバースプロキシする際のコード例です。
src/routes/api/[...path]/+server.ts
import type { RequestHandler } from './$types';
import { env } from '$env/dynamic/private';
import { error } from '@sveltejs/kit';
export const fallback: RequestHandler = ({ request, fetch }) => {
const url = new URL(request.url);
url.hostname = requireEnv('API_HOSTNAME');
url.port = requireEnv('API_PORT');
url.protocol = requireEnv('API_PROTOCOL');
return fetch(url, request);
};
function requireEnv(key: string): string | never {
const value = env[key];
if (value === undefined) {
console.error(`environment variable "${key}" required`);
error(500);
}
return value;
}
.env
API_HOSTNAME=127.0.0.1
API_PORT=8080
API_PROTOCOL=http
解説
SvelteKitでは、ルートが定義されていないパスにリクエストが届いた場合、fallback関数が呼び出されます。今回の例ではsrc/routes/api/[...path]/ディレクトリ下にこのファイルだけ定義しているため/api下に他のルート定義がなく、すべてのリクエストが fallback関数に渡されます。
このfallback関数では、受け取ったリクエストのURL部分を変更し、Web APIサーバーにリクエストを転送します。そのレスポンスをそのままクライアントに返すことで、リバースプロキシを実現しています。
まとめ
URLオブジェクトの使い方によってはより良い方法もあるかもしれませんが、大体同じ流れでリバースプロキシができると思います。
Discussion