モダンフロントエンドのフレームワークを学びたての元SEがVercel公式のフルスタックアプリ作成のチュートリアルに沿ってWebアプリ作成+Vercelへのデプロイまでしてみました。チュートリアルといいつつも、エラーが出たり、途中で省かれている工程などがあったりと、初心者には辛いところがあるなということで、躓いたところをまとめてみたいと思います。
また、技術系サイトへの投稿は初なので読みづらいところなどあるかもしれませんがご容赦ください。
他の初心者エンジニアの一助になれば幸いです。
経験値
VB.net / VBA / OracleSLQ / GAS / Flutter
環境
- Windows11
- VSCode
実施日
2023/08/06
成果物
blogr-nextjs-prisma-1
※もろもろの都合で"-1"が付加されています。
対象チュートリアル
How to Build a Fullstack App with Next.js, Prisma, and Vercel Postgres
事前にやったこと
- UdemyのReactガイドを受講
具体的には、下記講座のreduxのセクション以外を受講しました。
https://www.udemy.com/course/react-complete-guide/
Flutterを触ったことがありましたが、同じノリでコーディングするんだなあと思いました。 - 下記企業HPの模倣
SmartHR
Next.js(React+TypeScript)、Chakra Uiを使用して、デザインと挙動が全く同じになるようにコードを書いて、それを知り合いの凄腕スーパーエンジニアの方にレビューしてもらいました。
この段階でフロントのコードはだいぶ書けるようになったかと思います。
実際にやっていく
Step1
コマンドを実行してプロジェクトを作成するだけなので問題ないでしょう。
Step2
Vercel上にDBサーバーを作成します。ここもしっかり読みながら勧めていけば問題ないでしょう。vercelのインストールと、vercel link でプロジェクトとアカウントを紐付けることを忘れずにしましょう。環境によっては、vercelコマンドを実行するためにWindows上のスクリプト実行権限(ポリシー)を変更する必要があるかもしれないです。
Step3
Prismaという便利ツールをインストールします。このチュートリアルで初めて知った技術で、今までOracleSQLしか触ったことがなかったので、SQL文を一切書かずにSQLのDBを使えることにとても感動しました…。
説明には書いていませんが、schema.prismaファイルはルート直下にprismaフォルダを作成してそこに配置します。こういうところがちょいちょいあるのでとても不親切ですね…。prisma系のコマンドは今後も使うことがあるので覚えておきましょう。
また、npx prisma ...のコマンド実行時は、.envファイルしか参照していないようなので、POSTGRES_PRISMA_URLは別途.envファイルを作成してそこに記載します。
Step4/Step5
こちらも、記載の通りにコマンドの実行、ファイルの作成をすれば問題ないかと思います。
Step6/Step7
まずNextAuthのインストールでつまずきます。他のモジュールのバージョンと整合性が取れていない旨のエラーが出るので、ひとまずエラー文の通りにnext@12.2.5をインストールすれば、npm install next-auth@4 @next-auth/prisma-adapterは完了するかと思います。サーバーを再起動して、無事に動くことを確認。
ヘッダーのLogInからSign in with Githubを押すと、またエラーが。ERR_SSL_PROTOCOL_ERRORが出て、なぜかhttpsでコールバックされています。
これは、nextを最新化すると解消されるので、下記3つアップデートしましょう。
npm i react@latest
npm i react-dom@latest
npm i next@latest
完了後、サーバー再起動し、再度Sign in with Githubを押すと無事にログイン完了！ヘッダー部分にアカウントの情報が表示されています。
Step8/Step9
チュートリアル通りに最後まで進め、試しに投稿してみると、author: { connect: { email: session?.user?.email } },のemailがnullとなっていまい、エラーとなります。emailがnullなのはsessionがundifinedとなっているのが原因ですが、さらにこれの原因は以下のコードでなぜかsessionが取得できていないためのようです(console.logで確認)。
なので、getSessionをgetServerSessionに置き換えましょう。こちらの情報が参考になります。
import { getServerSession } from "next-auth";
import { options } from "../../api/auth/[...nextauth]";
- const session = await getSession({ req });
+ const session = await getServerSession(req, res, options);
再度投稿すると、うまくいきました。
Step10/Step11
このあたりもチュートリアル通りに勧めていけば問題ないかと思います。
Step12
チュートリアルをよく読みながら進めましょう。Githubにプッシュ(プロジェクト作成)後、Vercelサイト上でDeploy(プロジェクトのImport)を実行すると、案の定エラー…。
Failed to compile.
./node_modules/@prisma/client/runtime/library.d.ts:1224:35
Type error: '?' expected.
...
TypeScriptでエラーが出ているようなので、下記コマンドで最新化。
npm i typescript@latest
再度Deployすると、またエラーが発生。
PrismaClientInitializationError: Prisma has detected that this project was built on
Vercel, which caches dependencies. This leads to an outdated Prisma Client because
Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma
generate` command during the build process.
これはPrisma公式に記載があったのでその通りに対応します。何通りか方法があります。
ひとまずscriptsに下記を追加しておきます。
"scripts": {
"postinstall": "prisma generate",
このまま進める前に
、Vercel上に環境変数を設定しておきます。チュートリアル通り、デプロイ環境用に新しく発行したキーを追加しましょう。
Settings → Environment Variables
Redeployするとうまくいきました！以上でチュートリアル達成になります。
初心者の僕がここまでやるのに、かなり時間がかかりました。振り返ってみればくだらないエラーばかりでしたが…。ですが、これでこのあたりの技術にもなれることができたので
、別のチュートリアルをやってみたりしてみたいと思います。
おまけ
ついでにGoogle認証も追加してみました。
-
pages\api\auth\[...nextauth].tsのファイルにGoogleの項目を追加します。
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
// ↓
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID ?? "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
}),
// ↑
],
2.Google Cloud Platform でOAuth用のAPI Keyを発行
3.ローカルなら.envファイルに、vercelならSettingsのEnvironment Valuesに追加
必要なKeyは、GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRETの2つだけです。
以上でGoogle認証も使えるようになります。簡単なので試してみてください。