【AWS Amplify Hosting】静的 LP を3分でデプロイする

Last updated at 2026-05-12Posted at 2026-05-12

はじめに

こんにちは、自分は入社して半年未満の者で、AWS はちょっと触ったことがあるくらいのレベルです。

アニメーション多めのLP案件を担当していて「検証環境にあげて、関係者に確認してもらいたいなー」という状況になりました。

直近のアンケートアプリの案件で SST（Serverless Stack） を使ってインフラを組んだ経験があり、自分の中では「AWSインフラ構築といえば SST、サーバーレス環境ならSST一択、簡単最強」という認識でした。そのため今回もSST で組もうとしていました。

ところが、AI と壁打ちしていたら、

「それ、明らかに過剰です。」

と返ってきました。

話を聞いていくとSSTはAWSのサービスをある程度組み合わせて使うサーバーレス構成を作成するときに向いてるようで

今回はLPの静的ファイルを公開するだけなのでSSTは過剰だったみたいです。

そして代わりに提示されたサービスがタイトルにあるAWS Amplify Hostingでした。

とりあえず使ってみましたが、かなり良かったです。

3分もかからず設定は終わりましたし、Basic認証の設定もサクッと終わりました。

また GitHub と連携しているので main が更新されたら自動で検証環境も更新されるのでそれも素晴らしかったです。

「LP を手軽にデプロイしたい」という用途なら、これが最適解だと感じたので、同じレベル感の人向けにまとめておきます。

この記事のゴール:

AWS Amplify Hosting で静的サイトを公開できる
Basic 認証をかけられる
git push で自動デプロイされる状態を作れる

AWS Amplify Hosting とは

「GitHub のリポジトリと繋ぐだけで、Web サイトを公開できる仕組みを丸ごと用意してくれるサービス」 です。

通常、Web サイトを公開しようと思うと、

ファイルを置くサーバー（ストレージ）を借りる
ドメインに HTTPS の鍵（SSL 証明書）を設定する
高速に配信するための仕組み（CDN）を用意する
ソースコードに変更があったら毎回手元でビルドしてアップロードし直す

等の細かい作業が積み重なります。Amplify Hosting はこれらをまるごと AWS が代行してくれるサービスです。

機能	やってくれること
ビルド	設定ファイル（`amplify.yml`）を読んで、クラウド上で自動的に `npm run build` を実行してくれる
ホスティング	ビルド結果のファイルを世界中の配信網から高速に配ってくれる
HTTPS	サイトにアクセスする時の暗号化を、証明書の発行から自動でやってくれる
自動デプロイ	GitHub に `git push` するだけで、勝手にビルド → 公開してくれる
Basic 認証	アクセスにユーザー名・パスワードを要求する仕組みを、画面のスイッチひとつで有効にできる

裏側では AWS のいろいろなサービスが組み合わさって動いていますが、ユーザー側は画面をクリックするだけで済みます。「Web サイト公開のための面倒ごとを全部 AWS に任せられる窓口」と捉えるとイメージしやすいです。

なお Amplify Hosting はドメイン設定や CDN 配信にも対応しており、本番環境でも十分使えます。ただし本記事では検証用途での使い方を紹介していきます。

Amplify Hosting に上げる方法は何種類かある

公開方法は用途に応じて選べます。

方法	内容	`amplify.yml`
GitHub 連携（今回紹介する方法）	リポジトリと接続して push で自動デプロイ	ビルドが必要なら必要
手動デプロイ（ドラッグ&ドロップ）	HTML/CSS/JS の入った ZIP をコンソールに放り込む	不要
Amplify CLI でデプロイ	`amplify publish` 等のコマンドを使う	不要

今回は SCSS のビルドが必要な案件なので、GitHub 連携で自動ビルドさせる方法を採用しました。

前提

AWS アカウントがある
GitHub にリポジトリがある
プロジェクトに package.json とビルドコマンドがある

