【AWSサービス 基礎編】AWS Amplify Hosting で Web サイトをホスティングする

概要

作った Web サイトを公開しようとすると、ファイルの置き場所、世界中へ速く届けるための配信網（CDN）、HTTPS の証明書、更新のたびのアップロード作業など、考えることがいくつも出てきます。AWS でこれらを自分で組むなら Amazon S3 と Amazon CloudFront を組み合わせるのが定番ですが、まず「手軽に公開してみたい」という場面では、もっと簡単な選択肢があります。それが AWS Amplify です。

AWS Amplify は、Web アプリやモバイルアプリをすばやく作って公開するためのサービス群で、その中の Amplify Hosting を使うと、ファイルを渡すだけで CloudFront ベースの CDN に Web サイトがデプロイされ、HTTPS の URL が発行されます。CLF では「アプリを手軽に構築・公開するサービス」として名前と役割が問われ、SAA では S3 + CloudFront で自前ホスティングする構成との使い分けや、GraphQL API を提供する AWS AppSync との関係が出てきます。

本記事では、Amplify の全体像（Hosting・バックエンド構築・ライブラリ）、静的サイトと SSR の違い、Git 連携デプロイと手動デプロイ、ブランチデプロイ・プレビュー・カスタムドメインの役割、S3 + CloudFront との違い、AppSync の位置づけを解説したうえで、GitHub などの外部サービスを使わない「Git なしでデプロイ（手動デプロイ）」で小さな HTML を公開し、修正して再デプロイし、デプロイの履歴を確認するまでを体験します。

クラウドおさる

猿山の掲示板に貼り紙を出すときは、紙を渡すだけで係の猿が全部の木に貼ってくれるのでござる。Amplify Hosting もファイルを渡すだけで公開まで面倒を見てくれるのか、弊猿、確かめてみるでござる！

この記事のメリット

• AWS Amplify の全体像（Amplify Hosting・バックエンド構築・ライブラリ）を説明できる
• 静的サイトと SSR（サーバーサイドレンダリング）の違いと、Amplify Hosting での扱いを理解できる
• Git 連携デプロイと手動デプロイの違い、ブランチデプロイ・プレビュー・カスタムドメインの役割を把握できる
• S3 + CloudFront で自前ホスティングする場合と Amplify Hosting の違いを判断できる
• AWS AppSync（GraphQL API）がどこに位置づくサービスかを把握できる
• zip ファイルのアップロードだけで Web サイトを公開し、更新・デプロイ履歴の確認までを一通り体験できる

執筆者とキャラクター紹介

執筆者：土肥（とひ）

株式会社ジェニュインの代表であり元エンジニア。これまでオンプレミスと AWS 環境のインフラ業務を担当。AWS 認定資格の学習で得た知識を、ハンズオンとともに解説するのが得意。直近では新人の教育も行っており、これから技術を学ぶ方が納得できる解説を心がけています。基礎編・Cloud Practitioner の記事では、解説役としても登場します。

クラウドおさる

クラウドおさる

はじめましてでござる。弊猿はクラウドおさる。IT インフラが異常に発達した猿山から、雲に乗って地上の AWS を学びに降りてきたのでござる。

クラウドおさる

基礎編や Cloud Practitioner の記事では、とひさんに素朴な疑問をぶつける役でござるな。Security - Specialty などの記事では、要所でワンポイントや注意点をひとこと添えるでござる。

クラウドおさる

猿山にもデータセンターや監視当番があって、地上で起きることはだいたい猿山にも同じ仕組みがあるのでござる。例え話がつい猿山に寄るのは、弊猿の癖でござる。

技術解説

AWS Amplify とは（全体像）

クラウドおさる

とひさん、AWS Amplify とはどんなサービスでござるか？ 名前は聞くのでござるが、何をするものかがつかめぬでござる。

土肥

Amplify は、Web アプリやモバイルアプリを作って公開するまでを楽にしてくれるサービスとツールのまとまりなんだ。AWS の概要の資料では「フロントエンドのウェブおよびモバイルサービス」に分類されていて、バックエンドの用意から、フロントエンドとバックエンドのリリースの自動化までをカバーしているよ。

