はじめに

みなさん、こんにちは。システムチームのあっきーです。PyCon JP 2020のシステムチームの活動について紹介するブログの第3弾です。以前の投稿は下記から参照ください。

PyCon JP 2020 システムチーム振り返り【スケジュール編#1】

PyCon JP 2020 システムチーム振り返り【スケジュール編#2】

本投稿ではPyCon JP 2020のWebサイトをどのように作ってるのか、その裏側について紹介します。少しでも皆さんのお役に立てるような情報を公開できるように頑張って書きましたので是非参考にして頂ければ幸いです。(*^▽^*)

フロントエンド側

最終的なフロントエンドの使用技術は下記になります。

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

実際のリポジトリは下記になりますので、興味ある方はご確認ください。

pycon.jp.2020.ui

技術選定についていろいろと議論した結果、Reactよりも使用経験者が多いNuxt.jsを採用することになりました。また、Vuetify等のフレームワークを使用する案も出ましたが、フレームワーク自体の習得が必要なため少しハードルが高いという結論に至りました。Tailwind CSSは通常のCSSの知識があれば利用可能であるため、比較的ハードルが低いと感じ採用しました。

PyCon JP 2020のサイトは原則WebサイトからのAPI呼び出しは実施せずにビルド時にデータを埋め込み、静的サイトとしてジェネレートしてホスティングする仕組みを採用しています。ページの性質として動的なコンテンツがほとんどないので、デプロイ時に静的サイトとしてジェネレートする方がメリットが多いと考えたためです。

具体的にはPyCon JP Blogの最新のブログ記事のタイトルとセッションデータを埋め込んでいます。ブログ記事はBloggerのAPI経由で、セッションデータはsessionizeのAPI経由でデータを取得しています。

上記構成の場合、ブログ情報とセッション情報はビルド、デプロイ作業を実施しないと内容が更新されません。内容の更新については深夜に1回自動でビルド、デプロイするような仕組みを導入しています。

バックエンド側

次にバックエンドの技術について説明します。

【AWSを採用した理由】

原則リソースはAmazon Web Services(以下AWS)で作成することにしています。複数人で開発を進める場合、アカウント周りがしっかりしていないと共通のアカウントを使いまわす、という運用になってしまうこともあります。アカウント管理をしっかりできるように、少ない人数で回せるようにという事でクラウドメインでの方針としています。Google Cloud PlatformではなくAWSを選んだ理由としては詳しい人が多かったからです。

【ホスティング環境について】

開発環境のホスティングはsurgeを使っています。GitHub Actionsでsurgeへの自動デプロイの設定をしているので、developブランチへマージされたら自動的に開発環境のデプロイが実行されます。ステージング環境と本番環境はAWS Amplify Consoleを使っています。こちらもstagingブランチとmasterブランチにマージされたら自動的にデプロイされるように設定しています。

【セッションデータの管理について】

セッションデータはsessionizeというサービスで管理しています。API経由でセッションデータを取得することができるので、ビルド時にセッションデータを取得し、フロントエンド側で利用しやすいように整形しています。このセッションデータ整形プログラムはPythonで作られています。

【トラブルシューティング】

セッションごとの固有URLについて

自分の気になるセッション、良かったセッションをTwitter等で公開する場合、セッションごとの固有URLがあると便利です。この機能は開催直前に発覚し、急遽実装しました( ° ω ° ; )基本的にはVue Routerのクエリパラメータ($route.query)の機能を使って実装しています。

サイトURLがサブディレクトリ構成だった

PyCon JPのサイトは年度ごとのサブドメインではなくnginxのサブディレクトリ構成となっています(https://pycon.jp/2020/)。通常のNuxtの設定だとサブディレクトリには対応できないのでBase URLを本番環境のみ変更するような仕組みを入れています。

参考：API: router プロパティ
https://ja.nuxtjs.org/api/configuration-router/

多言語対応、セッションデータ整形、読み込みなどなどいろいろと紹介したい実装もあるのですが、長くなりそうなのでこの辺で(o´･ω･`o)ﾉｼ

トラブルも多かったですが、いろいろな方のサポートのおかげで無事サイトが完成し、皆さんにお届けすることができました。この内容が少しでも皆さんのお役に立てれば幸いです。ヾ(*´∀｀*)ﾉ

PyCon JP Blog

2020-10-16

PyCon JP 2020 システムチーム振り返り【技術編】