Astro のビルドとデプロイ

はじめに

Astro プロジェクトを開発する過程で、最終的にウェブサイトやアプリケーションを公開するためには、ビルドとデプロイのプロセスを理解し、適切に実行する必要があります。このセクションでは、Astro プロジェクトのビルドプロセスと、主要なホスティングサービスへのデプロイ方法について、具体例を交えて説明します。

ビルドプロセス

ビルドプロセスは、開発中に作成したソースコードを、ブラウザで実行可能なファイル群に変換する一連のステップです。Astro では、以下のコマンドを実行することでビルドを行います。

npm run build

このコマンドは、astro buildコマンドを実行し、srcディレクトリ内のファイルから静的なウェブサイトを生成します。生成されたファイルは、distディレクトリに格納されます。

例: ビルドコマンドの実行

プロジェクトディレクトリでターミナルを開き、以下のコマンドを実行します。

npm run build

成功すると、distディレクトリにウェブサイトを構成する静的ファイルが生成されます。

デプロイ

ビルドが完了したら、次はウェブサイトをインターネット上に公開するためにデプロイします。以下では、Vercel、Netlify、および Firebase Hosting へのデプロイ方法を紹介します。

Vercel へのデプロイ

  1. Vercelにサインアップまたはログインします。
  2. 「New Project」をクリックし、GitHub、GitLab、または Bitbucket から Astro プロジェクトをインポートします。
  3. プロジェクトの設定で、ビルドコマンドにnpm run build、アウトプットディレクトリにdistを指定します。
  4. 「Deploy」をクリックしてプロジェクトをデプロイします。

Netlify へのデプロイ

  1. Netlifyにサインアップまたはログインします。
  2. 「New site from Git」を選択し、リポジトリを選んで Astro プロジェクトをインポートします。
  3. ビルド設定で、ビルドコマンドにnpm run build、公開ディレクトリにdistを指定します。
  4. 「Deploy site」をクリックしてデプロイします。

Firebase Hosting へのデプロイ

  1. Firebaseにプロジェクトを作成します。
  2. Firebase CLI をインストールします。 
    npm install -g firebase-tools
  3. プロジェクトディレクトリでfirebase initを実行し、Hosting を選択して設定します。公開ディレクトリとしてdistを指定します。
  4. firebase deployコマンドでデプロイします。

AWS Amplify へのデプロイ

AWS Amplify は、ウェブアプリケーションやモバイルアプリケーションの開発を容易にするフルマネージドサービスです。静的ウェブサイトのホスティングだけでなく、認証、API、データベース、ストレージなどの機能も提供します。Astro プロジェクトを AWS Amplify にデプロイする手順は以下の通りです。

  1. AWS アカウントの準備: まだ AWS アカウントを持っていない場合は、AWS 公式サイトからサインアップしてアカウントを作成します。
  2. Amplify CLI のインストール: AWS Amplify CLI（コマンドラインインターフェース）をローカルマシンにインストールします。これにより、コマンドラインから AWS Amplify の機能にアクセスできます。
    npm install -g @aws-amplify/cli
  3. Amplify の設定: Amplify CLI を使用して、AWS にログインし、Amplify の設定を行います。
    amplify configure

    このコマンドは、ブラウザを開き、AWS コンソールへのログインを促します。ログイン後、指示に従って新しい IAM（Identity and Access Management）ユーザーを作成します。
  4. プロジェクトの初期化: Astro プロジェクトのルートディレクトリで、以下のコマンドを実行して Amplify プロジェクトを初期化します。
    amplify init

    プロジェクト名、環境名、エディターなど、いくつかの質問に答えます。プロセスが完了すると、AWS にプロジェクトの設定が作成されます。
  5. 静的ウェブサイトのホスティングを有効化: 次に、Amplify の静的ウェブサイトホスティング機能を有効にします。
    amplify add hosting

    このステップでは、ホスティングサービスのタイプ（開発用または本番環境用）を選択し、ドメイン設定などのオプションを構成します。
  6. ビルドとデプロイ: ホスティングを設定したら、Astro プロジェクトをビルドして AWS Amplify にデプロイします。
    amplify publish

    このコマンドは、プロジェクトをビルドし、distディレクトリの内容を AWS Amplify にアップロードしてデプロイします。成功すると、デプロイされたウェブサイトにアクセスするための URL が表示されます。

CI/CD パイプラインの設定

継続的インテグレーション（CI）と継続的デリバリー（CD）を設定することで、コードの変更を自動的にビルド、テスト、デプロイするプロセスを自動化できます。GitHub Actions や GitLab CI/CD などのツールを使用して、Astro プロジェクトの CI/CD パイプラインを設定することが可能です。