@astrojs/ vercel

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

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

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

Astro Vercelを選ぶ理由

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

インストール

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

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

npm

npx astro add vercel

pnpm

pnpm astro add vercel

Yarn

yarn astro add vercel

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

手動インストール

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

npm

npm install @astrojs/vercel

pnpm

pnpm add @astrojs/vercel

Yarn

yarn add @astrojs/vercel

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

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel(),
});

使い方

プロジェクトをVercelにデプロイする (EN)について詳しくはこちら。

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

astro build
vercel deploy --prebuilt

設定

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

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

Type: VercelImageConfig
Available for: Serverless, Static

追加： @astrojs/vercel@3.3.0

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

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

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imagesConfig: {
      sizes: [320, 640, 1280],
    },
  }),
});

imageService

Type: boolean
Available for: Serverless, Static

追加： @astrojs/vercel@3.3.0

有効にすると、Vercel Image Optimization APIを利用した画像サービス (EN)が自動的に設定され、本番環境で使用されます。開発環境では、代わりに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

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

追加： @astrojs/vercel@3.8.0

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

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

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    imageService: true,
    devImageService: 'sharp',
  }),
});

isr

Type: boolean | VercelISRConfig
Default: false
Available for: Serverless

追加： @astrojs/vercel@7.2.0

プロジェクトを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キャッシュの無効化

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

時間ベースの無効化

デフォルトでは、ISRが有効な場合、ルートはVercelのキャッシュシールディングを使用し、Cache-Controlヘッダーは無視されます。expiration値（秒単位）を設定することで、ルートがキャッシュされる期間を制御できます。これにより、アプリケーションで設定したCache-Controlディレクティブも尊重されるようになります。

以下の例では、expirationを定義して、すべてのページを最初のリクエスト時にキャッシュし、1日間保存します。

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  // ...
  adapter: vercel({
    isr: {
      expiration: 60 * 60 * 24,
    },
  }),
});

オンデマンドの無効化

キャッシュされたページをプログラムで無効化するには、バイパストークンを作成してisr設定に指定します。

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
    adapter: vercel({
        isr: {
            // 作成した秘密のランダムな文字列。
            bypassToken: "005556d774a8",
        }
    })
})

キャッシュされたページを無効化するには、x-prerender-revalidateヘッダーにバイパストークンを設定したHEADまたはGETリクエストをページURLに対して送信します。詳細はVercelのオンデマンドISRドキュメントを参照してください。

ドラフトモード

ISRキャッシュをバイパスして新しいコンテンツをレンダリングするには（未公開のCMSコンテンツのプレビューなど）、Vercelのドラフトモードを使用します。これには、設定でbypassTokenを定義し、その値をページ内で再利用して__prerender_bypassという名前のCookieを設定する必要があります。

キャッシュからのパスの除外

excludeオプションを使用して、特定のルートをISRによるキャッシュから除外できます。これらのパスはリクエストごとに常に新しくレンダリングされます。

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
    adapter: vercel({
        isr: {
            // 常に新しくレンダリングされるパス。
            exclude: [
                '/preview',
                '/auth/[page]',
                /^\/api\/.+/ // 正規表現は@astrojs/vercel@v8.1.0以降でサポート
            ]
        }
    })
})

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

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

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

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ミドルウェアを実行する

@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を使用することで、適切な型指定を取得 (EN)できます。

type EdgeLocals = import('@astrojs/vercel').EdgeLocals

declare namespace App {
  interface Locals extends EdgeLocals {
    // ...
  }
}

セッション

Astro Sessions APIを使用すると、リクエスト間でユーザーデータを簡単に保存できます。これは、ユーザーデータや設定、ショッピングカート、認証情報などに使用できます。Cookieストレージとは異なり、データにサイズ制限はなく、別のデバイスで復元できます。

Vercelでセッションを使用する場合、セッションストレージ用にドライバーを設定する (EN)必要があります。Vercelマーケットプレイスからストレージプロバイダーをインストールできます。

たとえば、Redisインテグレーションをインストールし、データベースをサイトにリンクした場合：

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

   npm

   npm install ioredis

   pnpm

   pnpm install ioredis

   Yarn

   yarn add ioredis

2. Vercel CLIを使用して環境変数をロードします。

   vercel env pull .env.local

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

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

   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のバージョンサポート

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

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

実験的な機能

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

experimentalStaticHeaders

Type: boolean
Default: false
Available for: Serverless

追加： @astrojs/vercel@8.2.0

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

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

たとえば、CSP設定 (EN)を有効にしている場合、experimentalStaticHeadersを使用して、<meta>要素を作成する代わりにCSPheadersをVercel設定に追加できます。

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  security: {
    csp: true
  },
  adapter: vercel({
    experimentalStaticHeaders: true 
  })
});

他のインテグレーション

UIフレームワーク

• 

  @astrojs/alpinejs

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

SSRアダプター

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

その他

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap