astro-notion-blogをAWS AmplifyでHostする

概要手順前提 amplifyにアクセスし、使用を開始する GithubとAWS Amplifyを紐付けるリポジトリブランチの追加ビルドの設定（環境変数の出力）環境変数の設定デプロイ実行デプロイ結果の確認

概要

作成したAstro-NotionブログをAmplifyでHostingし公開します。

手順

前提

下記を前提にしています。

AWS アカウントが作成されていること
Githubにコードが存在すること

amplifyにアクセスし、使用を開始する

AWSコンソールへアクセスし、使用を開始するをクリックします。

今回はアプリケーションがない状態からスタートしていますが、ある場合は、新規のアプリケーションを作成してください。

GithubとAWS Amplifyを紐付ける

Githubを選択し、続行を押下します。

Githubの認証がされていない場合は、認証が必要になります。

リポジトリブランチの追加

最近更新されたリポジトリから、自身のastro-notion-blogのリポジトリを選択します。

更新されたリポジトリが表示されない場合は、リポジトリへのアクセス許可がされていることを確認してください。

ビルドの設定（環境変数の出力）

アプリケーションの名前は何でも良いです。自身がわかりやすい名前に設定してください。

構築とテストの設定を変更します。

基本的にはAstro公式のビルドコマンドを設定することでビルドを実施することができます。

Deploy your Astro Site to AWS

How to deploy your Astro site to the web using AWS.

https://docs.astro.build

しかし、このままでは環境変数を出力できないため、9-10行目のNOTION_API_SECRETとDATABASE_IDを.envに出力するechoコマンド（2行）をbuild > commands 以下に設定します。

version: 1
frontend:
  phases:
    preBuild:
      # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
      commands:
        - npm ci
    build:
      commands:
      	# 環境変数の追加
        - echo "NOTION_API_SECRET" >> .env
        - echo "DATABASE_ID" >> .env
				# 環境変数の追加終わり
        - npm run build
  artifacts:
    baseDirectory: /dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*