@astrojs/ vercel
このアダプターを使用すると、Astroでオンデマンドでレンダリングされたルートと機能をVercelにデプロイできます。これには、サーバーアイランド、アクション、セッションが含まれます。
Astroを静的サイトビルダーとして使用している場合、このアダプターが必要になるのは、追加のVercelサービス(Vercel Web Analytics、Vercel Image Optimizationなど)を使用している場合のみです。それ以外の場合、静的サイトをデプロイするためにアダプターは必要ありません。
VercelデプロイガイドでAstroサイトをデプロイする方法を学びましょう。
Astro Vercelを選ぶ理由
Section titled “Astro Vercelを選ぶ理由”Vercelは、GitHubリポジトリに直接接続してサイトをホストできるデプロイメントプラットフォームです。このアダプターは、Astroのビルドプロセスを強化し、Vercelを介したデプロイメントのためにプロジェクトを準備します。
インストール
Section titled “インストール”Astroには、公式インテグレーションのセットアップを自動化するためのastro add
コマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。
次のastro add
コマンドでVercelアダプターを追加して、Astroプロジェクトでオンデマンドレンダリングを有効にします。これにより、@astrojs/vercel
がインストールされ、astro.config.mjs
ファイルに適切な変更が一度に行われます。
npx astro add vercel
pnpm astro add vercel
yarn astro add vercel
これで、ページごとにオンデマンドレンダリングを有効にするか、ビルド出力設定をoutput: 'server'
に設定してデフォルトですべてのページをサーバーレンダリングできます。
手動インストール
Section titled “手動インストール”まず、お好みのパッケージマネージャーを使用して、@astrojs/vercel
アダプターをプロジェクトの依存関係に追加します。
npm install @astrojs/vercel
pnpm add @astrojs/vercel
yarn add @astrojs/vercel
次に、アダプターをastro.config.*
ファイルに追加します。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... adapter: vercel(),});
CLI(vercel deploy
)でデプロイするか、Vercelダッシュボードで新しいリポジトリを接続してデプロイできます。または、ローカルで本番ビルドを作成できます。
astro buildvercel deploy --prebuilt
このアダプターを設定するには、astro.config.mjs
のvercel()
関数呼び出しにオブジェクトを渡します。
webAnalytics
Section titled “webAnalytics”Type: VercelWebAnalyticsConfig
Available for: Serverless, Static
@astrojs/vercel@3.8.0
@vercel/analytics@1.3.x
以前では、Astro設定でwebAnalytics: { enabled: true }
を設定して、Vercelの追跡スクリプトをすべてのページに挿入できます。
@vercel/analytics@1.4.0
以降では、代わりにVercelのAnalyticsコンポーネントを使用してVercel Web Analyticsを有効にします。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... adapter: vercel({ webAnalytics: { enabled: true, }, }),});
imagesConfig
Section titled “imagesConfig”Type: VercelImageConfig
Available for: Serverless, Static
@astrojs/vercel@3.3.0
Vercelの画像最適化APIの設定オプション。サポートされているパラメーターのリストについては、Vercelの画像設定ドキュメントを参照してください。
domains
およびremotePatterns
プロパティは、対応するAstroのimage
設定を使用して自動的に入力されます。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... output: 'static', adapter: vercel({ imagesConfig: { sizes: [320, 640, 1280], }, }),});
imageService
Section titled “imageService”Type: boolean
Available for: Serverless, Static
@astrojs/vercel@3.3.0
有効にすると、Vercel Image Optimization APIを利用した画像サービスが自動的に設定され、本番環境で使用されます。開発環境では、代わりにdevImageService
で指定された画像サービスが使用されます。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... output: 'static', adapter: vercel({ imageService: true, }),});
---import { Image } from 'astro:assets';import astroLogo from '../assets/logo.png';---
<!-- このコンポーネント --><Image src={astroLogo} alt="My super logo!" />
<!-- は次のHTMLになります --><img src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..." alt="My super logo!" loading="lazy" decoding="async" width="..." height="..."/>
devImageService
Section titled “devImageService”Type: 'sharp' | string
Available for: Serverless, Static
@astrojs/vercel@3.8.0
Default: sharp
imageServiceが有効になっている場合に、開発で使用する画像サービスを設定できます。これは、開発マシンにSharpの依存関係をインストールできないが、Squooshなどの別の画像サービスを使用すると開発環境で画像をプレビューできる場合に便利です。ビルドは影響を受けず、常にVercelの画像最適化を使用します。
Astroの組み込みのものの代わりにカスタム画像サービスを使用するために、任意の値に設定することもできます。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... adapter: vercel({ imageService: true, devImageService: 'sharp', }),});
Type: boolean | VercelISRConfig
Available for: Serverless
@astrojs/vercel@7.2.0
Default: false
プロジェクトをISR(incremental static regeneration)関数としてデプロイできるようにします。これにより、最初のリクエスト後に事前レンダリングされたページと同じ方法でオンデマンドでレンダリングされたページがキャッシュされます。
この機能を有効にするには、astro.config.mjs
のVercelアダプター設定でisr
をtrueに設定します。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... adapter: vercel({ isr: true, }),});
ISR関数リクエストには、静的モードのリクエスト (EN)と同様に、検索パラメーターは含まれないことに注意してください。
ISRキャッシュの無効化
Section titled “ISRキャッシュの無効化”デフォルトでは、ISR関数はデプロイメントの期間中キャッシュします。有効期限を設定するか、特定のルートをキャッシュから完全に除外することで、キャッシュをさらに制御できます。
時間ベースの無効化
Section titled “時間ベースの無効化”expiration
値を秒単位で設定することで、ルートをキャッシュする期間を変更できます。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... adapter: vercel({ isr: { // すべてのページを最初のリクエストでキャッシュし、1日間保存します expiration: 60 * 60 * 24, }, }),});
キャッシュからのパスの除外
Section titled “キャッシュからのパスの除外”Vercelのドラフトモードまたはオンデマンドインクリメンタルスタティックリジェネレーション(ISR)を実装するには、バイパストークンを作成し、キャッシュから除外するルートとともにisr
設定に提供できます。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ adapter: vercel({ isr: { // 作成した秘密のランダムな文字列。 bypassToken: "005556d774a8", // 常に最新の状態で提供されるパス。 exclude: [ '/preview', '/auth/[page]', /^\/api\/.+/ // @astrojs/vercel@v8.1.0以降でサポートされている正規表現 ] } })})
includeFiles
Section titled “includeFiles”Type string[]
Available for Serverless
このプロパティを使用して、ファイルを強制的に関数にバンドルします。これは、不足しているファイルに気付いた場合に役立ちます。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... adapter: vercel({ includeFiles: ['./my-data.json'], }),});
excludeFiles
Section titled “excludeFiles”Type string[]
Available for Serverless
このプロパティを使用して、通常は含まれるバンドルプロセスからファイルを除外します。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... adapter: vercel({ excludeFiles: ['./src/some_big_file.jpg'], }),});
maxDuration
Section titled “maxDuration”Type number
Available for Serverless
このプロパティを使用して、Serverless Functionsがタイムアウトする前に実行できる最大期間(秒単位)を延長または制限します。アカウントプランのデフォルトおよび最大制限については、Vercelのドキュメントを参照してください。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({// ... adapter: vercel({ maxDuration: 60 }),});
skewProtection
Section titled “skewProtection”Type: boolean
Available for: Serverless
@astrojs/vercel@7.6.0
このプロパティを使用して、Vercel Skew保護(Vercel ProおよびEnterpriseアカウントで利用可能)を有効にします。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({// ... adapter: vercel({ skewProtection: true }),});
Vercel Edge FunctionsでAstroミドルウェアを実行する
Section titled “Vercel Edge FunctionsでAstroミドルウェアを実行する”@astrojs/vercel
アダプターは、コードベース内のAstroミドルウェアからEdge functionsを作成できます。edgeMiddleware
が有効になっている場合、エッジ関数は、静的アセット、事前レンダリングされたページ、オンデマンドでレンダリングされたページを含むすべてのリクエストに対してミドルウェアコードを実行します。
オンデマンドでレンダリングされたページの場合、context.locals
オブジェクトはJSONを使用してシリアル化され、レンダリングを実行するサーバーレス関数にヘッダーで送信されます。セキュリティ対策として、サーバーレス関数は、生成されたエッジ関数からのリクエストでない限り、403 Forbidden
レスポンスでリクエストを拒否します。
これはオプトイン機能です。有効にするには、edgeMiddleware
をtrue
に設定します。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ // ... adapter: vercel({ edgeMiddleware: true, }),});
エッジミドルウェアは、ctx.locals.vercel.edge
としてVercelのRequestContext
にアクセスできます。TypeScriptを使用している場合は、src/env.d.ts
を更新してEdgeLocals
を使用することで、適切な型指定を取得できます。
type EdgeLocals = import('@astrojs/vercel').EdgeLocals
declare namespace App { interface Locals extends EdgeLocals { // ... }}
Astro Sessions APIを使用すると、リクエスト間でユーザーデータを簡単に保存できます。これは、ユーザーデータや設定、ショッピングカート、認証情報などに使用できます。Cookieストレージとは異なり、データにサイズ制限はなく、別のデバイスで復元できます。
Vercelでセッションを使用する場合、セッションストレージ用にドライバーを設定する必要があります。Vercelマーケットプレイスからストレージプロバイダーをインストールできます。
たとえば、Redisインテグレーションをインストールし、データベースをサイトにリンクした場合:
-
ioredis
パッケージをインストールします。ターミナルウィンドウ npm install ioredisターミナルウィンドウ pnpm install ioredisターミナルウィンドウ yarn add ioredis -
Vercel CLIを使用して環境変数をロードします。
ターミナルウィンドウ vercel env pull .env.localこれにより、プロジェクトのルートに
.env.local
ファイルが作成され、ローカルで開発するときにRedisデータベースに接続するために必要な環境変数が含まれます。 -
セッションドライバーを設定します。
astro.config.mjs import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';export default defineConfig({adapter: vercel(),session: {driver: 'redis',options: {url: process.env.REDIS_URL,},},});
Node.jsのバージョンサポート
Section titled “Node.jsのバージョンサポート”@astrojs/vercel
アダプターは、VercelでAstroプロジェクトをデプロイするために特定のNode.jsバージョンをサポートしています。VercelでサポートされているNode.jsバージョンを表示するには、プロジェクトの設定タブをクリックし、「Node.js Version」セクションまでスクロールダウンしてください。
詳細はVercelのドキュメントをご覧ください。
実験的な機能
Section titled “実験的な機能”以下の機能も利用可能ですが、将来のアップデートで破壊的な変更が加えられる可能性があります。この機能をプロジェクトで使用している場合は、@astrojs/vercel
CHANGELOGで更新情報を確認してください。
experimentalStaticHeaders
Section titled “experimentalStaticHeaders”Type: boolean
Default: false
Available for: Serverless
@astrojs/vercel@8.2.0
New
Vercelの設定で事前レンダリングされたページのカスタムヘッダーを指定できるようにします。
有効にすると、アダプターはコンテンツセキュリティポリシーなどのAstroの機能によって提供された静的ヘッダーをVercelのvercel.json
ファイルに保存します。
たとえば、実験的なコンテンツセキュリティポリシー (EN)が有効な場合、experimentalStaticHeaders
を使用して、<meta>
要素を作成する代わりにCSPheaders
をVercel設定に追加できます。
import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel';
export default defineConfig({ experimental: { csp: true }, adapter: vercel({ experimentalStaticHeaders: true })});