【AWS】Amplifyで静的ウェブサイトをホスティング

前提・やりたいこと

PHPやDBを使わない、HTML(とCSS,JS)ファイルだけの静的サイトを安価に公開したい。

S3にHTMLファイルを配置して公開する方法もありますが、Amplifyを使うとGitHubにpushするだけで自動で反映されるのが楽そうなので試してみました。

結論から言うとGitHubにpushするだけで公開が完了してしまうのはめちゃくちゃ楽だし、設定もS3+CloudFront+Route53でやるより断然楽でした。料金的にはどっちがいいんだろう？大きく違わないならAmplifyがいいな……。

GitHubに登録したらリポジトリを作成し、適当なindex.htmlファイルを配置します。

GitHubのリポジトリとAmplifyを関連付け、ドメインの設定をします。ドメインの設定はしなくてもホスティング自体は可能。https://xxxxxxxxxxxxxxxxxx.amplifyapp.com みたいな長いURLになるけど。

AWSにログインし、AWS Amplify から「GET STARTED」を選択

Deliver の Get started を選択

GitHubを選択

GItHubへの接続を許可

認証が成功したら次へ

アプリ名を入れて次へ

確認して「保存してデプロイ」

作成されたアプリを選択し、「ドメイン管理」を開くとURLが作成されているのでアクセスしてみる。

アクセスできたのでひとまずOK。URLは長いがちゃんと公開されている。

「ドメイン管理」→「カスタムドメインの追加」で追加する。

サブドメインのみを割り当てたいので、ルートは「Exclude」してグレーアウトさせ、サブドメインを入力する。

しばらく待つ

しばらく待ってステータスが「Available」になったらRoute53にレコードが追加され、アクセス可能になる。

Route53にレコードが追加されていることを確認する。

URLを叩いてアクセスできればOK。

index.htmlを書き換えてからGitHubにpushしてみる

しばらく待ってからアクセスして変更が反映されていることを確認

Posted by ケイ