クラウドおさる

まとまり、ということは中身がいくつかあるのでござるな？

土肥

そうそう。大きく分けると 3 つだと考えるとわかりやすいかな。

クラウドおさる

なるほど、猿山でいえば、木の実を集める係（バックエンド）、それを使いやすく渡す道具（ライブラリ）、できたものを猿山じゅうに配る係（Hosting）がひとまとめになっているのでござるな！

土肥

うまい例えだね！ 3 つは組み合わせて使うこともできるし、Hosting だけを単独で使うこともできるんだ。今回は Hosting だけを使って、HTML を公開してみるよ。

静的サイトと SSR

クラウドおさる

Hosting で公開できる Web サイトには、種類があるのでござるか？

土肥

あるよ。まず「静的サイト」は、HTML・CSS・JavaScript・画像みたいに、あらかじめ出来上がったファイルをそのまま配る Web サイトのこと。React や Vue.js で作ったシングルページアプリケーション（SPA）や、Hugo・Jekyll みたいな静的サイトジェネレーターで作ったサイトもこの仲間だね。

クラウドおさる

では SSR とは何でござる？

土肥

SSR（サーバーサイドレンダリング）は、アクセスが来るたびにサーバー側でページの HTML を組み立てて返す方式なんだ。Next.js や Nuxt みたいなフレームワークが代表だよ。Amplify Hosting はどちらにも対応していて、Next.js のアプリなら自動で検出してくれるし、Nuxt・Astro・SvelteKit なんかもアダプターを入れればデプロイできるんだ。

クラウドおさる

貼り紙を刷って配っておくのが静的サイト、聞かれるたびに書いて渡すのが SSR でござるな。今回は刷った貼り紙、つまり静的サイトのほうでござる。

Git 連携デプロイと手動デプロイ

クラウドおさる

ファイルを Amplify に渡す方法は、どうなっているのでござるか？

土肥

2 通りあるよ。1 つ目が Git 連携デプロイ。GitHub・Bitbucket・GitLab・AWS CodeCommit のリポジトリとブランチを Amplify に接続すると、Amplify がビルドのコマンドを自動で検出して、ビルドからデプロイまでやってくれるんだ。コードを更新すれば継続的にデプロイされる、Amplify Hosting の基本の使い方だね。

クラウドおさる

弊猿は Git のリポジトリを持っておらぬのでござるが……。

土肥

そこで 2 つ目の手動デプロイ。コンソールでは「Git なしでデプロイ」という名前で、Git プロバイダーをつながずにファイルを渡して公開できるんだ。渡し方は 3 つあるよ。

土肥

気をつけたいのが zip の作り方。親のフォルダーごと圧縮するんじゃなくて、ビルド出力（公開したいファイル）の中身を選んで圧縮するんだ。フォルダーごと圧縮するとサイトのルートが正しく初期化されなくて、「Access Denied」のエラーになるよ。それから、手動デプロイは SSR のアプリには対応していなくて、zip ファイルの最大サイズは 5 GB なんだ。

クラウドおさる

手動デプロイで公開できるのは静的サイトだけでござる。Next.js などの SSR アプリを公開したいなら、Git 連携のほうを選ぶのでござるな。

ブランチデプロイ・プレビュー・カスタムドメイン

クラウドおさる

ほかにも Amplify Hosting ならではの機能はあるのでござるか？

土肥

名前と役割だけ押さえておこう。どれも Git 連携や、公開後の運用で効いてくる機能だよ。

クラウドおさる

何もしなくても amplifyapp.com の URL がもらえて、独自ドメインはあとから付けられるのでござるな。

土肥

そう。デプロイすると、Amplify は https://ブランチ名.アプリID.amplifyapp.com の形のデフォルトドメインでホストしてくれるんだ。今回の実践でもこの URL で表示を確認するよ。

S3 + CloudFront で自前ホスティングする場合との違い

クラウドおさる

静的サイトなら、S3 の静的ウェブサイトホスティングでも公開できると聞いたでござる。Amplify と何が違うのでござるか？

