読者です 読者をやめる 読者になる 読者になる

ツナワタリマイライフ

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

レガシーな静的Webサイトを一新!その② 独自ドメインを使ってAWS S3に静的Webサイト公開

Programming

はじめに

前回はHPをリニューアルするということでgithubに登録して軽量フレームワークskeltonをいれて移植作業をしました。

take-she12.hatenablog.com

今回はいよいよ本番環境へデプロイです。

今まではfc2を使っていましたが、独自ドメインをとって移転します。

toketenakunaru.web.fc2.com

公式ドキュメント

しっかりありますね。

docs.aws.amazon.com

バケット作成

はるか昔にアカウントは作っていてとっくに試用枠は切れています。S3のページに行って、バケットの作成です。

f:id:take_she12:20161204172645p:plain:w500

リージョンを選ばされるんですがどこが1番安いんですかねぇ。

f:id:take_she12:20161204172820p:plain

マニュアルが充実していて助かる。レイテンシがコストに関係するといっているのでtokyoを選んでみましょう。

docs.aws.amazon.com

ログファイル生成するか選べるらしい。当然欲しいけど、追加でお金がかかるということで、必要になったらいれるようにします。今回はなしで。

ホスティング設定を有効にする

f:id:take_she12:20161204173755p:plain:w500

ファイルアップロード

まずはindex.htmlだけ。

f:id:take_she12:20161204173809p:plain:w500

公開

よくわからないまま、index.htmlを公開する、を選んで、プロパティをみるとエンドポイントが。アクセスしたら見れました。あっけなさすぎるよ。。。

とけてなくなる

とりあえず他のファイルも全部アップロードしてしまいます。

公開する、でアクセス許可がされるような感じでしょうかね。他のファイルも公開したら見事に見れました。あっけない。。。

独自ドメインの取得

なんだかんだではじめてです。toketenakunaru.*というドメインを取得します。

amazonアカウントでログインできたのでGMPペパボのムームードメインで取得しました。なおネームサーバは「今は使用しない」で。

ドメイン取得は 【ムームードメイン】最安値99円!

ぱんぱかかーん感

f:id:take_she12:20161204181246p:plain

年間600円って安すぎですね。

Route 53

かっこいいよな名前。名前重要。

取得したドメイン名をDNSに登録できる。

バケットはtoketenakunaru.com(取得ドメインと一致)じゃないとダメです。作り直しました。Route52登録時には選択肢から選べます。

f:id:take_she12:20161204184213p:plain:w500

ここであらためてムームードメインの管理画面でRoute53登録時に表示されているネームサーバを登録します。

f:id:take_she12:20161204185453p:plain:w500

1分そこらでアクセスできました。すごない?

f:id:take_she12:20161204185715p:plain:w500

おわりに

Route 53とDNSに動きは復習かねて整理したほうがいいと思いますが、静的webサイトをS3を使って公開するのはとても簡単でした。Amazonすごいよ。。。

次回はCircleCIを使って、githubのmasterへのpushをトリガーに本番環境が更新される仕組みを作っていきます!