ブログを自作した話 0Yu 隅田川.dev vol.1

0yu(おゆ,ぜろゆー) ● 北海道出身 好きな技術 ● Webフロントエンド、Rust 趣味 ● 映画鑑賞・旅行・ゲーム etc ● 最近はハイラルの勇者をしています 自己紹介 っっっz yud0uhu 2

● 自作マークダウンパーサーで動く技術ブログを自作した はじめに

フロントエンド ● Next.js/Type Script ● Apollo Client ● styled-components + emotion(mantine) 技術仕様

バックエンド ● Rust+WebAssembly(マークダウンパーサー) ● Express ● GraphQL Yoga ● Prisma Photos ● Vercel Postgress 技術仕様

ホスティング ● Vercel 認証・認可 ● NextAuth 技術仕様

Introduction to Apollo Client 特徴 ● GraphQLを使用してローカルデータとリモートデータを管理する JavaScript向けの包括的な状態管理ライブラリ メリット ● クライアント側でデータのキャッシュやクエリの結果の追跡し、デー タフェッチと更新を効率化 ○ クライアント側のデータの変更に応じて自動的に再レンダリング を行ったり、必要なデータのみフェッチを行う Apollo Client

Vercel Postgres: Scalable SQL for the web 特徴 ● 2023年5月1日に発表された新機能のStorageサービスの一つ ● Vercelが提供するPostgreSQLベースのサーバレスデータベース メリット ● Vercelのデプロイメントフローと統合されているため、アプリケー ションとデータベースのデプロイが一括管理可能 ● オートスケーリングによりリソースの調整が容易 Vercel Postgres

NextAuth.js 特徴 ● Next.jsアプリケーション上で認証・セッション管理を行うためのラ イブラリ ● Google・Twitter・GitHubなど、OAuthを使った認証サービスが利 用可能 ● サーバーレス環境以外に、AWS Lambda、Docker、Herakuなど主要 なホスティングプロバイダ上で動作する NextAuth

GraphQLサーバーを開発する際に検討すること ● schema-firstかcode-firstか？ schema-first ● スキーマを先に書き、スキーマから言語固有のコードを生成する code-first ● 言語固有のコードを先に書き、コードからスキーマを生成する code-first+TypeScriptなGraphQLライブラリ

GraphQL Nexus Nexus ● Apollo Serverに対応する型安全なGraphQLスキーマビルダーライブ ラリ ● スキーマ定義やリゾルバをもとにGraphQLスキーマを生成 ● 拡張性に優れており、カスタムスカラーやディレクティブ、中間オブ ジェクトタイプなどを簡単に追加できる ● Photosに移行する動きがある code-first+TypeScriptなGraphQLライブラリ

Prisma plugin for Pothos GraphQL Pothos ● prismaのデータモデリング言語を使用して、DBスキーマとGraphQL スキーマを自動的に生成 ● GiraphQL→視認性・検索性の観点から改名 メリット ● ランタイムのオーバーヘッドがなく軽量で高速 ● Nexusよりも型チェックが俊敏 code-first+TypeScriptなGraphQLライブラリ

● prismaObject でオブジェクトを、prismaField でフィールドを定義 する Pothosでスキーマを定義する

● Queryを投げて、データが取得できることを確認する 疎通確認

● Queryを投げて、データが取得できることを確認する 疎通確認

● Mutationを投げて、データが取得できることを確認する 疎通確認

● フロントエンドで記事のfeedを取得する

● submoduleで紐付けする ● クライアントでWASMを扱えるように、next.config.jsでWebPackの 設定を行う ● クライアントでsubmoduleのpkgをimportして使う 自作マークダウンパーサーの導入

● WASMビルド on Vercel ハマりポイント①

● Next AuthとVercel Hostingの噛み合わせの悪さ ○ Options | NextAuth.js ハマりポイント②