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

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

cast.innovator.jp.net

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

サイト稼働環境

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

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

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

S3の指定方法

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

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

S3のバケット指定
S3のバケット指定

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

Static website hostingのエンドポイント指定
Static website hostingのエンドポイント指定

どちらかで指定します。

どちらが良いか?

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

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

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

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

デプロイ

とてもシンプル。

  1. GitHubでPull Requestマージイベント発生
  2. 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 CastのUI
IJ CastのUI

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

とにかく音声を聴いてもらいたかったので、余計なものはなるべく除外しています。

最後に

IJ Castは業務の片手間に半分趣味でやっていますが、Innovator Japanで働く人の雰囲気がなるべく伝わるよう意識はしています。

もし一緒に働きたいなと感じていただけたら、コーポレートサイトなどからお気軽にご連絡ください!(まずは話が聞きたい、でも大丈夫です。)

www.innovator.jp.net