Podcastの配信サイトをS3とCloudFrontで構築する

2019年7月から IJ Cast というInnovator Japan非公式Podcastの配信を始めました。社員が仕事や趣味について話す、といった感じのゆるい内容です。毎回15分でさらっと聴けますので、ぜひご試聴ください。

cast.innovator.jp.net

さて、今回はこのサイトの稼働環境とデプロイ、気を付けた点について説明したいと思います。

サイト稼働環境
- S3の指定方法
- どちらが良いか？
デプロイ
- CodeBuildの設定
- ちなみに
IJ Cast について
最後に

サイト稼働環境

S3(Static website hosting) + CloudFront で配信しています。

静的なサイトを公開するだけであれば、S3のStatic website hosting機能のみで可能です。ただ、httpsでアクセス可能にするためには、CloudFrontを通す必要がありました。

以下、注意点をつらつらと。（S3やCloudFrontの基本的な設定は省略します。）

S3の指定方法

CloudFrontのOriginにS3を指定する方法は2つ。

1. S3のバケットを指定する方法

2. Static website hostingのエンドポイントを指定する方法

どちらかで指定します。

どちらが良いか？

S3のバケットを指定する場合、Static website hosting機能で公開する必要はありません。ただし、静的サイトに欲しい2つの機能が使えません。

indexドキュメント
- /foo/ へのアクセスで /foo/index.html のコンテンツを表示するアレ
エラーページの細かい制御
- 例えば存在しないパスへのアクセスに、403ページでなく404ページを表示すること
- ※ CloudFrontで固定の指定なら可能

2.はともかく、1.の仕様だと必ずURLに /index.html が入ってしまうので、今回はStatic website hostingのエンドポイントを指定する方法にしました。

ただ、こちらの方法も問題点が1つだけあって、それはバケット名を推測して直接アクセスできることです。静的サイトなので特に問題にはならないのですが、一応バケット名の文字列を長くしています。

デプロイ

とてもシンプル。

GitHubでPull Requestマージイベント発生
CodeBuildが動く

だけです。

CodeBuildの設定

CodeBuildの設定ファイル (buildspec.yml) も、以下の通りとても簡単な内容です。

version: 0.2
phases:
  install:
    runtime-versions:
      golang: 1.12
    commands:
      - go get github.com/gohugoio/hugo
  build:
    commands:
      # HTMLなど成果物が生成されます
      - hugo
    finally:
      # S3にデプロイ
      - aws s3 sync --exact-timestamps --delete public/ s3://ij-cast-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  post_build:
    commands:
      # CloudFrontのキャッシュを全て無効化
      - aws cloudfront create-invalidation --distribution-id XXXXXXXXXXXXXX --paths '/*'

ちなみに

IJ CastはせっかくCloudFrontを使った静的サイトなので、キャッシュの有効期限を1年にし、なるべくキャッシュから返すようにしています。そのため、デプロイ時には全キャッシュをinvalidateするようにしました。

CodeBuildを使うことの（他CIサービスと比較しての）メリットは、今回のようなS3やCloudFrontへのアクセスが必要な場合に、IAMのキーペアを発行する必要がないことです。料金も毎月100分まで無料なので、Podcastサイトの要件なら十分収まってしまいます。

IJ Cast について

最後にちょっとだけ IJ Cast 自体で気をつけたことを。

極力シンプルな見た目になるようにした
- IJのイメージとしてモノトーンなのでそれも踏襲
- コントラスト比もひどくなりすぎないように
リクエスト数をなるべく減らした
- cssはHugoテーマのデフォルトの1つと、それの上書き用の合わせて2つのみ
- jsはGTMのみ
- 画像はfavicon系のみ
音声ファイルは自動でダウンロードしないようにした
SNS共有系ボタンはナシ
公式ハッシュタグ（ #ijcast ）は控えめに最後に置いている