🐕
Vercelの50MB制限との戦い
はじめに
修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。
実装編
先日VercelでDBが使えるようになったので早速Next、Nextauth、Prismaでアプリ開発を始めました。
公式のドキュメントが豊富なのでほぼエラーなく"ローカル"で動作するアプリが完成しました。
"ローカルで"、ローカルで！
Codeを書く
VercelでDBを用意します。
東京からはシンガポールが1番近いリージョンです。
必要な環境変数をローカルにコピペします。
Prismaのスキーマを用意します。
generator client {
provider = "prisma-client-js"
encrypt = true
}
datasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL") // uses connection pooling
directUrl = env("POSTGRES_URL_NON_POOLING") // used for migrations
}
model Account {
id String @id @default(cuid())
userId String
type String
provider String
providerAccountId String
refresh_token String? @db.Text
access_token String? @db.Text
expires_at Int?
token_type String?
scope String?
id_token String? @db.Text
session_state String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([provider, providerAccountId])
}
model Session {
id String @id @default(cuid())
sessionToken String @unique
userId String
expires DateTime
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime?
image String?
accounts Account[]
sessions Session[]
}
model VerificationToken {
identifier String
token String @unique
expires DateTime
@@unique([identifier, token])
}
今回はGoogleを使い、adapterをインストールしてDB連携させます。
（詳しい設定方法は長くなるので省略）
import NextAuth, { type NextAuthOptions } from 'next-auth';
import {PrismaAdapter} from '@next-auth/prisma-adapter';
import {prisma} from '@/lib/prisma';
import type { NextApiRequest, NextApiResponse } from 'next/types';
import GoogleProvider from 'next-auth/providers/google';
export const authOptions: NextAuthOptions = {
providers: [
GoogleProvider( {
clientId: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
} ) ],
adapter: PrismaAdapter( prisma ),
pages: {
signIn: '/login',
},
secret: process.env.NEXTAUTH_SECRET, // これがないと本番でエラーになる
session: {
strategy: "jwt", // middlewareでsessionを使うために必要
},
}
const authHandler = ( req: NextApiRequest, res: NextApiResponse ) => NextAuth( req, res, authOptions );
export default authHandler
ログインページを公式からコピペしてちょっと変えます。
import { ClientSafeProvider, getProviders, signIn } from "next-auth/react";
import type {
GetServerSidePropsContext,
InferGetServerSidePropsType,
NextPage,
} from "next/types";
import { getServerSession } from "next-auth/next";
import Layout from "@/components/Layout";
import { authOptions } from "./api/auth/[...nextauth]";
const Login: NextPage<{
providers: InferGetServerSidePropsType<typeof getServerSideProps>;
}> = ({ providers }) => {
return (
<Layout title="ログイン">
{Object.values(providers).map((provider, index) => {
return (
<div key={index}>
<button
onClick={() =>
signIn(provider?.id as unknown as ClientSafeProvider["id"])
}
type="button"
>
Sign in with{" "}
{provider?.name as unknown as ClientSafeProvider["name"]}
</button>
</div>
);
})}
</Layout>
);
};
export default Login;
export async function getServerSideProps(context: GetServerSidePropsContext) {
const session = await getServerSession(context.req, context.res, authOptions);
if (session) {
return { redirect: { destination: "/" } }; // ログイン済みならリダイレクト
}
const providers = await getProviders();
if (!providers) {
return {
notFound: true,
};
}
return {
props: { providers: providers },
};
}
ログインできることを確認して完成！（DBが離れてるからちょっとログイン処理に時間かかる）
Vercelにデプロイ
出来たので早速Vercelにデプロイします。
と言ってもぽちぽちしてコピペするだけです。
.envファイルを全部コピーしてKeyにペースト（自動で入力されます）
適当な値に変更して、deployボタンﾎﾟﾁ！
どう考えても引っかかるわけない50MB制限に引っかかりました、
GitHubにissueがあります。
どうやらVercel側のバグ？らしい。
next.config.jsに以下の設定を追記します。
/** @type {import('next').NextConfig} */
const nextConfig = {
...
experimental: {
...
outputFileTracingExcludes: {
"*": [
"node_modules/@swc/core-linux-x64-gnu",
"node_modules/@swc/core-linux-x64-musl",
"node_modules/@esbuild/linux-x64",
],
},
},
...
},
};
module.exports = nextConfig;
deploy！
無事動きました。
Next13だと動かないみたいなコメントもありましたが、最新バージョンでは動作しました。
トラップ多過ぎい！
Discussion