AstroプロジェクトをGitHubで管理しながら、生成された静的サイト（dist内のみ）をサーバープッシュで自動デプロイする方法

Astroで静的サイトを構築する際、GitHubでのバージョン管理とサーバーへのデプロイを効率的に行いたいですよね。

この記事では、プロジェクト全体をGitHubで管理しつつ、必要な静的ファイル（dist フォルダ）だけをXServerやさくらなどのサーバーにアップロードする具体的な方法を解説します。

方法の概要

1. GitHubでプロジェクト全体を管理: 開発ファイル（src フォルダ、astro.config.mjs など）はそのままGitで管理。
2. デプロイ時に dist フォルダのみアップロード: GitHub Actionsや手動アップロードでデプロイプロセスを設定。

1. GitHubでのプロジェクト管理

通常通りAstroプロジェクト全体をGitHubにプッシュします。

.gitignore の設定

dist フォルダはビルド時に生成されるため、Gitで管理しないよう .gitignore に追加します。

/node_modules
/.env
/dist

これにより、dist フォルダはGitリポジトリに含まれません。

2. GitHub Actionsを使用してdist のみをサーバーにアップロードする方法

GitHub Actionsを使うと、リポジトリの更新時に自動でビルドし、dist フォルダをサーバーにアップロードできます。

1. サーバー情報の準備

• サーバーにSFTP（またはFTP）で接続可能な情報（ホスト名、ユーザー名、パスワードなど）を用意。
• GitHubのリポジトリの「Settings」 > 「Secrets」で、接続情報を設定します。

例: 以下のシークレットを作成

• FTP_HOST
• FTP_USER
• FTP_PASS

2. GitHub Actionsの設定ファイル

リポジトリの .github/workflows/deploy.yml に以下の設定を追加します：

name: Deploy Astro Project

on:
  push:
    branches:
      - main  # mainブランチにプッシュ時に実行

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # リポジトリのクローン
      - name: Checkout code
        uses: actions/checkout@v3

      # Node.js のセットアップ
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      # パッケージのインストール
      - name: Install dependencies
        run: npm install

      # ビルド
      - name: Build project
        run: npm run build

      # distフォルダをサーバーにアップロード
      - name: Deploy to FTP
        uses: SamKirkland/FTP-Deploy-Action@4.3.0
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USER }}
          password: ${{ secrets.FTP_PASS }}
          local-dir: dist  # アップロードするローカルフォルダ
          server-dir: /public_html  # サーバー上のアップロード先

3. デプロイ後の確認

GitHub Actionsが正常に動作していれば、main ブランチにプッシュすると以下の手順が自動で実行されます：

1. Astroプロジェクトをビルド。
2. dist フォルダをサーバーにアップロード。

FTPクライアントやブラウザでサーバーの動作を確認してください。

まとめ

• GitHub管理: プロジェクト全体（src、astro.config.mjs など）はGitHubでバージョン管理。
• dist のみをアップロード: デプロイ時に必要な静的ファイルのみサーバーに配置。
• GitHub Actionsの活用: 自動化することで手間を削減。

この設定により、開発効率を維持しつつ、デプロイを効率化できます。設定についてさらに詳しく知りたい場合やカスタマイズが必要な場合はお知らせください！