@astrojs/ vercel

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

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

Vercelデプロイガイドで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.*ファイルに追加します。

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

astro.config.mjs

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設定を使用して自動的に入力されます。

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

imageService

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="..."
/>

devImageService

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

isr

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キャッシュの無効化

デフォルトでは、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以降でサポートされている正規表現
            ]
        }
    })
})

includeFiles

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

excludeFiles

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

maxDuration

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

skewProtection

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

@astrojs/vercelアダプターは、コードベース内のAstroミドルウェアからEdge functionsを作成できます。edgeMiddlewareが有効になっている場合、エッジ関数は、静的アセット、事前レンダリングされたページ、オンデマンドでレンダリングされたページを含むすべてのリクエストに対してミドルウェアコードを実行します。

オンデマンドでレンダリングされたページの場合、context.localsオブジェクトはJSONを使用してシリアル化され、レンダリングを実行するサーバーレス関数にヘッダーで送信されます。セキュリティ対策として、サーバーレス関数は、生成されたエッジ関数からのリクエストでない限り、403 Forbiddenレスポンスでリクエストを拒否します。

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

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

   npm install ioredis

   pnpm

   pnpm install ioredis

   Yarn

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

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 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フレームワーク

• 

  @astrojs/alpinejs

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

SSRアダプター

• 

  @astrojs/cloudflare

• 

  @astrojs/node

• 

  @astrojs/netlify

• 

  @astrojs/vercel

その他

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap