Skip to content

Latest commit

 

History

History
101 lines (63 loc) · 4.93 KB

vercel.mdx

File metadata and controls

101 lines (63 loc) · 4.93 KB
Raw
title description type i18nReady
AstroサイトをVercelにデプロイする
VercelでAstroサイトをウェブにデプロイする方法。
deploy
true

import ReadMore from '~/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components';

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つの手順を実行してください。

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

  1. プロジェクトの設定ファイル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からのデプロイ

1. コードをオンラインのGitリポジトリ（GitHub、GitLab、BitBucket）にプッシュします。

  1. Vercelにプロジェクトをインポートします。

  2. Vercelが自動的にAstroを検出し、適切な設定を行います。

  3. アプリケーションがデプロイされます！ (例：astro.vercel.app)

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

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

CLIからのデプロイ

1. [Vercel CLI](https://vercel.com/cli)をインストールし、`vercel`を実行してデプロイします。 
```bash
npm install -g vercel
vercel
```

  1. Vercelが自動的にAstroを検出し、適切な設定を行います。

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

  3. アプリケーションがデプロイされます！ (例：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ページから定義できます。