AstroサイトをVercelにデプロイする

Vercelを使用して、グローバルなエッジネットワークに設定無しでAstroサイトをデプロイできます。

このガイドでは、ウェブサイトのUIまたはVercelのCLIを使ってVercelにデプロイする手順を紹介します。

プロジェクトの設定

Astroプロジェクトは、静的サイトまたはサーバーサイドレンダリング（SSR）されるサイトとしてVercelにデプロイできます。

静的サイト

Astroプロジェクトはデフォルトで静的サイトです。静的なAstroサイトをVercelにデプロイするために追加の設定は必要ありません。

SSRアダプター

AstroプロジェクトでSSRを有効にしてVercelにデプロイする方法について説明します。

以下のastro addコマンドにより、AstroプロジェクトでSSRを有効にするためのVercelアダプターを追加します。これにより、アダプターのインストールと、astro.config.mjsファイルへの適切な変更が1ステップで行われます。

npx astro add vercel

アダプターを手動でインストールする場合は、次の2つの手順を実行してください。

お好みのパッケージマネージャーを使用して、@astrojs/vercelアダプターをプロジェクトの依存関係にインストールします。npmを使用している場合、あるいはよくわからない場合は、次のコマンドをターミナルで実行してください。
Terminal window
```
  npm install @astrojs/vercel
```

プロジェクトの設定ファイルastro.config.mjsに2行追加します。

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

export default defineConfig({
  output: 'server',
  adapter: vercel(),
});

デプロイ方法

Vercelへのデプロイは、ウェブサイトのUIまたはVercelのCLI（コマンドラインインターフェイス）が利用できます。静的サイト、SSRサイトともに手順は同じです。

ウェブサイトのUIからのデプロイ

コードをオンラインのGitリポジトリ（GitHub、GitLab、BitBucket）にプッシュします。
Vercelにプロジェクトをインポートします。
Vercelが自動的にAstroを検出し、適切な設定を行います。
アプリケーションがデプロイされます！ (例：astro.vercel.app)

プロジェクトがインポート・デプロイされると、その後のブランチへのプッシュはすべてプレビューデプロイを生成し、またプロダクションブランチ（通常は「main」）に加えられたすべての変更は本番環境へのデプロイとなります。

📚 VercelのGit連携についてもっと学ぶ。

CLIからのデプロイ

Vercel CLIをインストールし、vercelを実行してデプロイします。
Terminal window
```
npm install -g vercel
vercel
```
Vercelが自動的にAstroを検出し、適切な設定を行います。
Want to override the settings? [y/N]（「設定を上書きしますか？」）と聞かれたら、Nを選択します。
アプリケーションがデプロイされます！ (例：astro.vercel.app)

vercel.jsonによるプロジェクト設定

vercel.jsonを使用して、Vercelのデフォルトの動作を上書きしたり、追加の設定を行うことができます。たとえば、デプロイ環境からのHTTPレスポンスにヘッダーを追加する場合などに使用します。

📚 Vercelのプロジェクト設定についてもっと学ぶ。

Astro 2.0へのアップグレード

Astro v2.0はNode 14のサポートを終了しているため、プロジェクトではNode 18.14.1以降を使用するようにしてください。ビルドステップとサーバーレス関数で使用するNode.jsのバージョンは、Project SettingsにあるGeneralページから定義できます。