omuriceman's blog

iOS / AWS / Firebase / Deep Learning を中心とした技術を発信します

Webアプリのデプロイ環境を秒で構築!東京リージョンに対応したAWS Amplify Consoleを試そう!

いきなりですがみなさんはWebアプリをどのようにデプロイされていますか?どれくらいの時間がかかっていますか?先日ご紹介しました技術書典サークル全文検索サービスはAWS Amplify Consoleを利用してWebアプリを簡単にデプロイしております。

omuriceman.hatenablog.com

今回はWebアプリのデプロイ環境を早く且つ楽に構築できる、AWS Amplify Consoleを利用してデプロイからドメインBasic認証の設定、ブランチ毎のデプロイまでをご紹介していきたいと思います。これはとても便利です!

AWS Amplify Consoleとは

aws.amazon.com

AWS Amplify Console では、フルスタックのサーバーレスウェブアプリケーションをデプロイおよびホストするための、Git ベースのワークフローを提供します。

「Webアプリを簡単に公開できるサービス」なのですが、Webアプリをデプロイする時ってドメインとったりSSL証明書用意したりテスト段階は認証かけたりなど色々と面倒な部分が多くないでしょうか?AWSを扱っているとAmazon CloudFront / Amazon Route 53 / AWS Certificate Manager(通称ACM) などがあるためセットアップは容易にはなってきています。それでも私の場合、毎回操作方法をググる程度には面倒です。
それがなんとAWS Amplify Consoleではそれらもすべて一連の作業でできてしまいます。で、これがなんと4/5から東京リージョンに対応したので画面もみやすい!その便利さをReactアプリ開発を通して体感していきましょう!

aws.amazon.com

環境構築

Reactの環境構築

デプロイ用のReactの環境を構築していきましょう。実行環境はMacです。

$ npm install -g create-react-app
$ create-react-app amplify-test && cd amplify-test
$ npm start

f:id:omuriceman:20190403135542p:plain
React初期画面
今回はこの画面のままデプロイまでしてみたいと思います。

GitHubにプロジェクトを作成してプッシュ

私は以下の手順でプッシュしました。GitHubアカウントはすでに登録済みとして進めております。

これでcreate-react-appで作ったプロジェクトがGitHub上に表示されていれば準備は完了です。

AWS Amplify Consoleのセットアップ

まずはAWSAWS Amplify Console画面を開いてみましょう。 f:id:omuriceman:20190427144455p:plain

アプリを作成

画面上にアプリの作成があるのでクリックしてください。

f:id:omuriceman:20190427144945p:plain
アプリの作成

リポジトリサービスを追加

f:id:omuriceman:20190427145414p:plain
リポジトリサービスの作成
4つのGitホスティングサービスからプロジェクトを連携することができます。

今回はGitHubでプロジェクトを作りましたのでGitHubを選択しますが皆さんが使用するホスティングを利用していいでしょう。 初回の場合GitHubとの認証画面が立ち上がります。

f:id:omuriceman:20190427150319p:plain
GitHub連携画面

認証が完了すると以下の画面が表示されます。

f:id:omuriceman:20190427150445p:plain
認証完了

リポジトリとブランチを選択

まずはリポジトリを選択します。今回作成したプロジェクトを選択してください。上記の通りに進めていくとmasterブランチしか存在しませんので、添付画像のような状態になります。

f:id:omuriceman:20190427151132p:plain

ビルド設定の構成

f:id:omuriceman:20190427151901p:plain
ビルド構成の設定

次にビルド設定の構成を設定できますが、今回は何も行いません。

保存してデプロイ

f:id:omuriceman:20190427153013p:plain リポジトリ / ブランチ / フレームワークなどが問題ないか確認を行い、保存してデプロイします。 GitHubと連携するだけでデプロイまでしてくれるのがとても便利ですよね。

デプロイ中はこのような画面が表示されます。 f:id:omuriceman:20190427153829p:plain

検証まで問題なく進むとトップ画面のサムネイルが画面上に表示されています。今回はReactでページを作成したのでその初期画面が表示されていれば成功です。 f:id:omuriceman:20190428010840p:plain

