ちょっと話題の記事

【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する

静的サイトのホスティングでCloudFront + S3の構成を検討されている方に向けて。
2021.03.29

こんにちは。AWS事業本部のKyoです。

簡単に静的サイトを構築・管理したいといった場合、Amplifyが選択肢の1つに上がってきます。

Amplifyと聞くと「ReactとかVue.jsとか必要なんでしょ?」そんなイメージをお持ちの方も多いのではないでしょうか。

今回紹介するAmplify Consoleはそれらの知識はナシに、従来CloudFront + S3構成で対応していた静的サイトをより簡単に構築・管理することができます。

また、本ブログではホスティングに加えて、カスタムドメインの設定や開発環境の追加、Basic認証にも触れます。これらに関してはCloudFront + S3構成で実装するよりもはるかに簡単に設定することができます。

具体的なユースケースとしては、コーポレートサイトなどにハマるのではないかと思っています。

Amplify is 何?

まず、言葉を整理しましょう。

AWS Amplify は、それぞれを連携させたり個別で使用したりできる、ツールとサービスのセットです。これらの機能により、フロントエンドウェブおよびモバイルのデベロッパーが、AWS によるスケーラブルなフルスタックアプリケーションをビルドできるようにします。(抜粋)

https://aws.amazon.com/jp/amplify/

Amplifyは聞いたことあるけど、細かくてよく分からん...。あるあるだと思います。Amplifyには大きくCLI, Library, Consoleと3つの要素がありますが、今回出てくるのはAmplify Consoleのみです。

以下のブログに概要がまとまっているので画像を拝借します。

ざっくり言うと、Amplify Consoleは以下のAWSサービス群をいい感じにラップしたものです。

「AWS Amplifyコンソールを使ってHugoベースの静的サイトを構築」 より引用

※ 引用の都合上、上図にはHugo(静的サイトジェネレーター)のアイコンが含まれていますが、HugoそのものがAmplify Consoleに含まれるわけではありません。本ブログではHugoを使わずに生のHTMLファイルを利用します。

GitHubにコードをプッシュすると、CodeBuildでビルドされ、アーティファクトはS3に格納。 Route53でドメイン登録して、ACMで証明書を発行してHTTPS対応する形でCloudFrontからS3のコンテンツを配信。

...このような構成は、よくある一方で準備が少々面倒です。要素が多く、学習に時間が必要だったり、構築の途中でつまづく可能性もあります。

Amplify Consoleを使えばユーザーに見えない形でこれらが作成されるので、Amplifyの管理画面を触るだけでいい塩梅に静的サイトの構築・運用が可能です。

※ AWSがいい塩梅にやってくれる反面、細かいチューニングが苦手なところもあり、そこはトレードオフになります。

今回必要になる知識

Gitレポジトリ(今回はGithubを利用します)とHTMLのごく基礎的な知識が必要になります。

とは言っても、レポジトリを作成して、master (main) ブランチに以下のindex.htmlがプッシュできれば大丈夫です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>TEST PAGE</h1>
</body>

やってみる

事前準備として、Githubにレポジトリを作成し、前述のindex.htmlをプッシュしておいてください(パブリック/プライベートはどちらでも構いません)。

my-first-amplifyというプライベートレポジトリを作成しました。

AWSマネジメントコンソールのAmplifyのページへ移動し、右下の「Get started」をクリックします。

GitHubを選択します。

初回はGithubの認証が発生します。Authorizeの後、パスワードを聞かれるので入力してください。 ※ us-east-2の部分は利用するリージョンによって変わります。

利用したいリポジトリとブランチを選択します。

ビルドの設定もよしなに生成してくれます。

確認してデプロイします。

1分くらいで終わりました。URLで分かるようにHTTPS対応しています(URL中の...の部分は実際にはランダム文字列です)。

アクセスしてみます。

以上でHTTPSに対応する形で静的サイトをホスティングできました!

次にやりたくなりそうなこと

ホスティング後にやりたくなるであろうことを3つ挙げました。

1. カスタムドメインの設定

デフォルトでHTTPS対応のサイトができているとは言え、ランダム文字列ベースのドメインよりはやはり好みのドメインを利用したいですね。

対象のドメインをRoute53で管理していれば、簡単にカスタムドメインへの切替が可能です。証明書も自動発行されるのでHTTPS対応への手間もほとんど発生しません。

ドメインの認証に10分程度がかかりましたが待つだけでOKです。

2. 開発環境の構築

masterブランチを接続する時と同様にブランチを選択してOKするだけです(今回はdevelopブランチを作成しています)。

Githubへの認証は済んでいるのでここでは不要です。

開発環境が追加されました。さらに追加の環境がほしい、という場合も同様の手順で増やせます。

環境の切り離しも簡単です。

3. Basic認証

開発環境にはBasic認証をかけておきたい。これもあるあるだと思います。

こんな感じで簡単にBasic認証が設定できます。

適当なユーザー名とパスワードを設定します。

アクセスしてみます。

おわりに

今回はごくシンプルな静的サイトをなるべく簡単にAmplify Consoleでホストしました。

また、よくある設定であるカスタムドメイン、開発環境の構築、Basic認証もAmplify Consoleの機能を使ってサクっと対応できました。

次のステップとしては以下のブログを読んでみるといいと思います。もう少し発展的な内容やCloudFront + S3構成との比較についても述べられています。

モダンなフロントエンド技術と一緒に語られることの多いAmplifyですが、それらに関係なく便利に静的サイトのホスティングができることが伝われば幸いです。CloudFront + S3構成を検討していて、なるべく管理を簡単にしたい場合、一考の余地ありだと思います!

以上、何かのお役に立てれば幸いです。