re:Invent2025ポータルサイトはNotion APIとGitHub Actionsでできている #AWSreInvent
背景
re:Inventのポータルサイト構築・運用を2018年から担当しています知恵蔵です。
入社したばかりの頃はイベント参加を経験させてもらい、現地からリアルタイムに更新作業を行っていました。
ですが、ここ数年は現地参加メンバーと連携して、日本から更新作業をしています。
要件を決める
コンテンツの更新タイミングを決める
まず、ラスベガスとの時差があるなかで、どのくらいの頻度で更新するのがよいかを決めました。
例年の傾向として、日本時間の午前2時とかに大きなサービスの発表が出て盛り上がることが多いです。
日本に居る閲覧者が、どのように情報をキャッチアップするのかパターンを考えてみると大きく2つです。
- 通勤時間やお昼休みに前日のリリースをチェックする
- 寝るのをあきらめた人たちが、公式のリアルタイム配信を視聴する
1の人たちを対象に、日本時間の早朝に更新することを必須としました。
コンテンツの更新方法を決める
ラスベガス入りするメンバーに情報を更新してもらうのですが、メンバーはHTMLを書けないので、会社で導入しているNotionを利用するのが早いだろうと考えました。
構成
下記のしくみでアップ・公開することにしました。
- Notionページを現地メンバーが更新
- Notion APIからのデータ取得とHTMLの生成を行う処理を11tyで実装
- Github Actionsでビルドし、生成したHTMLをS3に配置する
構築の流れ
Notionで更新する箇所を決める
今回現地メンバーに更新してもらうのは、イベントスケジュールとトピックスの2つです。（黄色で囲ったところ）
それに対応する2つのデータベースを用意します。実際のNotionページがこちらです。
現地メンバーにはNotionデータベースを編集してもらいます。
注意点は、データベースの項目名はAPIデータ取得時に使用してるから変えないでね、ということぐらいです。
Notion APIで取得したデータを利用してHTMLを生成
Notion APIの設定と11tyの構築方法は、以前書いたこちらの記事を参照してください。
Notion APIで取得した画像はS3 Presigned URLになり、期限が切れると画像が表示されなくなってしまうので、画像をダウンロードする処理が必要です。こちらの記事を参照してください。
GitHub Actionsでビルド、S3にアップ
つづいて、これらの作業の追加として、GitHub Actionsを設定していきます。
GitHubのリポジトリに.github/workflows/reinvent2025.yamlを作成します。（yamlのファイル名は任意です。）
参考サイト：GitHub Actions のクイックスタート
name: Build re:Invent 2025
on:
schedule: # 毎時0分に実行
+ - cron: '0 * * * *'
workflow_dispatch: # 手動実行も可能にする
jobs:
build:
runs-on: ubuntu-latest
permissions:
id-token: write
contents: read
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 9
- name: Get pnpm store directory
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- name: Setup pnpm cache
uses: actions/cache@v4
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
+ working-directory: 2025
run: pnpm install --frozen-lockfile
- name: Run build
working-directory: 2025
run: pnpm run build
env:
+ API_KEY: ${{ secrets.NOTION_API_KEY_REINVENT2025 }}
+ DATABASE_SCHEDULES_ID: ${{ secrets.DATABASE_SCHEDULES_ID }}
+ DATABASE_TOPICS_ID: ${{ secrets.DATABASE_TOPICS_ID }}
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v4
with:
+ role-to-assume: ${{ secrets.AWS_ROLE_ARN_REINVENT2025 }}
aws-region: ap-northeast-1
- name: Upload to S3
run: |
aws s3 sync 2025/_site/ s3://xxxxxxxxxx/m/reinvent/2025/ --cache-control "max-age=60" # バケット名は伏せてます
この設定ファイルのポイントはこちらです。
-
- cron: '0 * * * *'
1時間ごとにビルドを実行しています。
Notionページの更新をトリガにビルドすることができるオートメーションの機能もありますが、（権限の申請が面倒だったので）今回は使用しませんでした。 -
working-directory: 2025
環境にあわせて適宜設定してください。2025というディレクトリ配下で11tyを設定しています。 -
API_KEY: ${{ secrets.NOTION_API_KEY_REINVENT2025 }}
DATABASE_SCHEDULES_ID: ${{ secrets.DATABASE_SCHEDULES_ID }}
DATABASE_TOPICS_ID: ${{ secrets.DATABASE_TOPICS_ID }}
role-to-assume: ${{ secrets.AWS_ROLE_ARN_REINVENT2025 }}
後述するGitHubの「Actions secrets and variables」に設定します。secrets.以降は任意の名前です。
4つ目はS3にアップするためのIAMロールになります。こちらはAWSアカウントの管理者に発行してもらいました。
GitHubリポジトリはPrivateの設定にしていますが、環境変数や認証情報をリポジトリに直接PUSHするのは避けています。
こちらの内容でyamlファイルをリポジトリにPUSHします。
GitHubの管理画面のActionsから設定したワークフローが確認できます。
スケジュール以外にも Run workflow から手動実行ができます。
GitHubの管理画面 Settings - Actions secrets and variables - Actions で先ほどの環境変数や認証情報を設定します。
この環境構築での注意点が1つあります。
ビルド時に生成される「_site」配下のファイルはgitignoreに登録して、リポジトリで管理しないようにしています。
こちらの記事で紹介してる実装だと、Notion APIで画像を取得する際に、「_site」配下に存在すればダウンロードをスキップする仕様にしています。
リポジトリに画像をあげてしまうとNotionで画像を更新しても、本番では古い画像が表示され続けるといったことが起こります。
現地メンバーの更新を楽にするために工夫したこと
トピックスの画像はNotionページに入れてもらいますが、画像はスマホで撮影したりカメラで撮影したりするので、比率がバラバラになります。（16:9と4:3、ものによってはシェア用画像の1200:630が混在しそう。）
アップする画像の比率を統一してもらうのは手間だと思ったのでCSS側で16:9に揃えて、はみ出た分の切り落としは許容することとしました。
また、YouTube動画も随時アップされていて、これらもポータルサイトに追加していく必要があります。
こちらはre:Invent関連再生リストを作成、YouTubeAPIで取得するようにしています。
動画がアップされたことをこちらに共有してくれなくても自動で追加されるようになります。
さいごに
こうしてNotion APIとGitHub Actionsで自動化することによって、私は通勤前の早起き手動更新を免れることができたのでした。
クラスメソッドでは他にもイベントLPサイトを制作する機会があるので、人の手を介さなくてよいところは、こういった仕組みを活用していきたいと思いました。おわり。
