新サービス「AWS Amplify Console」登場！簡単3ステップでWebアプリのCI/CD環境を構築！ #reinvent
突如として我々の目の前にAWS Amplify Consoleが登場！
re:Invent 2018の初夜、早速AWSの各サービスのアップデートが届きました。
モバイル・Webアプリ関連では AWS Amplify Console なるものが登場！
早速触ってみました。
AWS Amplify Consoleとは？
AWS Amplify Consoleは簡単に言うと Webアプリを公開する環境を超簡単にセットアップできるサービス です。
Management Console上から、AWSを利用したWebアプリを作る上では欠かせないライブラリ「AWS Amplify」を組み込んだWebアプリを、構築、ビルド、リリースできます。
サーバーレスをバックエンドにしたスケーラブルな静的Webアプリをホスティング
- グローバル対応
- 簡単なドメインセットアップ
- シンプルなCI/CDワークフローの構築
- ブランチごとのデプロイ
- アトミックなデプロイ
- パスワードによるプロテクション
使い方
簡単3ステップです！
- リポジトリを用意（GitHub / Bit Bucket / GitLab / AWS CodeCommit）
- ビルド設定
- デプロイ
ユースケース
- ブログや静的Webサイト
- サーバーレスWebアプリ（GraphQLまたはREST APIのWebクライアント）
- PWA（Progressive Web App）
いつから使えるの？
今日から早速利用できます！
早速簡単3ステップを体験！
早速使ってみましょう。
1. リポジトリを用意する
まずはじめにAmplifyで作られたWebアプリのリポジトリを用意します。
2. ビルド設定
AWS Management Consoleにログイン後、以下にアクセス。
と、紹介が表示されますがここから新規作成ができないので以下にアクセス。
リポジトリをとりあえずGitHubを選択します。
GitHubの承認画面が表示されますので、承認します。なおAmplify ConsoleからはRead Only権限しか要求されません。
ビルド設定はYAMLで書くようです。CircleCIやCodePipelineのワークフロー設定に非常に近しいですね。環境変数も設定できるようです。
設定内容を確認し「Save and Deploy」をクリックします。
完成！ですがまだ何もファイルを置いていないのでアクセスできません。
3. デプロイ
とりあえず簡単なWebページを見繕ってデプロイしましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample Amplify App</title> </head> <body> <h1>Welcome to re:Invent 2018!</h1> <p>Enjoy yourself!</p> </body>
master ブランチにデプロイすると、先ほどのAmplify Consoleが動きます。
デプロイが終わると、Webページがプレビューとしてレンダリングされます。分かりやすい！
Webサイト・Webアプリをお手軽にCI/CDできる！
筆者の感想としては CircleCIやTravis CI、CodePipelineなどに手を付ける暇が全然取れぬ…！ と言う方にうってつけのサービスだと思いました！GitHubなどのリポジトリのアクセス権だけ渡してしまえば、あとは Amplify Consoleがいい感じにCI/CD環境を構築してくれます。
また、ブランチごとのデプロイ切り分けも非常に有難い。これを素のCloudFrontやS3で用意しようと思うと大変ですもんね。GitHubフローが簡単に実現できそうです！
LPサイトなどから始まりサーバーレスバックエンドを使ったWebアプリまで、幅広く活用できます。ぜひ使っていきましょう！
![[レポート] インシデント発生に備えるための議論をする tabletop「Incident response tabletop: Supply chain」 #GHJ205-R #AWSreInvent](https://images.ctfassets.net/ct0aopd36mqt/3IQLlbdUkRvu7Q2LupRW2o/edff8982184ea7cc2d5efa2ddd2915f5/reinvent-2024-sessionreport-jp.jpg)
![[レポート]re:Invent 2024のEXPO会場で救急セットを作ったりして #GiveBack しよう #AWSreInvent #ACT126](https://devio2024-media.developers.io/image/upload/v1733389602/user-gen-eyecatch/myjtprkzjjcwvxmf8enu.png)
