astro-notion-blogをAWS Amplifyにホスティングする

前提条件

AWSアカウントを持っていること
Gitリポジトリにastro-notion-blogのコードがあること

手順

1.Amplifyにアクセスし、使用を開始する

AWSマネジメントコンソールからAmplifyを開く。

Amplifyホスティングの[使用を開始する]ボタンを押下する。

2.AmplifyとGitHubリポジトリの連携

既存のコードから[GitHub]を選択し、[続行]ボタンを押下する。

GitHubのサインイン画面が表示されるので、認証を行う。

GitHubの認証に成功したら、astro-notion-blogのリポジトリを選択し、ブランチはmainに指定。その後、[次へ]ボタンを押下する。

3.ビルドコマンド設定

アプリケーション名は任意でOK。

基本的には、Astro公式のビルドコマンドを設定することでビルド可能だが、astro-notion-blogにおいては、環境変数の設定をしないとビルドに失敗する。

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

AWSを使ってAstroサイトをウェブにデプロイする方法。

https://docs.astro.build

[構築とテストの設定]の[編集]から以下のコード(環境変数設定含む)をコピペでOK。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
      	# 環境変数の追加
        - echo "DATABASE_ID" >> .env
        - echo "NOTION_API_SECRET" >> .env
        - npm run build
  artifacts:
    baseDirectory: /dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

その後、[環境変数]セクションに以下環境変数を設定し、[次へ]ボタンを押下する。

環境変数名	説明
DATABASE_ID	公開予定のNotion DBのID。astro-notion-blogのREADMEに取得手順が記載されている。
NOTION_API_SECRET	Notionインテグレーションのシークレットキー。
PUBLIC_GA_TRACKING_ID	Google Analyticsのトラッキングコード(任意)。画像にはないが設定済み。