Vue SPA向けFastifyバックエンド
Fastifyのルート、CORS、Vueビルドの静的配信、レート制限、リクエストのバリデーション
「Vue SPA向けFastifyバックエンド」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
Vue SPAにFastifyを使う理由
Fastifyは、高速でオーバーヘッドが小さく、充実したプラグインエコシステムと組み込みのスキーマ検証機能を備えたNode.js用Webフレームワークです。Vueのシングルページアプリケーションに適したAPIバックエンドとなり、ビルド済みの静的ファイルを配信することもできます。
ロガー付きのサーバーを作成する
logger: trueを指定してFastifyをインスタンス化すると、Pinoによる構造化されたリクエストログを標準で利用できます。VueアプリからのAPI呼び出しをデバッグするうえで非常に役立ちます。
import Fastify from 'fastify'
const app = Fastify({
logger: true
})
await app.listen({ port: 3000, host: '0.0.0.0' })Vue開発サーバーのCORS
開発中は、Vueアプリが別のオリジン（例: localhost:5173）で実行されます。@fastify/corsを登録してそのオリジンを許可すると、ブラウザーからのクロスオリジンAPI呼び出しが許可されます。
import cors from '@fastify/cors'
await app.register(cors, {
origin: 'http://localhost:5173',
credentials: true // allow cookies
})ビルド済みVueのdistを配信する
本番環境では、コンパイル済みのVueアプリを配信します。@fastify/staticをdistディレクトリに向けて登録すると、Fastifyがindex.htmlとアセットを配信します。
import fastifyStatic from '@fastify/static'
import { join } from 'node:path'
await app.register(fastifyStatic, {
root: join(process.cwd(), 'dist'),
prefix: '/'
})SPAのフォールバックルート
Vue SPAはクライアント側ルーティングを使用するため、未知のパスには404ではなくindex.htmlを返す必要があります。アプリシェルを配信するワイルドカードのフォールバックを追加すると、リロード時にもディープリンクが機能します。
app.setNotFoundHandler((req, reply) => {
// let the Vue router handle non-API paths
if (req.url.startsWith('/api')) {
return reply.code(404).send({ error: 'Not found' })
}
return reply.sendFile('index.html')
})レート制限
@fastify/rate-limitを使用して、APIを不正利用から保護します。クライアントごとに、一定の時間枠内で許可するリクエスト数の上限を設定します。
import rateLimit from '@fastify/rate-limit'
await app.register(rateLimit, {
max: 100, // requests
timeWindow: '1 minute'
})ルートでのスキーマ検証
FastifyはJSON Schemaを使用して検証とシリアライズを行います。bodyスキーマを定義すると、Fastifyがハンドラーの実行前に無効なペイロードを400として拒否するため、手動で検証する必要はありません。
app.post('/api/users', {
schema: {
body: {
type: 'object',
required: ['email', 'name'],
properties: {
email: { type: 'string', format: 'email' },
name: { type: 'string', minLength: 1 }
}
}
}
}, async (req) => {
return createUser(req.body)
})高速化のためのレスポンススキーマ
responseスキーマを追加すると、Fastifyはコンパイル済みの高速なシリアライザーで出力をシリアライズし、スキーマにないフィールドを除去します。これにより、パフォーマンスとセキュリティの両方が向上します。
app.get('/api/users/:id', {
schema: {
response: {
200: {
type: 'object',
properties: {
id: { type: 'number' },
name: { type: 'string' }
// password is omitted, never serialized
}
}
}
}
}, getUserHandler)ルートをプラグインとして整理する
Fastifyはカプセル化を推奨しています。関連するルートをプラグインにまとめ、プレフィックス付きで登録します。これにより、APIの規模が大きくなってもモジュール性を維持できます。
async function userRoutes(app) {
app.get('/', listUsers)
app.post('/', createUser)
}
await app.register(userRoutes, { prefix: '/api/users' })プラグインの登録順序
順序が重要です。corsやrate-limitなどの横断的なプラグインをルートより先に登録し、静的ファイル配信とSPAのフォールバックは最後に登録します。これにより、キャッチオールがindex.htmlを配信する前にAPIルートが照合されます。
await app.register(cors, corsOpts)
await app.register(rateLimit, rlOpts)
await app.register(userRoutes, { prefix: '/api/users' })
await app.register(fastifyStatic, staticOpts) // last開発環境と本番環境の戦略
開発環境では、Viteの開発サーバーとFastifyを別々に実行し、CORSを利用します。本番環境ではVueアプリをビルドし、Fastifyから同じオリジンのdistを配信します。CORSは不要になり、デプロイ可能なプロセスを1つにできます。
確認テスト
Fastifyバックエンドについての理解度を確認しましょう。
まとめ
Vue SPA向けのFastifyバックエンドの構築について学びました。
logger: trueで構造化されたリクエストログを利用できます@fastify/corsでVue開発サーバーのオリジンを許可できます@fastify/staticでビルド済みのdistを配信でき、ワイルドカードのフォールバックでSPAルーティングを有効にできます@fastify/rate-limitで不正利用を防止できます- JSON Schemaでボディを検証し、レスポンスを安全かつ高速にシリアライズできます
よくある質問
「Vue SPA向けFastifyバックエンド」レッスンは無料ですか？
はい。「Vue SPA向けFastifyバックエンド」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Vue SPA向けFastifyバックエンド」で何を学びますか？
Fastifyのルート、CORS、Vueビルドの静的配信、レート制限、リクエストのバリデーション ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Vue SPA向けFastifyバックエンド」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Vue SPA向けFastifyバックエンド
- JWT認証：ログインとリフレッシュ
- Axiosインターセプターによる認証API呼び出し
- フルスタックVueの本番デプロイ