マイナビエンジニアブログのサイト構築に挑戦してみました！

こんにちは！ 内定者のぶり大根です。
今回は、このマイナビエンジニアブログの提供方法について記事にまとめました！

はじめに

このエンジニアブログではGo言語(golang)で書かれた静的サイトジェネレーターHUGOで作成した記事を、AWS(Amazon Web Service)を用いて配信しています。
なお、ソースコードの管理にはGitを利用しています。

今回、内定者研修の一環として、エンジニアブログのインフラ構築に挑戦してみました。
本記事では、このAWSとGitの部分に関して簡単に紹介しようと思います。

CDNおよびGitについて

マイナビエンジニアブログは、記事の配信をAWSのCDNサービスを利用して配信しています。
CDNについては、下記をご覧下さい。

CDNというのは、記事のオリジナルを保持するオリジンサーバーと、オリジンサーバーのキャッシュを保持する複数のエッジサーバーによって構成されたネットワークのことです。
複数のサーバーからコンテンツを配信することで、世界中のユーザーがコンテンツを比較的高速で利用できたり、万が一障害が起きた際の対処が容易になったりと、様々な利点があります。

また、マイナビエンジニアブログでは、記事管理に Gitを利用しています。

Gitとは、分散型の バージョン管理システムです。
近年世界中で愛用されているバージョン管理システムで、複数人が参画するソフトウェア開発では、ほとんどの場合ソースコードの管理にGitが利用されています。
Twitterのトレンドに入ったこともあるので、IT系の仕事に就いていなくとも、プログラミングを勉強したことがある人であれば、知っている人は多いと思います。

マイナビエンジニアブログでは、このGitのホスティングサービスに Bitbucket を利用しています。
BitBucketに存在するPipelinesという機能を利用して、masterブランチの内容をCDNのオリジンサーバーと同期することで、記事を簡単に配信する仕組みを作っています。

CloudFrontとS3を用いたCDNとLambda@Edge

まずは、マイナビエンジニアブログにおけるCDNのアーキテクチャを簡単に紹介したいと思います。

CloudFrontとは、AWSの提供しているCDNサービスのことです。
マイナビエンジニアブログでは、AWSの S3という クラウドストレージサービスをオリジンサーバーとして見立てて、CloudFrontによるCDNを構築しています。

CloudFrontに関して様々な設定を加えていきますが、ネット上で方法を検索しながら実装していけばさほど難しいとは感じませんでした。
初めてAWSに触れるような人でも、比較的容易に進められると思います。

なお、エンジニアブログではオリジンに直接アクセスされないようにするため、アクセスされた際のURLについて工夫を行っています。

記事の内容は、index.htmlという名前のファイルに書き込まれています。しかし、本ページのURLを確認すると

https://engineerblog.mynavi.jp/post/introduction-infrastructure/index.html

ではなく、

https://engineerblog.mynavi.jp/post/introduction-infrastructure/

となっていることがわかります。

これは、ユーザに直接S3のオリジンを参照させないために施している処理になります。

introduction-infrastructure/index.html
introduction-infrastructure/
introduction-infrastructure

にアクセスしてきた際、全てを

introduction-infrastructure/index.html

に誘導しているのです。

この処理には、Lambda@Edgeを利用しています。

Lambda@Edge

Lambda@Edgeは、サーバーで複雑な準備や管理を事前にしていなくてもプログラムを実行できるサービスです。

まず、正規表現を使用し、introduction-infrastructureのようなURLが来た際にURL最後尾に"/"を付与します。
なお、これは冒頭に登場した静的サイトジェネレーター「Hugo」の仕様による処理となります。

次に、「introduction-infrastructure/」でアクセスされた場合、末尾に"index.html"を付与します。
これにより、先ほどあげた三種類のURLいずれかが入力されても、必ずintroduction-infrastructure/index.htmlに誘導されるようにします。

URL処理は状況に応じて加える必要がありますので、エンジニアブログの場合は上記のような処理が必要であった、と認識していただければと思います。

Pipelinesを使用したBitBucketのからの自動アップロード

続いて、マイナビエンジニアブログにおけるGitの役割について紹介したいと思います。

冒頭で述べたとおり、マイナビエンジニアブログでは、Gitのホスティングサービスとして BitBucketを利用しています。
私個人、卒業論文のソースコード管理にこのBitBacketを使っていたので、それほど戸惑うことなく利用できましたが、初めて使う人はBitBucketについて色々調べてみるといいと思います。

BitBucketでは、 BitBucket Pipelinesという機能が利用できます。

BitBucket Pipelineは、BitBacketに付属しているCI/CD機能です。簡単に言うと、ローカル上の様にコマンドを実行してくれるコンテナを作成、提供してくれます。
リポジトリ上にbitbucket-pipelines.ymlというファイルを作成、記述することで、 内容の変更をpushしたりmergeしたりした際に、bbitbucket-pipelines.ymlに記述したとおりの処理を実行してくれます。

このbitbucket-pipelines.ymlに以下の五つの処理を書き込むことで、S3と内容を同期しています。

• コンテナへのHUGOの圧縮ファイルダウンロード
• ダウンロードしたHUGOの解凍
• hugoコマンドの実行(publicフォルダの生成)
• AWSのCLIインストール
• HUGOのpublicフォルダと、S3のバケットの同期

変更する度に自動でファイルを同期してくれるようになるため、サービスのアップデートに手間がかからなくて済みます。
なお、誤った内容でmasterブランチを更新してしまった場合、自動的に更新がかかってしまう恐れがあるので、Bitbucketのブランチアクセス権限を適切に整備するのが適切です。

まとめ

今回はマイナビエンジニアブログのコンテンツ提供方法について簡単に紹介しました。
難しいコマンドを何度も入力することや、長く複雑なコードを入力することなどなく、基本的にAWSやBitBacketが持つ機能だけで提供されていることが分かりました。
実際に触れたことのなかった自分でも実装できましたので、今後も機会があれば挑戦してみたいと思います。