AWS Amplify で ホスティングしよう ゆるWeb勉強会 札幌 / OnLine #18 2022/04/25 木原卓也 / @tacck ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 1

私 • 名前 • 木原 卓也 / @tacck • 所属 • 生活協同組合コープさっぽろ デジタル推進本部 システム部 • 主催コミュニティ • ゆるWeb勉強会@札幌 • スマートスピーカーで遊ぼう会@札幌 (休眠中) • 参加コミュニティ • Amplify Japan User Group 運営 • AWS Community Builders Program (Q2 2021) • 好きなフィギュアスケートの技 • スプレッド・イーグル ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 2

お品書き • Webの仕組みとホスティグ • AWS Amplify とは • Amplify Hosting • まとめ ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 3

Webの仕組み(簡易版) ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 4 フロントエンドサーバ バックエンドサーバ API ブラウザー Webサイト Webシステム HTML CSS JavaScript Images HTML CSS JavaScript Images フロントエンドサーバ HTML CSS JavaScript Images ブラウザー HTML CSS JavaScript Images

Webの仕組み(簡易版) ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 5 フロントエンドサーバ ブラウザー Webサイト Webシステム HTML CSS JavaScript Images HTML CSS JavaScript Images フロントエンドサーバ HTML CSS JavaScript Images ブラウザー HTML CSS JavaScript Images ここは共通 バックエンドサーバ API

ホスティング • フロントエンドサーバにコンテンツを配置し、 ブラウザから利用できるようにすること。 ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 6

ホスティング ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 7 フロントエンドサーバ ブラウザー Webサイト Webシステム HTML CSS JavaScript Images HTML CSS JavaScript Images フロントエンドサーバ HTML CSS JavaScript Images ブラウザー HTML CSS JavaScript Images コンテンツを配置。 ブラウザからアクセス 可能。 バックエンドサーバ API

ホスティングサービス (無料枠中心) ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 8 Netlify Vercel Cloudflare Pages Firebase AWS Amplify 特徴 (個人の感想) 現代ホスティング サービスの草分け。 総合的に使いやすい。 Next.js の開発元。 Next.js の SSR 対 応に力を発揮。 世界的CDNサービス ベンダーの提供する サービス。 Webシステム構築可 能な総合力。 GCPと連携可能。 Webシステム構築可 能な総合力。 AWSと連携可能。 サイト数 無制限 50 無制限 5〜10 (制限緩和可) 25 (制限緩和可) ダウンロード制限 100 GB / 月 100 GB / 月 無制限 360 MB / 日 15 GB / 月 ビルド時間制限 300 分 / 月 6000 分 / 月 無制限 ? 1000 分 / 月 GitHub連携 あり あり あり あり あり プレビュー対応 あり あり あり あり あり アクセス制限 プレビューは可能 (本番は有料プラン) プレビューは可能 (本番は有料プラン) プレビューは可能 (本番も設定可能?) なし Basic認証 (本番も設定可能) その他 CDNは日本リージョ ン未対応。 無料枠では商用利用 不可。(広告もNG) ダウンロード制限は 月換算で 10.5 GB 程度。 ダウンロード制限、 ビルド時間制限は、 12ヶ月のAWS無料 利用枠内のもの。

ホスティングサービスの選択 ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 9 Webサイト HTML/CSS中心 SPA中心 Netlify Vercel Cloudfrare Pages フロントエンド/バックエンド 統合して開発 Firebase AWS Amplify AWS Amplify Firebase AWSでやりたい 環境にこだわらない Firebaseでやりたい 動的要件増加

AWS Amplify ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 10

AWS Amplify って何? • Webフロントエンド/モバイルアプリ開発を中心に、 フルスタックのアプリ・システム構築を素早く簡単にできるようにする、 AWS のサービスとツールの総称。 • 特に、 Cognito / AppSync / DynamoDB などの マネージドサービスの利用を簡単に行うことができ、 いわゆる「サーバレス」なフルスタックシステムを構築しやすい。 • また、Webサイトのホスティング機能も用意されており、 個別の S3 / CloudFront 設定無しにサイト公開を行うことが可能。 ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 11

AWS Amplify の大まかな分類 ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 12 AWSサービスとしての Amplify OSSツールとしての Amplify Amplify Console Amplify Hosting Amplify Studio Amplify CLI Amplify Library Amplify UI Components

Amplify Hosting ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 13

Amplify Hosting • 名前通り、ホスティング機能を提供 • ホスティング方法は2つ • S3 / CloudFront • Amplify 独自の管理機能 • S3 / CloudFront の場合は、コマンドでのアップロード。 その代わり、 CloudFront を操作できるので、 WAF 対応などができるようになる。 • 従来のやり方に慣れている、要件的に必要ならこちら。 ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 14

Amplify Hosting • 独自管理機能の場合 • GitHub などと連携して CI/CD 対応。 (特別な設定不要) • GitHub などの PR に対応して、プレビューサイトを構築可能。 • ビルド時の環境変数を設定可能。 • 独自ドメイン設定可能。 •Basic認証設定可能。 ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 15

まとめ ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 16

まとめ • 将来的にバックエンド機能(認証・データベースなど)を 使っていくなら、 AWS Amplify を触っておくことをお勧め。 • GraphQL に興味あるなら、 AWS Amplify からの スタートをお勧め。 • 低価格で Basic認証 を標準で使えるので、 サイトの検証や顧客へのサンプル提示もやりやすい。 ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 17

終 ゆるWeb勉強会@札幌 OnLine #18 / #ゆるWeb札幌 18