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

Netlifyは、ウェブアプリケーションや静的ウェブサイトのためのホスティングとサーバーレスバックエンドサービスを提供しています。Astroサイトは全てNetlifyでホストできます！

このガイドは、NetlifyのウェブサイトUIまたはNetlifyのCLIを介してデプロイするための手順を説明しています。

プロジェクトの設定

Astroプロジェクトは、静的サイト、サーバーレンダリングサイト、エッジレンダリングサイトの3つの異なる方法でNetlifyにデプロイできます。

静的サイト

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

SSR用のアダプターを追加する

AstroプロジェクトでSSRを有効にし、NetlifyのEdge Functionsを使用してNetlifyにデプロイするには:

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

npx astro add netlify

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

@astrojs/netlifyアダプターを、パッケージマネージャーを使ってプロジェクトの依存関係にインストールします。npmをパッケージマネージャーとして使用しているかどうかわからない場合は、ターミナルで以下のコマンドを実行します。
Terminal window
```
npm install @astrojs/netlify
```

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

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

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

Netlifyアダプターの設定にedgeMiddleware: trueを追加することで、NetlifyのEdge Functionsを使用してプロジェクトをデプロイすることもできます。

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

export default defineConfig({
  output: 'server',
  adapter: netlify({
     edgeMiddleware: true
  }),
});

デプロイ方法

NetlifyのウェブサイトUI、もしくはNetlifyのCLI(コマンドラインインターフェース)を使うことでデプロイできます。デプロイする方法は、静的サイトもSSRサイトも同じです。

ウェブサイトUIを使ったデプロイ方法

GitHub、GitLab、BitBucket、またはAzure DevOpsにプロジェクトがある場合は、NetlifyのウェブサイトUIを使用してAstroサイトをデプロイできます。

NetlifyダッシュボードでAdd a new siteをクリックします。
Import an existing projectを選択します。

GitプロバイダーからAstroリポジトリをインポートする場合、Netlifyが自動で正しい構成設定を事前に入力します。
以下の設定が入力されていることを確認し、Deployボタンをクリックします。
- Build Command: astro buildもしくはnpm run build
- Publish directory: dist

デプロイが完了すると、サイトの概要ページにリダイレクトされます。そこでサイトの設定を編集できます。

ソースリポジトリ内の変更があった際には、デプロイ設定に基づいてプレビューと本番環境のデプロイをトリガーします。

`netlify.toml`ファイル

オプションとして、プロジェクトリポジトリのトップレベルに新しくnetlify.tomlファイルを作成し、ビルドコマンドと公開ディレクトリ、環境変数やリダイレクトなどのプロジェクトの設定ができます。Netlifyはこのファイルを読み込み、デプロイを自動で設定します。

デフォルトの設定を構成するには、以下のnetlify.tomlファイルを作成します。

[build]
  command = "npm run build"
  publish = "dist"

さらに詳しい情報は、Netlifyのブログの“既存のAstroのGitリポジトリをデプロイ”を参照してください。

CLIを使ったデプロイ方法

Netlify CLIを使って新しくNetlifyサイトを作成し、Gitリポジトリをリンクすることもできます。

グローバルにNetlifyのCLIをインストールします。
Terminal window
```
npm install --global netlify-cli
```
netlify loginを実行し、Netlifyにログインして認証します。
netlify initを実行し、手順に沿って進めます。
ビルドコマンド(astro build)を確認します。

CLIはビルドコマンド(astro build)とデプロイディレクトリ(dist)を自動で検出し、それらの設定を含んだnetlify.tomlファイルを自動で生成することを選択するかどうか聞きます。
Gitにプッシュしてビルドとデプロイを行います。

CLIはリポジトリにデプロイキーを追加します。そのため、git pushするたびにNetlifyでサイトが自動で再ビルドされます。