ブログを自作した話

隅田川.dev vol.1 by July 1, 2023

Transcript

1. ブログを自作した話 0Yu 隅田川.dev vol.1
2. 0yu(おゆ,ぜろゆー) • 北海道出身 好きな技術 • Webフロントエンド、Rust 趣味 • 映画鑑賞・旅行・ゲーム etc • 最近はハイラルの勇者をしています 自己紹介 っっっz yud0uhu 2
3. • 自作マークダウンパーサーで動く技術ブログを自作した はじめに
4. フロントエンド • Next.js/Type Script • Apollo Client • styled-components + emotion(mantine) 技術仕様
5. バックエンド • Rust+WebAssembly(マークダウンパーサー) • Express • GraphQL Yoga • Prisma Photos • Vercel Postgress 技術仕様
6. ホスティング • Vercel 認証・認可 • NextAuth 技術仕様
7. Introduction to Apollo Client 特徴 • GraphQLを使用してローカルデータとリモートデータを管理する JavaScript向けの包括的な状態管理ライブラリ メリット • クライアント側でデータのキャッシュやクエリの結果の追跡し、デー タフェッチと更新を効率化 ◦ クライアント側のデータの変更に応じて自動的に再レンダリング を行ったり、必要なデータのみフェッチを行う Apollo Client
8. Vercel Postgres: Scalable SQL for the web 特徴 • 2023年5月1日に発表された新機能のStorageサービスの一つ • Vercelが提供するPostgreSQLベースのサーバレスデータベース メリット • Vercelのデプロイメントフローと統合されているため、アプリケー ションとデータベースのデプロイが一括管理可能 • オートスケーリングによりリソースの調整が容易 Vercel Postgres
9. NextAuth.js 特徴 • Next.jsアプリケーション上で認証・セッション管理を行うためのラ イブラリ • Google・Twitter・GitHubなど、OAuthを使った認証サービスが利 用可能 • サーバーレス環境以外に、AWS Lambda、Docker、Herakuなど主要 なホスティングプロバイダ上で動作する NextAuth
10. GraphQLサーバーを開発する際に検討すること • schema-firstかcode-firstか？ schema-first • スキーマを先に書き、スキーマから言語固有のコードを生成する code-first • 言語固有のコードを先に書き、コードからスキーマを生成する code-first+TypeScriptなGraphQLライブラリ
11. GraphQL Nexus Nexus • Apollo Serverに対応する型安全なGraphQLスキーマビルダーライブ ラリ • スキーマ定義やリゾルバをもとにGraphQLスキーマを生成 • 拡張性に優れており、カスタムスカラーやディレクティブ、中間オブ ジェクトタイプなどを簡単に追加できる • Photosに移行する動きがある code-first+TypeScriptなGraphQLライブラリ
12. Prisma plugin for Pothos GraphQL Pothos • prismaのデータモデリング言語を使用して、DBスキーマとGraphQL スキーマを自動的に生成 • GiraphQL→視認性・検索性の観点から改名 メリット • ランタイムのオーバーヘッドがなく軽量で高速 • Nexusよりも型チェックが俊敏 code-first+TypeScriptなGraphQLライブラリ
13. • prismaObject でオブジェクトを、prismaField でフィールドを定義 する Pothosでスキーマを定義する
14. • Queryを投げて、データが取得できることを確認する 疎通確認
15. • Queryを投げて、データが取得できることを確認する 疎通確認
16. • Mutationを投げて、データが取得できることを確認する 疎通確認
17. • フロントエンドで記事のfeedを取得する
18. • submoduleで紐付けする • クライアントでWASMを扱えるように、next.config.jsでWebPackの 設定を行う • クライアントでsubmoduleのpkgをimportして使う 自作マークダウンパーサーの導入
19. • WASMビルド on Vercel ハマりポイント①
20. • Next AuthとVercel Hostingの噛み合わせの悪さ ◦ Options | NextAuth.js ハマりポイント②