はじめに
AWS Amplify ホスティングをお勧めするというのは、AWS公式からアナウンスされています
AWSコンソール上でも書かれています
つまりAWS Amplify ホスティングを使うのが良いのは間違いなさそうです。
でも、意外とS3の静的サイトホスティングで引っかかる記事がなさそうなので、簡単に紹介します
この記事はこんな方にお勧め
- S3を使うと簡単に静的サイトホスティングできるって聞いたけど、どうやればいいかわからない
- ネット調べてもいろんな記事がでてきて困る
- それっぽい記事を開いたら5、6年前の記事で全然参考にならない
おすすめしない方
- とりあえず静的サイトホスティングではなく、細かく制御したい方
- Amplifyはある程度のところまではオールインワンでやってくれますが、細かいところはできない OR できるけど面倒です
- CloudFromtやS3をしっかり触ってみたい方
料金
とりあえずやりたいニーズなら、ほぼAWS 無料利用枠で収まるでしょう
実際にやってみる
では早速作ってみましょう。
前提として、すでに以下の対応はされているものとします
- 静的サイトホスティングをしたいページ自体はすでに存在している
- githubでリポジトリ管理がされている
- 自分がオーナーであるリポジトリである必要があります
今回は、最近訳あってudonariumの個人鯖を作ることがあったので、そのケースで紹介します。事前にリポジトリのforkをしています。
AWSコンソールへログイン ➡ AWS Amplifyにアクセスする
検索欄から調べるのがおすすめ
↓のような画面がでるので、「アプリケーションをデプロイ」をクリック
次の画面で、githubを選択して「次へ」をクリック
githubへのログインを求められるので対応する。その後「次へ」をクリック
githubからデプロイするリポジトリを選択する画面になりますが、事前にAWS Amlify appをgithub側にインストールしておく必要があります。
ポップアップウィンドウでインストールを促されるので、自分のアカウントを選択してください
AWS Amlify appに付与する権限と、リポジトリを選択します。付与すると困るリポジトリがある場合はOnly select repositoryを選択しましょう。
今回はAll repositoryを選択して、「Intall & Authorize」をクリックします
するとAmlifyコンソール上でリポジトリとブランチが選択できるようになるので、デプロイしたいものを選択して「次へ」をクリックしてください
アプリケーション名・ビルドの設定を入力します。これらの情報はリポジトリから自動で決めてくれますので、確認をして必要に応じて変更してください。
今回は記載されているビルドコマンドと出力ディレクトリであっているのでそのまま進めます。
ここでパスワードも設定が可能です。設定をしておくことをお勧めします
詳細設定を開くと、以下の内容を設定できます。
- ビルドするイメージ
- 環境変数
- Cookieの設定
- ライブパッケージの更新
- サーバーサイドレンダリング (SSR) のデプロイ
最後に確認画面が出るので、「保存してデプロイ」をクリックしてください
デプロイ処理が始まりますので青色の「デプロイ」が「デプロイ済み」になるまで待ちましょう
デプロイ済みになったら、構築されたサイトにアクセスしてみましょう。右上の「デプロイされたURLにアクセス」をクリックしてください
今回はパスワードを設定しているため、アクセス時に入力を要求されます。
パスワード認証が完了後、デプロイされたページが表示されます。
https://udonarium.app/ と同じページが表示されていますね
これでデプロイは完了です。めっちゃ簡単です。
このあとさらに本番利用に向けて進める場合は、Amlifyコンソール画面での、「本番環境に移行」の指示に書かれているように、カスタムドメインの追加、ファイアウォール保護の有効化、開発ブランチのデプロイなどを設定していくとよいでしょう
AWS Amplify ホスティングを使うメリット
この説明だけでも、AWS Amplifyの良さは感じてもらえると思いますが、それ以外のメリットもまとめると
- リポジトリを修正したら自動でデプロイしてくれる
- CI/CD も自動でやってくれます
- ブランチごとにデプロイしてくれる
- pushした時点でデプロイしてくれるのでトピックブランチでの動作確認も簡単
- パスワード認証を簡単に設定できる
- ベーシック認証ですが、とりあえずならそれで充分なことも多い
- 環境変数や、シークレットも設定できる
- ファイアウォール機能で、アクセス保護・IP制御・リージョン制御が可能
- AWS WAFとの統合機能であり、最低料金15$ + WAFの料金がかかるため利用には注意
- 上記がシンプルなUIで簡単に設定できる
特に最近のアップデートでファイアーウォール機能がリリースされたことにより、本番環境としての運用までAmlifyのみで実施することが可能になってきたと思います。
詳しくはこちらの記事を参考にしてください。既存WAFとの関連付けも可能のようです
そのほか機能紹介
ビルドの処理はamplify.ymlを編集することで変更可能です
アクセスコントロール管理でパスワード設定が可能です。ブランチごとにユーザー・パスワードを分けることが可能です
IAMロールも設定可能です。これによって、サイト上でAWSリソースへのアクセスも可能＋適切な権限管理が可能です
まとめ
今回は、初めて触る人向けに、デプロイ方法を記載してみました。
S3の静的サイトホスティングの時にAWS Amplifyを使うのが良いらしいが、いざ使おうとすると記事が少なくて不安だった方なども、この記事を通して一度触ってみてはいかがでしょうか。
あらかじめ知っていた方や、すでにS3+CloudFrontで静的サイトホスティングしている方も、昔よりもかなり機能も充実してきたので、改めて触ってみて必要に応じて採用してみてもよいのではないでしょうか。