今回は SCSS をビルドして静的 HTML/CSS/JS を吐き出す、ごく一般的な構成の LP を例にします。

① `amplify.yml` を用意する

ビルドが要らないペライチ HTML だけ上げたい場合は、このセクションごとスキップしてOKです。amplify.yml 不要なので、② にいってgitなしでデプロイを選択しドラッグ&ドロップするか、GitHub 連携時に Amplify が自動で「ビルド不要」と判定してくれます。

リポジトリのルートに amplify.yml を置きます。これがビルド手順書です。

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

各セクションの意味

セクション	役割
`preBuild`	ビルド前に走るコマンド。依存パッケージのインストール
`build`	実際のビルド処理
`artifacts.baseDirectory`	公開するディレクトリ。ここを HTML/CSS/JS が出力される場所にする
`cache.paths`	キャッシュ対象。`node_modules` を入れておくと 2 回目以降のビルドが速くなる

baseDirectory は自分のプロジェクトのビルド成果物が置かれる場所に合わせて変えてください。例えば Vite なら dist、Next.js (export) なら out です。

ルート `/` に index.html がない場合

LP のフォルダ構成によっては、baseDirectory の直下に index.html がないこともあります。

たとえば自分の案件は、納品先のシステム都合でこういう深い階層構造になっていました。

site/                          ← baseDirectory に指定
├── ext/
│   └── parent/
│       └── content/
│           ├── index.html     ← 実際の LP はここ
│           └── assets/
├── css/                       ← サイト共通CSS（LP から ../../../ で参照）
└── js/                        ← サイト共通JS

この状態で baseDirectory: site のままデプロイすると、

https://main.<app-id>.amplifyapp.com/ には site/index.html が存在しないため 404 エラーが返ってきます。

そのため、ルート URL を踏むと自動的に /ext/parent/content/ に飛ぶように amplify.yml にリダイレクト用の index.html を仕込んでおきます。

build:
  commands:
    - npm run build
    - |
      cat > site/index.html <<'EOF'
      <!DOCTYPE html>
      <html lang="ja">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="0; url=/ext/parent/content/">
      </head>
      </html>
      EOF

これでルートURLを踏むと自動的に /ext/parent/content/ に飛びます。

amplify.yml を main ブランチにコミット & push しておきます。

② AWS コンソールでアプリを作成する

ここからは AWS マネジメントコンソールでの作業です。

スクショは 2026 年 5 月時点の AWS コンソールのものです。
AWS の UI は頻繁にアップデートされるため、ボタンの配置や文言が変わっている可能性があります。記事の内容と画面が一致しない場合は、最新の AWS Amplify 公式ドキュメントも併せて確認してください。

Amplify コンソールへ移動

AWS マネジメントコンソールにログイン
上部の検索バーで 「Amplify」 と検索 → AWS Amplify を選択
リージョンを使いたい場所に切り替え（例: 東京 = ap-northeast-1）

新しいアプリを作成

「新しいアプリを作成」 をクリック。

GitHub と連携

ソースプロバイダーで GitHub を選択 → 「続行」。

GitHub 認証ポップアップで承認します（初回のみ）。Organization のリポジトリを使う場合は、Organization へのアクセス許可が必要です。

リポジトリとブランチを選びます。

ビルド設定の確認

amplify.yml をリポジトリに置いてあるので、自動検出されます。画面に表示される「YAMLファイルを編集」ボタンをクリックするとファイルの中身が確認できます。それが想定通りか確認するだけでOKです。

「次へ」→「保存してデプロイ」で初回ビルドが始まります。

初回デプロイを待つ

緑のチェックマークが表示されたら完了。公開 URL が表示されます。

ドメイン欄に表示されている URL にアクセスして確認してみてください。

③ Basic 認証をかける

Basic 認証も簡単にできます。

左サイドバーの 「ホスティング」＞「アクセスコントロール」 をクリック
「アクセスの管理」 をクリック
該当ブランチ（例: main）の 「アクセス設定」 のドロップダウンを 「制限 - パスワードが必要です」 に変更。
ユーザー名とパスワードを入力 → 「保存」