アクセス先のURLがサムネイルの下に表示されています。ここまでで最初のデプロイは完了です。デプロイの最中に問題が発生すると下の画像のように赤くなります。

f:id:omuriceman:20190428012018p:plain
デプロイ失敗

サブドメインと紐づける

続いてドメインの管理を選択します。

f:id:omuriceman:20190427154559p:plain
ドメイン管理

先程までのステップが完了していれば、デプロイしたURLが1つだけ表示されているはずです。 ここでドメインの追加を行います。

私の場合はすでにomuriceman.comというドメインをRoute53で取得している状態で進めております。 ドメインの検索をクリックするとサブドメインの設定が表示されます。

f:id:omuriceman:20190427154943p:plain
サブドメインの設定

  • ルートドメインを含めたくない場合は Exclude rootを選択してください
  • wwwを自分の好きなサブドメインにしてください。私はamplify-testとしました

設定が完了したら保存をクリックします。管理画面上には先程取得したサブドメイン付きのURLが作成されています。

f:id:omuriceman:20190427160158p:plain

そしてなんとこのタイミングでAmazon Certificate ManagerでSSL証明書を作成しているようですね! ドメインは取得しているものを今回つかいましたが、全てAWS Amplify Console上で管理ができてしまう楽さが素晴らしいですね。

Basic認証をかける

作成したWebアプリは関係者だけに見て欲しい場合などにはBasic認証をかけるケースがありますが、AWS Amplify Consoleにも存在します。 早速Basic認証をかけてみましょう。アクセスコントロールを選択してください。

f:id:omuriceman:20190427162548p:plain
アクセスコントロール初期画面

ここでアクセスの管理をクリックします。制限をかける場合は、

  1. Access settingを制限 - パスワードが必要ですに切り替え
  2. usernameをpasswordを入力します。

で設定が完了です。 

f:id:omuriceman:20190427163202p:plain
Basic認証

見事に制限がかかりました!

別ブランチの作成

次に別のブランチを作成してAWS Amplify Consoleよりデプロイしてみましょう。 別のブランチを作成する方法はGitの説明になってしまうので今回は省きますが、リモートリポジトリ上にtestというブランチを作成した状態にしておけば大丈夫です。

私はPDCAではなくOODAを回す修正を加えてみました。

f:id:omuriceman:20190428002010g:plain
OODAを回す
しょうもないページに小1時間も費やしてしまった。。。

さてこれをデプロイしていきます。まずはトップ画面よりブランチの接続をクリックします。

f:id:omuriceman:20190427200154p:plain

上記のようにセレクトボックス上に新たに作成したブランチが表示されているはずです。問題がなければ次へ進み保存してデプロイをおこないます。

このタイミングでブログのように進めていくと二つのブランチが存在します。

  • master
  • test

画面は下のように表示されています。 f:id:omuriceman:20190428012303p:plain

AWS Amplify Consoleのさらにここがすごい!

検証

まずは見てみてください!

f:id:omuriceman:20190428012624p:plain
複数デバイスによるキャプチャ
デプロイの最中に複数のデバイスサイズでキャプチャをしてくれます。見た目の確認にうってつけですね。

メール通知

Amazon Simple Notification Serviceを使用して、デプロイイベントの通知を受け取れるようになります。

f:id:omuriceman:20190428013002p:plain
メール通知
ブランチごとに送付できる人を分けられるのがいいですね。

過去のコミットに遡ってデプロイできる

これもかなり便利なので画像でご紹介します。

f:id:omuriceman:20190428020120p:plain
バージョン切替
間違えたデプロイや不具合などの時に画面上ですぐに戻せるのが便利ですね。

最後に

デプロイ周りで面倒な作業を一括して請け負ってくれるAWS Amplify Console。触っていてかなり楽しいですよ!まだ試していない人は是非チャレンジしてみてください! 少し相性の悪いライブラリーなどもあったりして、こちらは解消法が見つかったら共有にむけてブログを投稿したいと思っています。
また今回作ったOODAを回すサンプルはマスターにマージしました。

https://amplity-test.omuriceman.com/

回してみたい方はどうぞご自由に。 作成したWebアプリはこちらにアップしております。

GitHub - wataruiijima/amplify-test: Amplify Console Test

追記

omuriceman.hatenablog.com