Astro のデプロイ方法比較ガイド#

特徴#

• 設定不要ですぐにデプロイが可能
• SSR、SSG、ISR など多様なレンダリング戦略をサポート
• プレビュー環境とプロダクション環境の分離
• アナリティクスと環境変数の管理
• グローバル CDN による高速化

設定方法#

1. Vercel アカウントを作成し、ログインします
2. GitHub リポジトリと連携します
3. 「Import Project」からリポジトリを選択します
4. フレームワークプリセットとして「Astro」を選択します

# または、Vercel CLIを使用する場合
npm i -g vercel
vercel login
vercel

astro.config.mjs の設定#

import { defineConfig } from "astro/config";
import vercel from "@astrojs/vercel/serverless";

export default defineConfig({
  output: "server",
  adapter: vercel(),
});

カスタムドメインの設定#

Vercel ダッシュボードから「Domains」セクションに移動し、カスタムドメインを追加します。DNS の設定を行えば、数分で SSL 証明書が自動発行され、サイトにアクセスできるようになります。

特徴#

• ドラッグ＆ドロップでデプロイが可能
• 継続的デプロイメント
• フォーム処理機能
• サーバーレス関数のサポート
• エッジ関数によるパフォーマンス最適化

設定方法#

1. Netlify アカウントを作成し、ログインします
2. 「New site from Git」をクリックします
3. GitHub リポジトリと連携します
4. ビルド設定:
   • Build command: npm run build
   • Publish directory: dist

# または、Netlify CLIを使用する場合
npm install -g netlify-cli
netlify login
netlify init
netlify deploy --prod

astro.config.mjs の設定#

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

export default defineConfig({
  output: "server", // SSRの場合
  adapter: netlify(),
});

netlify.toml ファイルの作成#

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

[dev]
  command = "npm run dev"
  port = 3000

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

特徴#

• 無料で利用可能
• GitHub リポジトリと直接連携
• カスタムドメインと SSL のサポート
• GitHub Actions による自動デプロイ

設定方法#

1. GitHub リポジトリを作成します
2. .github/workflows/deploy.ymlファイルを作成します

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Build website
        run: npm run build
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

astro.config.mjs の設定#

import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://yourusername.github.io",
  base: "/your-repo-name",
});

カスタムドメインの設定#

1. リポジトリの「Settings」タブに移動します
2. 「Pages」セクションでカスタムドメインを入力します
3. DNS プロバイダーで CNAME レコードを設定します
4. リポジトリにCNAMEファイルを作成し、ドメイン名を記載します

特徴#

• グローバル CDN による高速配信
• 無制限の帯域幅
• 自動ビルドとデプロイ
• 環境変数とシークレットの管理
• Web アナリティクスの統合

設定方法#

1. Cloudflare アカウントを作成し、ログインします
2. 「Pages」タブに移動し、「Create a project」をクリックします
3. GitHub リポジトリと連携します
4. ビルド設定:
   • Framework preset: Astro
   • Build command: npm run build
   • Build output directory: dist

astro.config.mjs の設定#

import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";

export default defineConfig({
  output: "server", // SSRの場合
  adapter: cloudflare(),
});

特徴#

• TypeScript ネイティブサポート
• グローバルエッジネットワーク
• 迅速なデプロイと更新
• GitHub 連携
• 無料枠が比較的大きい

設定方法#

1. Deno Deploy アカウントを作成し、ログインします
2. 新しいプロジェクトを作成します
3. GitHub リポジトリと連携します
4. デプロイ設定を行います

astro.config.mjs の設定#

import { defineConfig } from "astro/config";
import deno from "@astrojs/deno";

export default defineConfig({
  output: "server",
  adapter: deno(),
});

設定方法#

1. Astro プロジェクトをビルドします

npm run build

2. 生成されたdistディレクトリの内容を FTP などでアップロードします
3. サーバー側で必要な設定を行います（.htaccess など）

.htaccess の設定例#

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L,QSA]