土肥

いい質問だね！ S3 のウェブサイトエンドポイントは HTTPS に対応していないんだ。HTTPS で配りたいなら CloudFront を前に置いて、証明書やキャッシュの設定、S3 へのアクセス制御も自分で組むことになるよ。一方の Amplify Hosting は、CloudFront を使ったグローバルな CDN へのデプロイ、HTTPS、カスタムドメインの接続、アクセスログやメトリクスでの監視までをまとめて面倒を見てくれるんだ。S3 のドキュメントでも、S3 に置いた静的ウェブサイトのホストには Amplify Hosting がおすすめされているよ。

クラウドおさる

自分で一から組むなら S3 + CloudFront、手早く任せたいなら Amplify Hosting、という使い分けでござるな。

土肥

そういうこと。S3 と CloudFront を自分で組む構成は「CloudFront Origin Access Control（OAC）によるS3オリジン保護：OAIからの移行と推奨構成」で、S3 の基本は「Amazon S3 でバケットを作成しオブジェクトを管理する」で解説しているから、比べてみてね。

AWS AppSync の位置づけ

クラウドおさる

最後に、Amplify と一緒によく名前が出る AWS AppSync とは何でござるか？

土肥

AppSync は、GraphQL の API と Pub/Sub の API をサーバーレスで作れるサービスなんだ。GraphQL は、アプリが「このデータのこの項目が欲しい」と問い合わせの形で指定できる API の仕組みだよ。1 つの GraphQL のエンドポイントから複数のデータソースのデータを扱えて、データの更新をリアルタイムでアプリに届けることもできるんだ。

クラウドおさる

Amplify とはどういう関係なのでござる？

土肥

Amplify が「アプリを作って公開するまでの道具一式」だとすると、AppSync は「アプリがデータを取りに行く先の API」なんだ。AWS の概要の資料でも、AppSync はモバイル・Web アプリ向けのサーバーレスバックエンドとして、Amplify と同じ「フロントエンドのウェブおよびモバイルサービス」に並んでいるよ。

クラウドおさる

配る係が Amplify Hosting、木の実の在りかを答えてくれる窓口が AppSync でござるな！ 全体像がつかめたでござる！

新卒・未経験の方へ

AWS を仕事にしたい方へ ── 新卒・未経験から

この記事を書いているのは、AWS の設計・構築を仕事にしている現役エンジニアです。運営元の株式会社ジェニュインでは、新卒・未経験の方も募集しています。異業種や文系からインフラエンジニアになり活躍しているメンバーもいます。

• ✓システム開発・WEB エンジニア / インフラ構築などの職種で、未経験から応募できます
• ✓未経験から入社した社員の声を含む社員アンケートを掲載
• ✓応募フォームから 1 分で応募できます

採用ページを見る

実践

ハンズオンガイド7 ステップ画面 6 枚

コンソールの横に開いて、チェックしながら進めましょう。

ガイドを開く

別タブで開きます。チェックはこのブラウザに保存されます。

Amplify コンソールの「Git なしでデプロイ」で、小さな HTML を zip にしてアップロードし、発行された amplifyapp.com の URL で表示を確認します。続いて HTML を直して再デプロイし、表示が変わったこととデプロイの履歴を確認します。

前提条件

• リージョン: ap-northeast-1（東京）
• AWS マネジメントコンソールにログイン済みであること
• Amplify のアプリを作成できる権限があること
• 手元の PC でテキストファイルを作成し、zip 形式に圧縮できること（GitHub などの Git プロバイダーのアカウントや独自ドメインは不要です）

作成するリソース一覧

ステップ1: 公開する HTML を zip にまとめる

• 手元の PC に作業用のフォルダー amplify-handson を作成します
• テキストエディターで以下の内容を書き、文字コード UTF-8 で amplify-handson フォルダーの中に index.html という名前で保存します

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Amplify Hosting ハンズオン</title>
</head>
<body>
  <h1>Amplify Hosting で公開しました</h1>
  <p>バージョン: v1</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Amplify Hosting ハンズオン</title>
