お名前.comでドメインを取りS3でホスティングしCloudFrontでキャッシュしたWebサービスを作った話
昨今はフロントエンジニアというだけでは食えなくなっており、僕もはたはた困っております。
LAMPでWEBサービス作れれば食えた時代は結構昔に終わっており、最近は誰でもAWSを知っていないと話にならない。
ということで、AWSでサービスを作ってみたかったのですが、なかなかテーマがない。大掛かりなものだと短期間でできないし、できないとなるとこのブログみたいに1年に1回更新するかどうか、みたいな話になってしまいます。
そこで、一番手軽なのはAWS S3の静的サイトホスティングだと決め、まず1ページだけUPしよう、と考えました。
何を作るか?→考え中
なぜ作るか?→AWSを触りたいから(会社でAWSバリバリな人たちの用語に最低限ついていけるようにしたい)
よっしゃ、理由は揃った。あとはやるだけだ。
ということで、10月の連休にさっくり作りました。
いったんページが完成したら、お名前.comにアクセスしてからサイト公開するまでが約3時間。
その間、ドメインを取ったのはいいけどWhois設定代行をするのを忘れて個人情報だだ漏れになっちゃったのでドメインを取り直したりしました。(Whois申請すると980円かかる、対して新規にとればWhois代行0円だし comドメインは600円くらいだし)
AWSに初のアカウントを作ったり、ググりながらS3のバケットをこしらえてRoute53でドメインを設定してS3にアップしたものを CloudFrontにキャッシュしたりしました。
- お名前.comでドメインを検討(20分)
- ドメインにアクセスするとお名前.comで管理されています画面が出る。もちろんサーバはお名前では買わない。
- AWSでアカウント発行(10分) ※携帯認証で自動電話がかかってくるのにドキドキ…
- S3で早速バケットをドメイン名に合わせて作ってみる
- S3にフォルダを作って静的ファイルを置いてみる
- Route53でNSレコードを新ドメインにて作成
- なんかIPが4つくらい出るので、それをコピー
- お名前.comの管理画面でドメインの管理をそのIPにしる
- アクセスしたらサーバが見つかりません画面になった。お名前の呪縛から解き放たれたらしいが、居場所がない模様。
- CloudFrontでS3のバケットをキャッシュするようにしたら(プルダウンを選んだだけ)URLが発行されたので、そこにアクセスしてみると、S3に置いたものが表示された。
- HTMLで読み込んでいるCSS,JS,画像のパスをCloudFront側を向けるように修正。
- もういい、寝る。
- ふと夜中にアクセスしたら、つながった!!俺の作った画面が出た!歓喜。
- ドメインがつながったので、GAのプロパティを発行してindex.htmlに埋める。
- ついでにアドセンス広告も埋めちゃえ。
そうしてできたのがこちら。
技術的な部分は追って別エントリを書きます。画面はvue.jsを使いました。
また、集客を狙った部分も別エントリを書きます。Naverまとめとはてブを使いました。
なんと、1つWEBサービスを作れればいくつもエントリが書ける!!新しい!
S3とCDNで配信している静的サービスなので、ひゃくおくまんアクセスあっても余裕で捌けます。しかもコストはほとんどかからない。
これは「勝った」と思いました。これで広告がクリックされれば完全勝利。サーバ代もまかなえる自家発電ができるというわけですね。
早速アクセス解析を見てみましょう。
セッション6!!うち5はスパムだコレーーーーー!!
続きます。