反映に数十秒かかります。再度 URL を開くと、ブラウザの Basic 認証ダイアログが出るようになります。

これだけで完了です。

④ `main` に push したら自動デプロイされる

Amplify は GitHub に Webhook を仕掛けてくれているので、接続済みブランチに push すると勝手に再ビルド & 再デプロイされます。

項目	挙動
自動再ビルド	push を検知して即発火
所要時間	通常 3 分ほど
ビルド失敗時	旧バージョンが配信され続ける（ダウンタイムなし）

ビルド履歴の見方

「ちゃんとビルドできてるか確認したい」「失敗したけど原因を知りたい」という時は、ビルド履歴を見ます。

Amplify コンソールトップで 対象アプリ名 をクリック
「ブランチ」 から該当ブランチ（例: main）を選択
ブランチ詳細ページに ビルド履歴の一覧 が表示される

別ブランチも接続できる

feature/xxx のような検証用ブランチを別途接続すれば、ブランチごとに別 URL が発行されます。PR ベースで「この変更だけ確認したい」みたいな使い方ができます。

料金

気になる料金ですが、LP 1 本程度なら無料枠の範囲で収まることが多いです。

無料利用枠（新規 AWS アカウントの最初の 12 ヶ月）

項目	無料枠
ビルド時間	1,000 分 / 月
ストレージ	5 GB
データ配信	15 GB / 月

LP 1 本のアクセス量・ビルド頻度なら、これを超えることはほぼないです。

無料枠を超えた場合（参考）

項目	料金
ビルド	$0.01 / 分
ストレージ	$0.023 / GB / 月
データ配信	$0.15 / GB

LP 1 本だと、超えても月数十円〜数百円で済みます。最新の正確な料金は AWS Amplify 料金ページを確認してください。

使い終わったら削除する

検証用に立てた環境を放置すると、無料枠を消費したり最悪課金が走るので、不要になったら消しておきます。

手順

Amplify コンソール → 該当アプリを選択
サイドバーの アプリケーションの設定＞全般設定をクリック
ページ最下部の 「アプリを削除」 をクリック
確認ダイアログで「削除」と入力 → 削除

一緒に消えるもの

Amplify アプリ本体
紐づく S3 バケット / CloudFront ディストリビューション（裏側で作られたもの）
GitHub の Webhook（Amplify が登録したやつ）

GitHub 側の Webhook も自動で削除されるので、「リポジトリに不要な Webhook が残る」みたいな事故も起きません。手軽に立てて手軽に消せます。

SST は全部が最強なわけじゃない

冒頭にも書いた通り、思考停止で サーバーレスのインフラ構築 = SST と考えてしまってました。

SSTはとても便利で、Lambda・API Gateway・S3・CloudFront・DynamoDB あたりを TypeScript で記述してまとめて構築できるので、フルスタックなアプリには向いているツールだと思います。

ただ、今回上げたかったのは 静的な LP 1 本でビルドしたファイルを置いて、Basic 認証かけて、URL を共有するだけです。

SST のような IaC（インフラをコードで管理する仕組み）はオーバースペックでした。

もしSSTでデプロイした場合、

セットアップが重くなる
無駄な周辺コードが増える
デプロイに時間がかかる
Basic 認証も自前で組む必要があって若干面倒

といった無駄なコストが発生するので、最適なサービス選択をする必要があるなーと今回感じました。

まとめ

AWS Amplify Hosting なら、静的 LP を数分で公開できる
amplify.yml を置いて、コンソールで GitHub 連携するだけ
Basic 認証もすぐ終わる
git push で自動デプロイされる

「とりあえず触ったことのあるツールで全部やる」になりがちですが、用途に合った道具を選ぶことの大事さを今回改めて感じました。同じように LP の検証環境を立ち上げる方の参考になれば嬉しいです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up