</head>
<body>
  <h1>Amplify Hosting で公開しました</h1>
  <p>バージョン: v1</p>
</body>
</html>

• amplify-handson フォルダーを開き、中の index.html を選択して zip に圧縮します。フォルダー amplify-handson そのものではなく、中のファイルを選んで圧縮するのがポイントです
• macOS の場合: Finder で index.html を右クリックし、「”index.html”を圧縮」を選択します。index.html.zip が作成されるので、site-v1.zip に名前を変更します
• Windows の場合: エクスプローラーで index.html を右クリックし、「圧縮先」→「ZIP ファイル」（Windows 10 は「送る」→「圧縮 (zip 形式) フォルダー」）を選択します。作成された zip ファイルの名前を site-v1.zip に変更します
• site-v1.zip を開き、いちばん上の階層に index.html があること（フォルダーが挟まっていないこと）を確認します

ステップ2: 「Git なしでデプロイ」でアプリを作成する

• AWS マネジメントコンソールにログインし、リージョンが ap-northeast-1（東京）であることを確認します
• 上部の検索バーに Amplify と入力し、表示された「AWS Amplify」を選択します
• Amplify の「すべてのアプリ」画面で「新しいアプリを作成」をクリックします
• 「Amplify を使用して構築を開始」の画面で、「Amazon S3 または Zip ファイルからアプリケーションを手動でデプロイするには、[Git なしでデプロイ] を選択します。」の下にある「Git なしでデプロイ」を選択し、「次へ」をクリックします

• 「手動デプロイを開始」の画面で以下を設定します
• アプリケーションの名前: amplify-handson-site（初期値は自動で付く app で始まる名前です）
• ブランチ名: main（初期値は staging です）
• 方法: ドラッグアンドドロップ（初期値のままで構いません）
• ドロップゾーンに site-v1.zip をドラッグ&ドロップするか、「.zip フォルダを選択」をクリックして site-v1.zip を選択します。「アップロード済み」と表示されれば準備完了です

• 「保存してデプロイ」をクリックします

ステップ3: 発行された URL で表示を確認する

• デプロイが始まり、アプリの「概要」画面に移ります。下の「ブランチ」欄で、ブランチ main のステータスが「デプロイ済み」になるまで待ちます（手動デプロイはビルドがないため、数秒から数十秒で完了します）
• ブランチ main の「ドメイン」に表示されている URL（https://main.<アプリID>.amplifyapp.com）を控えます

• 控えた URL をクリックするか、ブラウザの新しいタブで開きます
• 「Amplify Hosting で公開しました」「バージョン: v1」と表示されることを確認します。アドレスバーを見ると、自分で証明書を用意していないのに https:// で表示されていることも確認できます

クラウドおさる

zip を 1 つ渡しただけで、CDN からの配信も HTTPS も用意されたのでござる。S3 と CloudFront を自分で組むときに比べて、作ったリソースはアプリとブランチだけでござるな。

ステップ4: HTML を直して再デプロイする

• 手元の index.html の <p>バージョン: v1</p> を次のように書き換えて保存します

  <p>バージョン: v2（再デプロイしました）</p>

  <p>バージョン: v2（再デプロイしました）</p>

• ステップ1と同じ手順で index.html を zip に圧縮し、site-v2.zip という名前にします
• Amplify コンソールに戻り、アプリ amplify-handson-site の「概要」画面を開きます
• 下の「ブランチ」欄にあるブランチ main の「アップデートをデプロイ」をクリックします
• 表示された「Deploy updates: main」の画面で、方法が ドラッグアンドドロップ であることを確認し、site-v2.zip をドラッグ&ドロップするか、「.zip フォルダを選択」から選択します
• 「保存してデプロイ」をクリックし、ステータスが「デプロイ済み」になるまで待ちます
• ステップ3で開いたブラウザのタブを再読み込みし、「バージョン: v2（再デプロイしました）」に変わったことを確認します。表示が変わらないときは、ブラウザのキャッシュを無視して再読み込み（スーパーリロード）します

