コンテンツにスキップ

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

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

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

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

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

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

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

Terminal window
npx astro add vercel

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

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

    Terminal window
    npm install @astrojs/vercel
  2. プロジェクトの設定ファイルastro.config.mjsに2行追加します。

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

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

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

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

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

  1. Vercel CLIをインストールし、vercelを実行してデプロイします。

    Terminal window
    npm install -g vercel
    vercel
  2. Vercelが自動的にAstroを検出し、適切な設定を行います。

  3. Want to override the settings? [y/N](「設定を上書きしますか?」)と聞かれたら、Nを選択します。

  4. アプリケーションがデプロイされます! (例:astro.vercel.app)

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

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

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

その他のデプロイガイド