PyCon JP 2021 Web担当振り返り[実装 デプロイ]

 PyCon JP 2021スタッフの中村です。

今回はPyCon JP 2021のWebサイトとその周辺についてお伝えします。

PyCon JP 2021のWebサイトについて

PyCon JPではカンファレンスの情報発信のため、毎年公式Webサイトを制作して公開しています。

PyCon JP 2021ではティザーサイトと本番サイトの2つを公開しました。

これらのサイトはボランティアスタッフ内から立候補したWeb担当(昨年はシステムチーム)がモック作成、デザイン作成、実装、デプロイまでを全て行っていました。

この記事ではこれらのサイトの実装、デプロイ周りについてご紹介します。

フロントエンド実装について

フロントエンドの主な技術スタックは昨年同様以下の通りです。

• Nuxt.js(axios, i18n, content)
• Tailwind CSS

ソースはGitHub上のpublicなリポジトリで管理していました。

pyconjp/pycon.jp.2021

PyCon JP 2021のウェブサイトはSSRを使用せず、デプロイ時に静的サイトとして生成してから公開しています。

以下のコンテンツはデプロイ時に外部のAPIから必要な情報を全て取得してnuxt/contentを使って静的サイトに埋め込んで公開しています。

• トップページのNews欄
• タイムテーブルのセッション情報

デプロイについて

デプロイ周りの主な技術スタックは以下の通りです。

• GitHub Actions(自動デプロイ)
• AWS CodeCommit(コード管理)
• AWS Amplify(開発環境、ステージング環境、本番環境ホスティング)
• Amazon EventBridge(定期デプロイ実行)
• AWS Lambda(定期デプロイ処理)
• Python(sessionizeからのセッション情報取得、定期デプロイ処理)
• sessionize(セッション情報管理)

昨年は開発環境はsurge, 本番環境はAWS Amplifyを使用していましたが今年は本番環境、ステージング環境、開発環境の3環境全てでAWS Amplifyを使用していました。

3つの環境へはそれぞれGitHub上のmaster, staging, developブランチへのマージをトリガーとしてGitHub Actionsを用いて自動でAWS Amplifyのデプロイ処理が実行されるようになっています。

今年のWeb担当スタッフは最初から最後まで一度もオンサイトで集まることはなく、完全にリモートでの作業でしたが、開発環境のデプロイが自動化されていたことで「修正したので確認お願いします」といったやりとりが非常にスムーズに行えていたと思います。

デプロイ時には静的ファイルに埋め込むためのデータを取得するため、トップページのNews欄はPyCon JP Blog(このブログ)のRSS、タイムテーブルのセッション情報はsessionzeのAPIからそれぞれ情報を取得しています。

sessionzeのAPIから取得した情報をタイムテーブルの表示に使いやすいフォーマットにするためにはやや複雑なデータの加工が必要であったため、このデータの加工にはPythonを用いています。

この仕様はデプロイ時にのみ外部からデータを取得するため、どれだけサイトのアクセス数が増加しても外部のAPIが呼ばれる回数は増加しないメリットはありますが、その反面デプロイしない限りサイトのコンテンツが更新されないというデメリットもあります。

そこで、あらかじめ本番環境のAWS Amplifyにはデプロイ用のwebhookを用意し、Amazon EventBridgeからAWS Lambdaの関数を毎日決まった時刻に呼び出すようにセットし、このLambda関数がAWS Amplifyのデプロイ用webhookにリクエストを送信することで本番環境を定期的に更新するようにしていました。

昨年度までと比べるとコンテンツを絞った内容になりましたが、カンファレンスの情報発信という役割を果たすことができるWebサイトをリリースし、安定して運用できました。