Webアプリのデプロイ環境を秒で構築！東京リージョンに対応したAWS Amplify Consoleを試そう！
いきなりですがみなさんはWebアプリをどのようにデプロイされていますか？どれくらいの時間がかかっていますか？先日ご紹介しました技術書典サークル全文検索サービスはAWS Amplify Consoleを利用してWebアプリを簡単にデプロイしております。
今回はWebアプリのデプロイ環境を早く且つ楽に構築できる、AWS Amplify Consoleを利用してデプロイからドメインとBasic認証の設定、ブランチ毎のデプロイまでをご紹介していきたいと思います。これはとても便利です！
AWS Amplify Consoleとは
AWS Amplify Console では、フルスタックのサーバーレスウェブアプリケーションをデプロイおよびホストするための、Git ベースのワークフローを提供します。
「Webアプリを簡単に公開できるサービス」なのですが、Webアプリをデプロイする時ってドメインとったりSSL証明書用意したりテスト段階は認証かけたりなど色々と面倒な部分が多くないでしょうか？AWSを扱っているとAmazon CloudFront / Amazon Route 53 / AWS Certificate Manager(通称ACM) などがあるためセットアップは容易にはなってきています。それでも私の場合、毎回操作方法をググる程度には面倒です。
それがなんとAWS Amplify Consoleではそれらもすべて一連の作業でできてしまいます。で、これがなんと4/5から東京リージョンに対応したので画面もみやすい！その便利さをReactアプリ開発を通して体感していきましょう！
環境構築
Reactの環境構築
デプロイ用のReactの環境を構築していきましょう。実行環境はMacです。
$ npm install -g create-react-app $ create-react-app amplify-test && cd amplify-test $ npm start
GitHubにプロジェクトを作成してプッシュ
私は以下の手順でプッシュしました。GitHubアカウントはすでに登録済みとして進めております。
- GitHubの画面上でプロジェクトを作成
- amplify-test階層で
git init - git remote add origin https://github.com/USERNAME/PROJECT.git
- git push -u origin master
これでcreate-react-appで作ったプロジェクトがGitHub上に表示されていれば準備は完了です。
AWS Amplify Consoleのセットアップ
まずはAWSのAWS Amplify Console画面を開いてみましょう。
アプリを作成
画面上にアプリの作成があるのでクリックしてください。
リポジトリサービスを追加
今回はGitHubでプロジェクトを作りましたのでGitHubを選択しますが皆さんが使用するホスティングを利用していいでしょう。 初回の場合GitHubとの認証画面が立ち上がります。
認証が完了すると以下の画面が表示されます。
リポジトリとブランチを選択
まずはリポジトリを選択します。今回作成したプロジェクトを選択してください。上記の通りに進めていくとmasterブランチしか存在しませんので、添付画像のような状態になります。
ビルド設定の構成
次にビルド設定の構成を設定できますが、今回は何も行いません。
保存してデプロイ
リポジトリ / ブランチ / フレームワークなどが問題ないか確認を行い、保存してデプロイします。
GitHubと連携するだけでデプロイまでしてくれるのがとても便利ですよね。
デプロイ中はこのような画面が表示されます。
検証まで問題なく進むとトップ画面のサムネイルが画面上に表示されています。今回はReactでページを作成したのでその初期画面が表示されていれば成功です。
アクセス先のURLがサムネイルの下に表示されています。ここまでで最初のデプロイは完了です。デプロイの最中に問題が発生すると下の画像のように赤くなります。
サブドメインと紐づける
続いてドメインの管理を選択します。
先程までのステップが完了していれば、デプロイしたURLが１つだけ表示されているはずです。
ここでドメインの追加を行います。
私の場合はすでにomuriceman.comというドメインをRoute53で取得している状態で進めております。
ドメインの検索をクリックするとサブドメインの設定が表示されます。
設定が完了したら保存をクリックします。管理画面上には先程取得したサブドメイン付きのURLが作成されています。
そしてなんとこのタイミングでAmazon Certificate ManagerでSSL証明書を作成しているようですね！ ドメインは取得しているものを今回つかいましたが、全てAWS Amplify Console上で管理ができてしまう楽さが素晴らしいですね。
Basic認証をかける
作成したWebアプリは関係者だけに見て欲しい場合などにはBasic認証をかけるケースがありますが、AWS Amplify Consoleにも存在します。
早速Basic認証をかけてみましょう。アクセスコントロールを選択してください。
ここでアクセスの管理をクリックします。制限をかける場合は、
- Access settingを
制限 - パスワードが必要ですに切り替え - usernameをpasswordを入力します。
で設定が完了です。
見事に制限がかかりました！
別ブランチの作成
次に別のブランチを作成してAWS Amplify Consoleよりデプロイしてみましょう。 別のブランチを作成する方法はGitの説明になってしまうので今回は省きますが、リモートリポジトリ上にtestというブランチを作成した状態にしておけば大丈夫です。
私はPDCAではなくOODAを回す修正を加えてみました。
さてこれをデプロイしていきます。まずはトップ画面よりブランチの接続をクリックします。
上記のようにセレクトボックス上に新たに作成したブランチが表示されているはずです。問題がなければ次へ進み保存してデプロイをおこないます。
このタイミングでブログのように進めていくと二つのブランチが存在します。
- master
- test
画面は下のように表示されています。
AWS Amplify Consoleのさらにここがすごい！
検証
まずは見てみてください！
メール通知
Amazon Simple Notification Serviceを使用して、デプロイイベントの通知を受け取れるようになります。
過去のコミットに遡ってデプロイできる
これもかなり便利なので画像でご紹介します。
最後に
デプロイ周りで面倒な作業を一括して請け負ってくれるAWS Amplify Console。触っていてかなり楽しいですよ！まだ試していない人は是非チャレンジしてみてください！
少し相性の悪いライブラリーなどもあったりして、こちらは解消法が見つかったら共有にむけてブログを投稿したいと思っています。
また今回作ったOODAを回すサンプルはマスターにマージしました。
https://amplity-test.omuriceman.com/
回してみたい方はどうぞご自由に。 作成したWebアプリはこちらにアップしております。
GitHub - wataruiijima/amplify-test: Amplify Console Test