ステップ5: デプロイの履歴を確認する

• Amplify コンソールでアプリ amplify-handson-site の「概要」画面を開き、ブランチ一覧の main をクリックします
• 「デプロイ」画面の「デプロイ履歴」に、最初のデプロイ（デプロイ 1）と再デプロイ（デプロイ 2）の 2 件が並び、どちらもステータスが「デプロイ済み」になっていることを確認します。履歴の名前は「デプロイ 1」「デプロイ 2」の連番で、zip ファイルの名前は表示されません

クラウドおさる

Amplify Hosting は使った分だけ料金がかかる従量課金でござる。公開している間は保存や配信の分が積み上がるので、試し終わったアプリは残しっぱなしにせず削除するのでござるぞ。

まとめ

• AWS Amplify は Web・モバイルアプリの構築と公開を楽にするサービス群で、Amplify Hosting（ホスティング）・Amplify Gen 2（TypeScript によるバックエンド構築）・Amplify ライブラリで構成される
• Amplify Hosting は静的サイト（SPA・静的サイトジェネレーター）と SSR（Next.js など）の両方をホストでき、CloudFront ベースの CDN にデプロイする
• デプロイ方法は、GitHub などのリポジトリを接続する Git 連携デプロイと、zip ファイル・S3・URL からの手動デプロイ（Git なしでデプロイ）がある。手動デプロイは SSR に対応せず、zip の最大サイズは 5 GB
• zip は親フォルダーごとではなく、公開するファイルの中身を圧縮する
• 機能ブランチのデプロイ、プルリクエストの Web プレビュー、カスタムドメインなどで、ブランチごとの環境や独自ドメインでの公開を扱える
• S3 のウェブサイトエンドポイントは HTTPS に対応しないため自前なら CloudFront を組み合わせる。Amplify Hosting は CDN・HTTPS・カスタムドメインをまとめて提供する
• AWS AppSync は GraphQL と Pub/Sub の API をサーバーレスで提供するサービスで、Amplify と同じフロントエンドのウェブおよびモバイルサービスに分類される

クラウドおさる

「手軽に公開したいなら Amplify Hosting、細かく作り込むなら S3 + CloudFront」「GraphQL の API なら AppSync」という、サービスの役割の見分けが問われそうでござるな。

参照先

• AWS Amplify ホスティングへようこそ
• Git リポジトリなしでアプリケーションを Amplify にデプロイする
• Next.js アプリを Amplify ホスティングにデプロイする
• Amplify ホスティングでサーバーサイドレンダリングされたアプリのデプロイ
• 機能ブランチのデプロイとチームのワークフロー
• プルリクエストの Web プレビュー
• カスタムドメインの接続
• Amazon S3 バケットから Amplify への静的ウェブサイトのデプロイ
• Amazon S3 を使用して静的ウェブサイトをホスティングする
• ウェブサイトエンドポイント
• AWS AppSync とは
• フロントエンドのウェブおよびモバイルサービス

キャリア相談

独学の先に、AWS の仕事がある ── ジュニアおさるのキャリア相談

CLF には受かったけれど、次に何をすればいいのか分からない。独学で AWS を学ぶジュニアおさるの相談に、株式会社ジェニュイン代表の土肥が答えています。

• ✓資格はゴールか、CLF の次に何から手を付けるか
• ✓EC2 の次に作ってみる構成と、IaC・コスト管理
• ✓実務経験ゼロでも、面接で話せる「これまで」の作り方

相談を読む

新卒・未経験の方へ

AWS を仕事にしたい方へ ── 新卒・未経験から

この記事を書いているのは、AWS の設計・構築を仕事にしている現役エンジニアです。運営元の株式会社ジェニュインでは、新卒・未経験の方も募集しています。異業種や文系からインフラエンジニアになり活躍しているメンバーもいます。

• ✓システム開発・WEB エンジニア / インフラ構築などの職種で、未経験から応募できます
• ✓未経験から入社した社員の声を含む社員アンケートを掲載
• ✓応募フォームから 1 分で応募できます

採用ページを見る