デプロイ

884字程度約3分

2025-08-17

Vercelにデプロイ

VercelのウェブサイトUIまたは公式Vercel CLI（コマンドラインインターフェース）を使用してAstroサイトをVercelにデプロイできます。静的サイトとオンデマンドレンダリングサイトのデプロイプロセスは同じです。

ウェブサイトUI経由でのデプロイ

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

プロジェクトがインポートされてデプロイされた後、本番ブランチ以外のブランチへの後続のプッシュは自動的にプレビューデプロイメントを生成します。本番ブランチ（通常「main」という名前）への変更は自動的に本番デプロイメントとしてデプロイされます。

CLI経由でのデプロイ（推奨）

Vercel CLIをインストールし、vercelを実行してデプロイします：
```
pnpm add -g vercel
vercel
```
Vercelが自動的にAstroプロジェクトを検出し、正しい設定を構成します。
Want to override the settings? [y/N]と聞かれたら、N（いいえ）を選択します。
アプリケーションがデプロイされました！（例：astro.vercel.app）

vercel.jsonでのプロジェクト設定

vercel.jsonを使用してVercelのデフォルト動作を上書きし、追加設定を構成できます。例えば、デプロイ時にHTTPレスポンスにヘッダーを追加できます。

詳細については、Vercelのプロジェクト設定ドキュメントを参照してください

Netlifyにデプロイ

Netlifyは人気のある静的ウェブサイトホスティングプラットフォームです。GitHubから直接Mizukiブログをデプロイできます。Netlifyは自動的にプロジェクトをビルドしてデプロイし、継続的デプロイ機能を提供します。

ウェブサイト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ツールをグローバルにインストールします：
```
npm install --global netlify-cli
```
netlify loginを実行し、指示に従ってログインしてNetlifyを認証します。
netlify initを実行し、指示に従います。
ビルドコマンド（astro build）を確認します。
CLIは自動的にビルド設定（astro build）とデプロイディレクトリ（dist）を検出し、これらの設定で自動生成されたnetlify.tomlファイルを提供します。
Gitにプッシュしてビルドとデプロイをトリガーします。
CLIはリポジトリにデプロイキーを追加するため、git pushを使用するたびに、サイトがNetlifyで自動的に再ビルドされます。

詳細については、Netlifyの記事を参照してください

GitHub Pagesにデプロイ

GitHub Pagesでブログをホストしたい場合、Mizukiプロジェクトには通常、デプロイプロセスを自動化するためのGitHub Actionsワークフローが含まれています。astro.config.mjsで正しいbaseパスが設定されていることを確認する必要があります。

github.io URLにデプロイ

astro.config.mjsでsiteとbaseオプションを設定します。

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
  base: 'my-repo',
})

Site

siteの値は以下のいずれかでなければなりません：

ユーザー名に基づくURL：https://<username>.github.io
GitHub組織のプライベートページ用にランダムに生成されたURL：https://<random-string>.pages.github.io/

ヒント

以下の場合は`base`パラメータを設定しないでください：

- ページがルートフォルダから提供される場合
- ソースリポジトリが`https://github.com/<USERNAME>/<USERNAME>.github.io`にある場合

Base

baseの値は、スラッシュで始まるリポジトリ名である必要があります（例：/my-blog）。これにより、Astroはサイトのルートがデフォルトの/ではなく/my-repoであることを理解します。

注意

この値が設定されている場合、すべての内部ページリンクにbase値をプレフィックスとして付ける必要があります：

<a href="/my-repo/about">About</a>

base値の設定の詳細については、ドキュメントを参照してください。

GitHub Pagesでカスタムドメインを使用

カスタムドメインの設定

オプションで、プロジェクトに`./public/CNAME`ファイルを追加してカスタムドメインを設定できます。
これにより、`<YOUR_USERNAME>.github.io`の代わりにカスタムドメインでサイトがデプロイされます。
ドメインプロバイダーでDNSを設定することを忘れないでください。

sub.mydomain.com

GitHub Pagesでカスタムドメインを使用するようにAstroを設定するには、ドメインをsiteの値として設定します。baseの値は設定しないでください：

import { defineConfig } from 'astro/config'

export default defineConfig({
    site: 'https://example.com',
})

GitHub Actionの設定

プロジェクトの.github/workflows/ディレクトリに新しいファイルdeploy.ymlを作成し、以下のYAML設定を貼り付けます：

name: Deploy to GitHub Pages
on:
  # `main`ブランチへのプッシュごとにこのワークフローをトリガー
  # 異なるブランチ名を使用する場合は、`main`をブランチ名に置き換えてください
  push:
    branches: [ main ]
  # GitHubのActionsタブからこのワークフローを手動でトリガーできるようにします
  workflow_dispatch:
# ジョブがリポジトリをクローンしてページデプロイメントを作成できるようにします
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v4
      - name: Install, build, and upload your site
        uses: withastro/action@v3
        # with:
          # path: . # リポジトリ内のAstroプロジェクトのルート位置。（オプション）
          # node-version: 20 # サイトのビルドに使用する特定のNode.jsバージョン、デフォルトは20。（オプション）
          # package-manager: pnpm@latest # 依存関係をインストールしてサイトをビルドするために使用するNode.jsパッケージマネージャー。リポジトリのロックファイルに基づいて自動検出されます。（オプション）
  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

（オプション）ローカル開発またはプレビュービルド中にAstroプロジェクトに環境変数を渡す場合、GitHub Pagesにデプロイする際に処理できるように、deploy.ymlファイルでパブリック変数を定義する必要があります。

jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
       - name: Install, build, and upload your site
         uses: withastro/action@v3
         env:
           # 変数値を囲むには単一引用符を使用します
           PUBLIC_EVM_WALLET_ADDRESS: '0x4bFc229A40d41698154336aFF864f61083E76659'

GitHubで、リポジトリのSettingsタブに移動し、Pagesセクションを見つけます。
サイトのSourceとしてGitHub Actionsを選択し、Saveをクリックします。 ヒント： コミットする前に、workflowsディレクトリ内の他の2つのファイルを削除することを忘れないでください。そうしないとアクションが失敗します。

サイトが公開されました！Astroプロジェクトのリポジトリに変更をプッシュすると、GitHub Actionが自動的にデプロイします。

サーバーにデプロイ

まず、ビルドコマンドを実行します：

npm run build

次に、distディレクトリを圧縮してサーバーにアップロードします。NginxやApacheなどのサーバーソフトウェアを使用して静的ウェブサイトソリューションとしてデプロイします。