古川AWSでJAMstackことはじめ(基礎知識編)というBlog記事では、JAMstackとは何かをご紹介しました。Amplifyを利用してかんたんにJAMstackの環境を構築する方法をご紹介します。Gatsbyテンプレートのインストールまずはローカル環境にファイルを用意しましょう。starterを任意のディレクトリにインストールします。https://github.com/gatsbyjs/gatsby-starter-blogインストールが完了したら、次のコマンドを実行してローカルサーバーを起動させます。developブラウザからhttp://localhost:8000/にアクセスして以下のように表示されればインストール成功です。AmplifyとはWebアプリケーションを構築するための開発プラットフォームです。CLIを用いて、対話式にアプリケーションで利用するバックエンドコンポーネントをセットアップできます。APIの作成・管理など、豊富な機能をかんたんに利用できます。Authenticationを用いた認証機能の追加を行ってみます。CLIをインストールしましょう。Amplifyのバージョンが表示されたらインストールは成功です。Management(IAM)で管理するユーザーを作成します。IAMとはAWSリソースへのアクセスを安全に管理するサービスです。IAMを使用して各種サービスへのアクセス権限を管理します。configureするとブラウザにAWSマネジメントコンソールが表示されます(未ログインの場合はAWSログイン画面が表示されます)。AWSマネジメントコンソールが表示されるとコマンドプロンプトに以下の文言が表示されます。continueEnterをクリックすると以下のような質問が表示されるため、適宜コマンドプロンプト上で項目を設定します。amplify-xxx(IAMユーザー名。今回はデフォルトを使用)上記まで入力すると、またブラウザに戻り以下のような画面が表示されます。ブラウザ上では以降IAMユーザーの権限などを設定する画面が続きますが、今回は表示されるデフォルトの設定でIAMを作成します。最後まで入力すると以下の画面キャプチャのように、発行されたアクセスキーIDとシークレットアクセスキーが表示されます。どちらもAmplifyの導入に必要なものですが、シークレットアクセスキーの表示はこの時の画面に限り、紛失した場合はリセットを行う必要があります。シークレットアクセスキーの紛失を懸念する場合は「.csvのダウンロード」ボタンをクリックしてCSVファイルを安全な場所に保存しましょう。ここまでブラウザ画面上で設定したのち、コマンドプロンプトに戻りIAMのアクセスキーIDとシークレットアクセスキーを入力します。***********************最後に、ローカル環境に保存されるAWSプロファイルの名称を設定して完了です。今回はデフォルトの値を使用します。続いてプロジェクト固有のAmplifyの初期化を行います。starterをインストールしたディレクトリに移動し、次のコマンドを実行します。initするとコマンドプロンプトにAmplifyを設定するための質問が表示されるので、適宜答えていきます。myblog-starter(プロジェクト名。prod(バックエンド環境名。editor:(開発に利用しているエディタ。configureを実行した際、ローカルに保存したプロファイル名)ここまで入力すると、ルート直下にamplifyというディレクトリが生成されます。今後AmplifyでAPIを追加した場合は、このディレクトリに設定ファイルなどが追加されていきます。デプロイする一度ここでデプロイしてみましょう。今回サイトリソースのホスティングにはGitHubを採用します。デプロイの前に、まずはGitHubにリポジトリを作成しアプリケーションのファイルをリモートリポジトリにプッシュしましょう。STARTED」ボタンを選択します。続く画面にはリソースのホスティング先を選択する項目が表示されるため、GitHubを選択します。GitHubの認証や、ビルドするタイミングの確認などが完了すると、アプリの管理画面が表示されます。ビルドが完了すれば、サイトが表示されるようになります。Authenticationを利用して認証環境を追加してみたいと思います。以下のコマンドを実行します。authするとコマンドプロンプト上に設問が出てくるので以下のように回答します。done.続いて以下のコマンドを実行し、Amplifyのバックエンドのリソース設定をデプロイします。Authenticationを実装するのに必要な依存関係のパッケージをインストールします。aws-amplify-reactインストールが完了したら、gatsby-broswer.jsに以下を追記します。"./src/aws-exports"Amplify.configure(awsConfig)続いて、src/pages/index.jsを以下のように変更します。developをした上でhttps://localhost:8000を確認します。ローカル上で動作が問題なければ以下のキャプチャのように認証画面が表示されます。GitHubにプッシュすれば、自動でビルドされます。数行追記すれば認証機能を追加できるのは便利ですね。開発環境の構築Amplifyコンソールでは、ブランチごとにデプロイ先を変更することが可能です。そのため開発環境の構築も容易にできます。GitHubリポジトリにdevelopブランチを作成したあと、Amplifyコンソールを開き、「ブランチの接続」を選択します。リモートリポジトリの追加の項目で、新しく作成したブランチを選択します。バックエンド開発環境を新たに作成します。今回は「dev」という名称にしています。environments」で両方の環境が作成されていれば成功です。まとめデプロイまでの手順で考えると、個人的にはブラウザ上でボタンをクリックすればデプロイが完了するNetlifyのほうが導入するだけであれば容易に感じました。認証機能など他のAPIの導入を考慮すると、ひとつのサービスで完結すると考えればAWSを採用するほうがよいかなとも思います。今回はJAMstackことはじめということでテンプレートサイトをデプロイする方法のみをご紹介しましたが、AWSは提供されているサービスの数だけできることがあります。要件に柔軟に対応するために、AWSに関する知見をより深めていきたいです。