Vercelアカウントを作成する
package.jsonにコマンドを追加する
"scripts": {
"migrate:deploy": "prisma migrate deploy",
"dev": "next dev",
"build": "npm-run-all migrate:deploy build-app",
"build-app": "next build",
"start": "next start"
},
...
"devDependencies": {
...
"npm-run-all": "^4.1.5",
}Vercel CLIをインストールする
npm i -g vercelプロジェクトディレクトリ配下で以下コマンドを打ち、Vercel上にプロジェクトを登録する
vercelアカウントなどを聞かれるので入力したり、いくつかの質問に対しyかnで答えていく。
上記でVercelとの連携が行われ、プロジェクトには.vercelフォルダが作られる。
Vercelに環境変数を定義する
Settings > Environment Variablesにて.envに定義している値を登録する
最低限必要なのは以下
NEXTAUTH_URL
Vercelから付与されるURLを指定する(***.vercel.app)
DATABASE_URL
mysql://[ユーザー名]:[パス]@[ホスト]:[ポート]/[DB名]
↑はVercel上から参照できるDBを指定するため当然ローカル環境のままじゃダメです
私はConohaのDBを使いました。
また、NextAuthなどで認証を噛ませている場合はGOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET等各種認証のためのキーもここで登録します。
※各認証のID,SECRETはVercelのために作り直すことになるので忘れずに。
どっから取得するんだっけと忘れた方は以下から。
Google
https://console.developers.google.com/apis/credentials
Github
https://github.com/settings/developers
Discord
https://discord.com/developers/applications
また、callbackURLはhttps://********.vercel.app/api/auth/callback/googleのようにする必要がある(Googleの場合)
デプロイする
再びvercelコマンドを実行すると、ビルドが走り・・デプロイ完了。
終わりに
もっと細かいこともできるようですがひとまずここまでとします。
最初にいくつか設定する必要はあるものの(それすら簡単ですが)
vercelと一発打つだけでデプロイ環境できるのはなんていうか、素晴らしいですね…