コンテンツにスキップ

@astrojs/ vercel

このアダプターを使用すると、Astroでオンデマンドでレンダリングされたルートと機能Vercelにデプロイできます。これには、サーバーアイランドアクションセッションが含まれます。

Astroを静的サイトビルダーとして使用している場合、このアダプターが必要になるのは、追加のVercelサービス(Vercel Web AnalyticsVercel Image Optimizationなど)を使用している場合のみです。それ以外の場合、静的サイトをデプロイするためにアダプターは必要ありません。

VercelデプロイガイドでAstroサイトをデプロイする方法を学びましょう。

Vercelは、GitHubリポジトリに直接接続してサイトをホストできるデプロイメントプラットフォームです。このアダプターは、Astroのビルドプロセスを強化し、Vercelを介したデプロイメントのためにプロジェクトを準備します。

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。

次のastro addコマンドでVercelアダプターを追加して、Astroプロジェクトでオンデマンドレンダリングを有効にします。これにより、@astrojs/vercelがインストールされ、astro.config.mjsファイルに適切な変更が一度に行われます。

ターミナルウィンドウ
npx astro add vercel

これで、ページごとにオンデマンドレンダリングを有効にするか、ビルド出力設定をoutput: 'server'に設定してデフォルトですべてのページをサーバーレンダリングできます。

まず、お好みのパッケージマネージャーを使用して、@astrojs/vercelアダプターをプロジェクトの依存関係に追加します。

ターミナルウィンドウ
npm install @astrojs/vercel

次に、アダプターをastro.config.*ファイルに追加します。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
adapter: vercel(),
});
プロジェクトをVercelにデプロイするについて詳しくはこちら。

CLI(vercel deploy)でデプロイするか、Vercelダッシュボードで新しいリポジトリを接続してデプロイできます。または、ローカルで本番ビルドを作成できます。

ターミナルウィンドウ
astro build
vercel deploy --prebuilt

このアダプターを設定するには、astro.config.mjsvercel()関数呼び出しにオブジェクトを渡します。

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を有効にします。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
adapter: vercel({
webAnalytics: {
enabled: true,
},
}),
});

Type: VercelImageConfig
Available for: Serverless, Static

追加: @astrojs/vercel@3.3.0

Vercelの画像最適化APIの設定オプション。サポートされているパラメーターのリストについては、Vercelの画像設定ドキュメントを参照してください。

domainsおよびremotePatternsプロパティは、対応するAstroのimage設定を使用して自動的に入力されます。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
output: 'static',
adapter: vercel({
imagesConfig: {
sizes: [320, 640, 1280],
},
}),
});

Type: boolean
Available for: Serverless, Static

追加: @astrojs/vercel@3.3.0

有効にすると、Vercel Image Optimization APIを利用した画像サービスが自動的に設定され、本番環境で使用されます。開発環境では、代わりにdevImageServiceで指定された画像サービスが使用されます。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
output: 'static',
adapter: vercel({
imageService: true,
}),
});
src/pages/index.astro
---
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="..."
/>

Type: 'sharp' | string
Available for: Serverless, Static

追加: @astrojs/vercel@3.8.0

Default: sharp

imageServiceが有効になっている場合に、開発で使用する画像サービスを設定できます。これは、開発マシンにSharpの依存関係をインストールできないが、Squooshなどの別の画像サービスを使用すると開発環境で画像をプレビューできる場合に便利です。ビルドは影響を受けず、常にVercelの画像最適化を使用します。

Astroの組み込みのものの代わりにカスタム画像サービスを使用するために、任意の値に設定することもできます。

astro.config.mjs
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に設定します。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
adapter: vercel({
isr: true,
}),
});

ISR関数リクエストには、静的モードのリクエスト (EN)と同様に、検索パラメーターは含まれないことに注意してください。

デフォルトでは、ISR関数はデプロイメントの期間中キャッシュします。有効期限を設定するか、特定のルートをキャッシュから完全に除外することで、キャッシュをさらに制御できます。

expiration値を秒単位で設定することで、ルートをキャッシュする期間を変更できます。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
adapter: vercel({
isr: {
// すべてのページを最初のリクエストでキャッシュし、1日間保存します
expiration: 60 * 60 * 24,
},
}),
});

Vercelのドラフトモードまたはオンデマンドインクリメンタルスタティックリジェネレーション(ISR)を実装するには、バイパストークンを作成し、キャッシュから除外するルートとともにisr設定に提供できます。

astro.config.mjs
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以降でサポートされている正規表現
]
}
})
})

Type string[]
Available for Serverless

このプロパティを使用して、ファイルを強制的に関数にバンドルします。これは、不足しているファイルに気付いた場合に役立ちます。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
adapter: vercel({
includeFiles: ['./my-data.json'],
}),
});

Type string[]
Available for Serverless

このプロパティを使用して、通常は含まれるバンドルプロセスからファイルを除外します。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
adapter: vercel({
excludeFiles: ['./src/some_big_file.jpg'],
}),
});

Type number
Available for Serverless

このプロパティを使用して、Serverless Functionsがタイムアウトする前に実行できる最大期間(秒単位)を延長または制限します。アカウントプランのデフォルトおよび最大制限については、Vercelのドキュメントを参照してください。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
// ...
adapter: vercel({
maxDuration: 60
}),
});

Type: boolean
Available for: Serverless

追加: @astrojs/vercel@7.6.0

このプロパティを使用して、Vercel Skew保護(Vercel ProおよびEnterpriseアカウントで利用可能)を有効にします。

astro.config.mjs
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レスポンスでリクエストを拒否します。

これはオプトイン機能です。有効にするには、edgeMiddlewaretrueに設定します。

astro.config.mjs
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インテグレーションをインストールし、データベースをサイトにリンクした場合:

  1. ioredisパッケージをインストールします。

    ターミナルウィンドウ
    npm install ioredis
  2. Vercel CLIを使用して環境変数をロードします。

    ターミナルウィンドウ
    vercel env pull .env.local

    これにより、プロジェクトのルートに.env.localファイルが作成され、ローカルで開発するときにRedisデータベースに接続するために必要な環境変数が含まれます。

  3. セッションドライバーを設定します。

    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,
    },
    },
    });

@astrojs/vercelアダプターは、VercelでAstroプロジェクトをデプロイするために特定のNode.jsバージョンをサポートしています。VercelでサポートされているNode.jsバージョンを表示するには、プロジェクトの設定タブをクリックし、「Node.js Version」セクションまでスクロールダウンしてください。

詳細はVercelのドキュメントをご覧ください。

以下の機能も利用可能ですが、将来のアップデートで破壊的な変更が加えられる可能性があります。この機能をプロジェクトで使用している場合は、@astrojs/vercel CHANGELOGで更新情報を確認してください。

Type: boolean
Default: false
Available for: Serverless

追加: @astrojs/vercel@8.2.0 New

Vercelの設定で事前レンダリングされたページのカスタムヘッダーを指定できるようにします。

有効にすると、アダプターはコンテンツセキュリティポリシーなどのAstroの機能によって提供された静的ヘッダーをVercelのvercel.jsonファイルに保存します。

たとえば、実験的なコンテンツセキュリティポリシー (EN)が有効な場合、experimentalStaticHeadersを使用して、<meta>要素を作成する代わりにCSPheadersをVercel設定に追加できます。

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
experimental: {
csp: true
},
adapter: vercel({
experimentalStaticHeaders: true
})
});

他のインテグレーション

UIフレームワーク

SSRアダプター

その他

貢献する コミュニティ スポンサー