テックブログの技術スタック

開発ユニット(SRE) の田村です。

今回は、本テックブログの技術スタックについてご紹介いたします。

テックブログの構成図

GitHub Pages は一つのリポジトリに紐づいた、**.github.io のドメインに、リポジトリ内部のファイルを公開する仕様を持ちます。

GitHub Actions を利用してソースリポジトリと公開リポジトリを連携しております（上図）

テックブログのソースリポジトリを用意する (ex. owner/tech-blog)
GitHub Pages の公開リポジトリを用意する (ex. owner/owner.github.io)
GitHub Actions を用いて、ソースリポジトリからビルドしたファイルを、公開リポジトリに push する (main マージをトリガーとする)
GitHub Pages により **.github.io にテックブログの記事が公開される
Amazon Route 53 による CNAME 連携で、techblog.oz-vision.co.jp から **.github.io の公開記事にアクセス可能にする

以上が、テックブログの構成です。

本テックブログは、「情報発信をしていきたい！」という想いを持つ、開発部のメンバーたちの声から生まれました。

この声を早く実現するために、自分たちの環境と親和性が高く、運用保守の観点からもリーズナブルな技術選定が鍵となりました。

テックブログの選定指針として、下記の三点を念頭に掲げました。

基盤となるコンテンツ配信技術で検討した技術スタックは以下となります。

オズビジョンではソースコードを Git 上で管理し、 make を利用したワンコマンドでの開発環境構築を実現しています。

これを踏襲し、テックブログの技術スタックも、Git + make が候補として浮かびあがりました。

さらに、普段の開発においても、 GitHub を利用した Pull Request のレビューを実施していることから、ブログの執筆環境も GitHub 管理で一元化させた方が相性が良いというメリットもありました。

WordPress については、 AWS 上でのサーバ管理が新たに発生し、ローカル環境の構成にも DB が必須となり高コストとなるため却下となりました。

有料ブログサービスについては、利用にコストが生じることと、そもそも執筆環境を Git 管理できないことから却下となりました。

静的サイトジェネレータは、セキュアであり、追加コストも掛からず、Git リポジトリ上で管理できることが決め手となり、採用が決定しました。

静的サイトジェネレータには、Reactを利用した Gatsby、Ruby gem で作られた Jekyll、Goによる Hugo が候補に上がりました。

オズビジョンではモバイルアプリの開発で React Native を利用しています。

そのため、React ベースの GatsbyJS にはシナジー効果があるとも考えられたのですが、ブログ基盤のローンチを短納期でやり遂げるためにシンプルなコマンド体系で Markdown を静的サイトに変換できる Hugo を選択することとなりました。

静的サイトジェネレータを構成したので、次は配信手法の確定です。

オズビジョンでは AWS Well-Architected Framework のセキュリティの柱のリスク改善を進めています。

本ブログもセキュリティリスクを鑑み、不用意なシークレットキーの受け渡しを避けたいと考え、GitHub のみで完結させることで、安全な仕組みの構築を目指しました。

また、テックブログを、素早く構築しローンチすることを目指した結果、コーディング量を削減する技術スタックを選定しました。

オズビジョンでは CI/CD サービスに AWS CodePipeline を利用しており、今回もそれを踏襲しようとしていましたが、IAM 系の管理コストが増大するため、GitHub Actionsの採用しました。

その他、以下の静的配信サービスの利用を検討していましたが、セキュリティ観点から外部サービスとのデータの受け渡しを避けるため却下となりました。

結果として、GitHub 内部サービスだけを利用し、ブログ資産の管理(GitHub)、記事の静的配信(GitHub Pages)、本番ビルド(GitHub Actions) を管理する構成となりました。

今回、本テックブログでは静的サイトジェネレータを採用しましたが、結果として、執筆するメンバーやエンジニアにとっても、「VSCodeなど手慣れたエディタで執筆できる」「GitHub 上のPRフローに乗せて、レビューが可能になる」メリットが得られました。

静的サイトジェネレータは、コンテンツ本体が Markdown と画像ファイルの構成となりますので、今後、記事資産を流用しながら改修を行うことが容易となるメリットもありました。

GitHub Pages によるブログ配信は 2023 年現在では広く使われているものかと思いますが、実際に構築を行ってみると、少ないコード量で本番デプロイまで行えると実感する結果となりました。

こちらの記事も GitHub のPRフローに乗せて執筆をしています。

記事を書きながら、自分では見落としていた誤字脱字や、文章の修正点を、バシバシとレビューをいただき、GitHub でチームメンバーにフィードバックを貰える体制のありがたさを感じています。

ブログ基盤のコーディングよりも、記事の執筆中の方がレビューを頂いているのでは？とも感じて、記事執筆の大変さを実感しております。

それでは、次回の記事もよろしくお願いいたします。