= 30 分で AWS を使用して React アプリケーションをホストする =
このチュートリアルは非常に画像が多く、完全な初心者を対象としています。完全な認証システムを使用して、Web サイトで React アプリケーションをホストする方法について説明します。 Mobilehub CLI (コマンドラインインターフェイス) を介して AWS MobileHub の機能を呼び出します。このチュートリアルでは、AWS サービスのスキルは必要ありません。また、React ボイラープレート アプリケーションをセットアップする方法も示します。
すでに React アプリケーションをお持ちの場合は、
** awsmobile-cli をインストールしてアプリケーションに追加するセクション 2 にスキップできます
= 始める前に、コンピューターにいくつかの設定を行う必要があります =
**コンピューターにインストールされた Node 8.x 環境**
- これは、Javascript アプリケーション サーバーの実行環境です。続いて、ノード パッケージ マネージャー (NPM) が続きます。
- NPM は、React、AWS Amplify、AWS-JS コネクタ パッケージなどのノード パッケージをインストールするために使用され、基本的にそれです。
- httpsnodejs.org/en/download/
**AWS 無料利用枠アカウント
- 無料利用枠を通じて、AWS のサービスに無料でアクセスできます。このチュートリアルでは、これで十分です。ただし、各サービスには毎月の使用量に制限があり、これには実際の費用がかかる可能性があることに注意してください.
- httpsaws.amazon.com/free/
**AWS CLI (コマンドラインインターフェイス) をインストールして、AWS サービスをコンソールから直接呼び出します** **このコースでは、React の作成者である Facebook から維持されているボイラープレートを使用します **選択したエディター
- ほとんどのプログラミング言語とフレームワークを実行できる、高度に変更可能な軽量エディターである Visual Studio Code から始めることをお勧めします。
プロのヒント: VS Code のインストール プロセスで、環境パス名に追加するボックスにチェックを入れてください。これにより、ターミナルから VS Code を開くためのアクセスが可能になります。 âcode .Ãâ¢ãâãâ for the whole project youãâ¢ãâãâre. **A terminal youãâ¢ãâã快適です
- ほとんどの開発者は、コンピューターに Git をインストールする必要があります。これにより、多くの開発者が利用するターミナルである Git Bash にアクセスできます。
さぁ、始めよう！
**1. React アプリケーションを作成し、ターミナルからプロジェクト フォルダーに入ります**
ターミナルに入り、アプリケーションを保存するフォルダーを見つけます。 ãâ¢ãâãâdevãâ¢ãâãâ という名前のフォルダをお勧めします。
npx create-react-app プロジェクト名&& cd プロジェクト名
また
npm -g install create-react-app create-react-app プロジェクト名
ここでは、ボイラープレートに基づいて React アプリケーションを作成します。 ãâ¢ãâãânpxãâ¢ãâãâ は、リモート パッケージの呼び出しに npm サーバーを使用する Node ツールです。 2 番目のコード スニペットは、create-react-app をローカルにインストールします。
*npm -g install create-react-app* **そして、アプリケーションを作成します。 npx を使用して create-react-appand で常に最新の状態にしてから、アプリケーションを作成することをお勧めします。 create-react-app で常に最新の状態になるように npx を使用することをお勧めします。 **2. awsmobile CLI をコンピューターにインストールし、プロジェクトで実行します**
この時点から、コード エディターで React アプリケーションに注意を払う必要があります。 /awsmobile などのフォルダーが追加され、package.json ファイルにいくつか追加されます。
ターミナル ウィンドウで、次のように入力します。
npm install -g awsmobile-cli
awsmobile-cli をグローバルにインストールします。これは、AWS Mobile Hub コンソールで何らかの作業を行った後に使用します。
プロジェクト内にいることを確認して、入力してください
awsmobile 初期化
一連の質問が表示されますが、デフォルトのままで問題ありません。デフォルトのブラウザで AWS が自動的に開くまで、各設定で Enter キーを押します。まだログインしていない場合は、無料利用枠のアカウントでログインしてください。
これにより、awsmobile-cli が正しい AWS アカウントに接続されていることが保証されます。端末に戻り、Enter キーを押して続行します。
AWS は、アプリケーションを制御するユーザーを設定する必要があります。これは、Enter キーを押し続けると、awsmobile-cli によって自動的に実行されます。
これを完了すると、AWS IAM に移動し、そこで「次へ」 â¢ãâãâ 完成までの道のり! 2 番目のステップでは、[管理者アクセス] が自動的にチェックされているはずです。これにより、ユーザーは必要な AWS のすべての機能にアクセスできるようになります。
完了したら、秘密の認証情報を含む .csv ファイルをダウンロードすることが非常に重要です。これらのファイルは AWS で 1 回しか表示されないためです。これらのキーは、ターミナル ウィンドウの次のステップで使用されます。
これにより、AWS MobileHub アプリケーションが正常に作成され、aws-amplify が自動的にインストールされます& aws-amplify-react をローカルの React プロジェクトに
このプロセスが完了したら (~1 分)、次のように入力できます。
awsmobile コンソール
デフォルトのブラウザーで Mobile Hub アプリケーションを表示します。また、「awsmobile」と入力して、さまざまなアクションのリストを表示することもできます。ここから、ブラウザで Cognito ログインを追加しますが、awsmobile CLI から行うこともできます。
**3.実際に Cognito サインインとホスティングを追加する**
最後のステップとして、AWS MobileHub コンソールを介してプロジェクトに AWS Cognito を追加します。デフォルトですでに有効になっている Hosting を確認することもできます。
ホスティングをテストするには、コンソールで機能をクリックし、提供された URL をクリックします。ここにある内容は AWS によるテンプレートですが、React アプリケーションですぐに上書きします。
**Cognito ユーザー サインインを追加するには、下にスクロールして「ユーザー サインイン」を見つけてクリックします。 **これにより、認証システムで Cognito ユーザープールが有効になります。メール アドレスまたは電話番号から ãâ¢ãâãâEmailãâ¢ãâãâ を使用して、ログイン時にメールをユーザー名として強制します。または、ユーザー名を使用して、ãâ¢ãâãâEmailãâ¢ãâãâ + ãâ¢ãâãâUsernameãâ¢ã を有効にすることができますÂÃâ ユーザーに選択させる。どちらの方法でも確認コードを電子メールで受け取ります。
AWS では、登録確認コードを E メールに送信するのに料金はかかりませんが、SMS を送信するには実際の料金がかかるため、E メールを受け入れます。
結果は次のとおりです。
[アクション] >[Cognito で編集] をクリックすると、ユーザーと高度なセキュリティ機能を管理するための Cognito コンソールが表示されます。このステップで行った一部の設定は元に戻せませんが、いつでもユーザー プールを削除して新しいプールを作成できます。
これで、MobileHub 内の AWS Cognito の設定が完了しました。コードを追加する時が来ました。いくら？ 5行！そのうちの 3 つは React のインポートのみです。
= React プロジェクトへの設定の追加と Web サイトへの公開 =
ターミナルでは、いつでも awsmobile pull または awsmobile push を使用して、AWS MobileHub コンソールからオンラインで変更をアプリケーションにプルするか、ターミナルで awsmobile CLI を介して行われたローカルの変更をプッシュできます。
このユースケースでは、行った変更を取得したいと考えています。端末に戻って入力します
VS Code に戻ると、プロジェクトが変更されていることがわかります。 ./awsmobile/backend/mobile-hub-project.yml でローカル設定を確認できます
また、./package.json では、以前に行った awsmobile init によって追加された 2 つの強調表示されたライブラリが見つかります。
これらを使用して、アプリケーションを Cognito ログイン ウィンドウにラップします。 ./src/index.js を開き、これを変更します。
これに：
「react」から React をインポートします。
「react-dom」から ReactDOM をインポートします。
index.css をインポートします。
アプリからアプリをインポート';
registerServiceWorker から registerServiceWorker をインポートします';
aws-exports から awsMobile をインポートします。
「aws-amplify」から増幅をインポートします。
import { withAuthenticator } from "aws-amplify-react"Amplify.configure(awsMobile);
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
