コンテンツにスキップ

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

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

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

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

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

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

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

Terminal window
npx astro add netlify

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

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

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

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

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

    astro.config.mjs
    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サイトも同じです。

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

  1. NetlifyダッシュボードAdd a new siteをクリックします。

  2. Import an existing projectを選択します。

    GitプロバイダーからAstroリポジトリをインポートする場合、Netlifyが自動で正しい構成設定を事前に入力します。

  3. 以下の設定が入力されていることを確認し、Deployボタンをクリックします。

    • Build Command: astro buildもしくはnpm run build
    • Publish directory: dist

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

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

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

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

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

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

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

  1. グローバルにNetlifyのCLIをインストールします。

    Terminal window
    npm install --global netlify-cli
  2. netlify loginを実行し、Netlifyにログインして認証します。

  3. netlify initを実行し、手順に沿って進めます。

  4. ビルドコマンド(astro build)を確認します。

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

  5. Gitにプッシュしてビルドとデプロイを行います。

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

📚 さらに詳しい情報は、NetlifyのブログのNetlify CLIを使ったAstroサイトのデプロイを参照してください。

Netlifyのレガシー機能build image (Xenial)を使用している場合は、Node.jsの正しいバージョンが設定されていることを確認してください。AstroはNode.jsv18.14.1以上のバージョンが必要です。

以下の方法でNode.jsのバージョンをNetlify上で指定できます。

  • ベースディレクトリ上にある.nvmrcファイル
  • Netlifyプロジェクトダッシュボード上にある、サイト設定NODE_VERSION環境変数

Netlify FunctionsとAstroを併用して使う場合、特別な設定は必要ありません。プロジェクトルートにnetlify/functionsディレクトリを追加し、Netlify Functionsのドキュメントに従って進めてください!

その他のデプロイガイド

デプロイ種別でフィルタ