【AWS】Amplifyコンソールでサクッと静的ホスティング！

2月 12, 2022

どもども、Reactを本格的に勉強し始めました。(どうでもいい)


さて、今日はAWSのマネージドサービスであるAWS Amplify コンソールを使用して静的ファイルをサクッとホスティングしてみようと思います。


少し余談にはなりますが、僕は以前まで、AWSサービスを利用した静的サイトホスティングはS3とCloudfrontを主軸として構成していました。(よくある構成ですね！)


しかしこの構成は、そもそもS3やCloudfront自体の構築が面倒ですし、デプロイフローも別途考える必要があります。それを考慮しても"サーバを管理しなくてもよく、S3のSLAから堅牢性や耐久性も期待できる"という一度構築してしまえば大きな恩恵を受けることができる構成でした。


そんな中、その辺りの構築をまるっとコンソール上で完結することができるサービスが現れたというではありませんか。これは試してみるしかありませんね(今更)。


というのが本記事を書くに至った経緯です。余談終わり。


というわけで、今回はGithubリポジトリから静的サイトをホスティングし、プッシュに合わせてデプロイが走りファイルの変更が反映されるところまでをAWS Amplify コンソールを使用して実現してみたいと思います。

ソースファイルの準備

兎にも角にも静的サイトホスティングを試してみるわけですから、表示できるソースファイルが必要ですね！


今回は環境構築などしなくてもGithubアカウント一つで試すことができるようにCodeSandboxを利用してソースファイルを用意しようと思います。(Githubアカウントは事前に準備をお願いします！)


CodeSandboxに接続し、右上"Create Sandbox"ボタンから"Vanilla"を選択して素のJavaScript環境を構築しましょう。ちなみにこのCodeSandboxは環境構築を一切することなくJSやReact、Vueの学習を行うことができる優れたプラットフォームなのでフロントエンドを学びたいという方は是非利用してみてください！


さて、エディタ画面に接続できましたら右上"Sign in"ボタンにてご自身のGithubアカウントと連携してください！


あとは左側メニューからGithubアイコンをクリックし"Link"ボタンで任意の名前のリポジトリの作成を作成していただければソースファイルの準備は完了です。


現在エディタ左画面には擬似的なブラウザ表示画面があるかと思います。この画面に、実際のブラウザ画面からアクセスできるようにするためにAWS Amplify コンソールを使用してホスティングしていきましょう！

AWS Amplify Consoleの設定

それでは、いよいよAmplifyコンソールの設定を行なっていきます。


AWSコンソール画面にログインし、"利用を開始する"をクリック、"ウェブアプリケーションをホスト"の方の使用を開始するをクリックしましょう。


Amplify Hostingの開始方法を問われますが、今回はGithubを選択してください！


認証を求められますので、Githubのパスワードを入力してください。うまく認証できれば"GitHub の認証が成功しました。“と表示されます。


その後、同ページの選択バーよりCodeSandboxで作成したリポジトリを選択してください。ブランチは特に作成していないので"main"のままで問題ありません。次にいきましょう。


次の構築設定はビルドされたディレクトリからデプロイするため自動生成されたものからbaseDirectoryを変更します。

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

もろもろの設定情報をチェックしたなら、いざデプロイ！ドキドキの時間を過ごします。


検証の工程まで完了しましたら、払い出されたURLよりアプリケーションに接続してみましょう！CodeSandboxで見ていたページがwebブラウザ上で表示されたら成功です！

コードを修正してみる

無事ホスティングが完了したところで、次にCodeSandboxにてコードを修正してGithubにプッシュすると変更分がデプロイされるか確認してみましょう。

CodeSandboxに戻り、index.jsを例えば以下のように修正します。

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello Amplify!</h1>
<div>
  We use the same configuration as Parcel to bundle this sandbox, you can find more
  info about Parcel 
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>
`;

CodeSandbox上での表示が変わりましたね！しかし、今のままではAmplify コンソールにてホスティングしているサイトは"Hello Vanilla!"のままです。


変更をGithubにプッシュし、差分をデプロイしてみましょう。左側メニューのGithubアイコンから"index.jsを変更"などコメントを入力し、"Commit changes"ボタンをクリックします。これで変更分が連携しているGithubリポジトリにPushされます。


すぐにAmplify コンソールを見てみると、すでにプロビジョニングが始まっています。S3ホスティングの時は構築が大変だったCI/CDがこうも簡単に実現できるのはやはりすごいですね！


検証まで完了したら、再びホスティングされたページを見てみましょう！表示内容が変更されていますね！YATTA！

まとめ

今回はAWS Amplify コンソールとCodeSandboxを利用して比較的簡単に静的サイトホスティングを行なってみました。


初めて触ってみましたが想像以上に手軽でとても感動しました。これをS3ホスティングで実現しようとすると倍くらいの工数がかかります。


他にもRoute53を利用している場合は数クリックで独自ドメインSSL化が可能であったり、Basic認証の有効化、PRのプレビューなどS3ホスティングと比べると圧倒的に多彩な機能がとても簡単に使用できます。もっと早く知りたかった…。


静的サイトの運用やフロントエンド開発には是非とも選択肢に加えるべきサービスといえるでしょう。まだ触ったことがないという方は是非試してみてください！


以上、最後まで読んでいただきありがとうございました！


↓オススメ教材

AWS

Posted by CY