Amplifyを使用した簡単なWebサイトの構築 前編

motoishi


この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので十分ご注意ください。

今回、 Amplify を使用して簡単なWebサイトの構築を実施しました。

Amplify CLI を利用して アプリを作成、フロントエンドの設定、Amazon Cognito で認証機能の追加、ユーザーネームとパスワードを入力してサイトにログインするという流れになります。

　

至らない点が多いと思いますがご了承ください。設定などの部分が多く少し長くなりましたので、前編と後編に分けて投稿します。

　

Amplify とは

　

Amplify の構成要素として大きく４つの要素があります

　

  • Amplify ライブラリ

　Web、モバイルアプリと AWS を統合するための OSS ライブラリ

  • Amplify CLI

　Web、モバイルアプリのバックエンドをインタラクティブに作成、管理するための OSS ツールチェーン

  • Amplify Console

　フルスタックサーバーレス Web アプリをビルド、テスト、デプロイ、ホスティングするための AWS サービス

  • Amplify Admin UI

　Web、モバイルアプリのバックエンドとコンテンス管理するための GUI ツール

　

AWS Amplify は、フロントエンドのウェブ/モバイルデベロッパーが AWS でフルスタックアプリケーションを簡単に構築、出荷、ホストできるようにする完全なソリューションであり、ユースケースの進化に合わせて幅広い AWS サービスを活用できる柔軟性を備えていて、クラウドの専門知識は不要。

引用: AWS公式サイト

　

　

それでは AWS Cloud9 を使用して構築していきます

　

Cloud9の環境構築

　

  1. まずは Cloud9 の環境構築をしていきます

コンソールからCloud9 を選択して 「Create environment」をクリック

名前は任意で入力します

次に環境の設定をしていきます

Instance type は ビルド時にメモリが不足する可能性があるので t3.small を選択します

↓

確認して「Create environment」クリック

↓

↓

環境の構築完了です

　

  1. Cloud9の設定変更
    　

次にCloud9の設定を変更します

今回は Amplify CLI で発行する認証情報を用いるため、AWS が管理する一時的な認証情報の設定を無効化します。

Preferences をクリック

↓

AWS managed temporary credentials をオフにします

↓

これで認証情報の無効化が完了です

　

次にCloud9のインスタンスのEBSボリュームを変更します。デフォルトのままだとEBSボリュームが不足してしまう可能性があります。

Go TO Your Dashboard をクリック

使用していたCloud9環境が表示されるので選択して、View details　をクリック

EC2インスタンスを参照できるリンクをクリック

Cloud9が動いていたインスタンスが表示されるので選択してインスタンスを停止します

↓

↓

インスタンスの停止後、EBSのページに移動します

　

インスタンスを選択してストレージをクリック、ボリュームIDをクリック

EBSボリュームが表示されるのでボリュームを選択して、アクションをクリックしてボリュームの変更を選択します

ボリュームサイズを10から32に変更

↓

↓

ボリュームサイズの変更完了です

　

インスタンスを再起動します

↓

↓

これでEBSボリュームの変更が完了したので Cloud9 に戻ってリロードを行い、ターミナルでボリュームが増えたか確認します

df -h を入力し32GBに変更されているのを確認 (ファイルシステムのディスクの使用状況を表示)

　

アプリケーショーンが動作する環境の整備

　

Node.js や AWS Amplify、Reactアプリケーションが動作する環境を整備していきます

ここから先の手順は Amplify Docs という Amplify 公式ページに記載されている React のチュートリアルを使用します

　

　

1. Node.js 環境のセットアップ

　

インストールされている Node のバージョンを確認します node -v

インストールされていない場合は公式サイトを参照してインストールしてください

　

2. Amplify CLI インストールとセットアップ

　

※ Tutorial – Prerequisites – React – 参照してください

Amplify Docs　にある Amplify CLI インストールコマンドを実行します

　

Amplify Docs では npm install -g @aws-amplify/cli と記載されていますが、最新バージョンをインストールすると後の手順でエラーが起きるためバージョンを指定してインストールします

npm install -g @aws-amplify/cli@8.3.1

インストールが完了したら Amplify のセットアップを行います

amplify configure

　

管理者権限を持つアカウントでログインしているため Enter で次へ

※ログインしていない場合はコンソールからログインしてください

使用しているリージョンを選択

※今回はシンガポールで実施しているのシンガポールを選択

作成されるIAMユーザー名を入力し、次へ

※今回はデフォルトでランダムで生成されたもので進めます

コンソールのURLをクリックし open 選択

先ほど設定したユーザー名でユーザーを作成していきます

　

　


　

AdministratorAccess-Amplify ポリシーが選択されていることを確認して次へ

↓

確認してユーザーの作成をクリック

ユーザーの作成が完了しました

アクセスキーID とシークレットアクセスキーを後で使用するのでメモなどをしてください

ユーザーの作成が完了したので Cloud9 に戻り Enter を押してアクセスキーID とシークレットアクセスキーを入力します

↓

次にIAMユーザーを使用してログインするための設定ファイルであるプロファイルネームを設定

今回はでデフォルトのまま設定

これで Amplify の設定は完了です

　

3. React アプリの作成

　

※ Tutorial – Set up fullstack project – React – 参照してください

create-react-app　のパッケージをインストールします npx create-react-app react-amplified
インストールしますかと聞かれるので y と入力

↓

インストールが完了したら作成したプロジェクトに移動するためのコマンドを実行します

cd react-amplified

作成されていることが確認できました

　

次に動作の確認をするコマンドを実行します npm start

コマンドを実行することで Cloud9 でサーバーが立ち上がった状態になりました

Preview からPreview Running Application をクリックしてアプリケーションが動作していることを確認します

↓

アプリケーションが動作していることが確認できました。確認できたら Ctrl＋C などでサーバーを終了します
　

アプリが実行されていることが確認できたので、Amplify をセットアップし、アプリをサポートするバックエンド サービスを作成します

Amplify Project 初期化　するコマンドを実行します

amplify init

プロジェクト名を聞かれるので任意で設定します。今回はデフォルトで進めていきます

初期化できる項目がデフォルトで表示されています。今回のプロジェクトがデフォルトで良いか聞かれているので Y を入力します。細かい設定をしたい場合は n を入力して設定してください

　

次に認証方法を聞かれますが、先ほど作ったプロファイルがあるのでプロファイルを選択して、作成したファイル(ファイル名 default)を選択

↓

少し時間がかかります

インストールが完了しました

　

4. Amplify Framework インストール

　

次に Amplify のライブラリをインストールします

npm install aws-amplify @aws-amplify/ui-react

↓

インストールが完了しました

　

5. フロントエンドの設定

　

src/index.js　に下記のコードを追加します

import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

↓

index.js をクリックしてコードを追加

↓

Ctrl＋Sで保存します。コードの追加が完了しました

　

後編へ

今回はここまでです。後編では、先ほど作った開発環境で Todo アプリが動作する環境を構築していきます。後編もよろしくお願いします。

　

後編 : Amplifyを使用した簡単なWebサイトの構築 後編
　

Last modified: 2024-02-08

Author