ツナワタリマイライフ

日常ネタから技術ネタ、音楽ネタまで何でも書きます。

バンドのHPを作成したのでやったことをまとめておく

はじめに

前回も自分のソロプロジェクトのHPをAWS上でなんやかんや作って、今回はそれと同じことをしたことになる。

take-she12.hatenablog.com

その5まであるが省略。

完全に同じことをしたわけでもないし、前回と違う部分、自分の過去の記事が不十分だった点もあるので大きな流れとしてやったことを整理しておく。

Architecture

AWS上で作った仕組みについての絵。 f:id:take_she12:20170416173649j:plain

大きく以下のセクションに分けられそうだ。

  1. S3にコンテンツをアップロードし、webホスティングをした
  2. 独自ドメインを取得し、Route53で名前解決できるようにした
  3. cloudfrontでcache設定と、cloudfront経由でしかS3バケットにアクセスできないようにし、Route53のAレコードをcloudfrontのドメイン名に変更した。
  4. circleCIからアクセスできるようIAMでユーザを作成し、githubのpushをトリガーにgithubとS3のコンテンツを同期した
  5. HPそのものをpure.cssを用いて作成した

順におさらいしていく。

S3

S3への静的コンテンツのアップロードは非常に簡単。「S3 webホスティング」で検索すれば有益な情報が山ほどでる。

注意点はバケット名をドメイン名にすることぐらいだが、cloudfrontを使うなら必須ではないのかな。

Route53

ドメインは前回と同じくムームードメインで取得。取得時にはDNSは「今は使用しない」にしておき、Route53に登録後に出てくる4つのawsのname serverをムームードメイン管理ページで登録してやる。

DNSの伝搬は結構時間がかかるイメージだが、数分で完了したから驚く。

ちなみにここでの登録はCNAMEではなくAレコードかつRoute53の独自仕様のALIESで、独自ドメイン→S3バケットへの変換を行っている。この理由としてはRFC1034でトップレベルドメインにはCNAMEが使えないからだそうだ。

サブドメイン無しでAkamaiの利用ができなかったのでCloudfrontに切り替えた件 - 日記っぽい何か

wwwのようなサブドメインを切らなくても登録できるから非常に助かる。

cloud front

今回はhttps対応を行っていないので、新規登録したあと、Route53のAレコードのALIESをS3バケットからcloud frontのアドレスに変えただけだ。

このときS3バケットのポリシーも一緒に更新するよ、と選んでおけば勝手に更新されるから楽。

cacheも前回と同じく1日。1日の遅れぐらい気にしない。今後0時ちょうどに新作リリースの発表。。。とかがあるなら別だが。

circle CI

前回と同じくcircleCIを採用。ここで少しハマって、前回登録してるからAWSへの認証は新規にしないでいいだろう、と思い込んだんですが、IAMユーザのアクセスキーとアクセスシークレットの登録はprojectごとにしないといけないみたい。

で、アクセスシークレット は発行時にしか見れないから、再度生成し、前回登録したprojectも登録しなおしました。

pure.css

前回はskeltonを採用したんですが、今回は違うものを使ってみようと思いまして、yahooのpure.cssを使ってみました。

さすがに閲覧のみの静的サイトにbootstrapみたいな重たいもの採用する気にはなれないし、S3は転送量で課金されるので軽いに越したことはない。人気も高そうだったので。

あ、遅れましたけど実際に作ったサイトが以下。

猫の休日

今時はスマホで見るのでレスポンシブ対応。まぁこれpure.cssのサンプルまんまなんですけどね(笑)自分で作ろうと思いつつ、まだcssの中身全部よみとけていないのでこれからゆっくり。。。

github

githubはこちら。

github.com

おわりに

ドメイン購入してAWSの設定、circleCIとの連携、pure.cssを使って静的コンテンツ登録まで土曜の夜と日曜の朝で計4hほどでできました。便利な世の中だー。これでドメイン年間700円、AWSの使用量月数百円って安すぎるよね。。。

余談

きになるお値段、もう1つ似たような仕組みでサイト運用しているのである月の課金を見てみましょう。

f:id:take_she12:20170416180544p:plain

数ヶ月遡ったけど0.7ドルか0.8ドルでした。route53が一番高いんですね。

とはいえroute53の課金は100万クエリを超えないと増えないので、まぁちょっとバンドの個人HPを作る程度なら心配する必要もないでしょう。

www.lancork.net