【AWS】無料枠を使ってみる②

前回の続きです。

今回は、公式サイトを参考に、AWSのAmplifyを使ってみます。Appsyncとの接続は次の記事で実施したいと思います。

そもそもAmplifyとは、アプリ開発を手軽に実施できるように、いろんな機能を搭載したプラットフォームです。

Amplifyを使って作ったアプリは、数コマンド打つだけで、外から接続が可能になります（デプロイできます）。

つまり、Amplifyを使えばWebサーバ(Apache等）とかOSサーバ(Linux等)とかネットワークの知識とか、そいういったものが不要なんです！

アプリ開発者はアプリを開発することだけに集中できるんですね。

さっそく、Cloud9でAmplify環境を構築してみましょう。

Cloud9の画面の下に、コマンドを打つことができるターミナルがあります。

以下のコマンドを順番に打っていきましょう。1つ目のコマンドを実行すると、Cloud9が勝手にいろいろ準備します。

文字が表示されては消えて、、となりますが、慌てずに完了するのを待ちましょう。

「Happy hacking!」が表示されればOKです！

npx create-react-app amplifyapp
cd amplifyapp
npm start

上記コマンドは、AmplifyでReactのアプリケーションを作成しますよという意味です。

「You can now view amplifyapp in the browser.t」と表示されているかと思います。
Cloud9の「Preview」タブから、「Preview Running Aplication」をクリックしてみましょう。

Preview用のブラウザが開かれます。Reactのシンボル？みたいなものが表示されていればOKです。

続いて、AmplifyのCLIをインストールします。「You can now view amplifyapp in the browser.t」が表示されている場合は

Ctl+cで解除できます。

npm install -g @aws-amplify/cli

続いて、Amplifyの設定をしていきます。

amplify configure

「Press Enter to continue」が出た場合はEnterキーを押しましょう。

そうするとRegionの選択画面がでます。DrupalだとRegionは画面上の領域ですが、AWSではどの国の資源を使用するかという意味になります。

AWSは世界各国に大規模な基盤施設を建てており、私たちはその施設の資源（基盤）を利用してAWSを使用しています。

ここでは東京リージョン（ap-northeast-1）を選択しましょう。

Specify the AWS Region
? region:  
  eu-west-1 
  eu-west-2 
  eu-central-1 
❯ ap-northeast-1 
  ap-northeast-2 
  ap-southeast-1 
・・・

「Specify the username of the new IAM user:」と聞かれますので、IAMで作成したユーザ名を入れましょう。

ユーザが作成され、「Press Enter to continue」と表示されるので、Enterを押します。

「Enter the access key of the newly created user:」でAccess keyを入力してもEnterを押します。

「secretAccessKey」も聞かれるので、入力しましょう。

「? Profile Name: (default) 」ではEnterで良いと思います。

「Successfully set up the new user.」が表示されれば成功です。

secretAccessKey等の情報は、IAMユーザを作成した際にダウンロードしたcsvファイルに記載されています。

続いて、Amplifyの初期化を行いましょう。

amplify init

「? Enter a name for the project (amplifyapp)」では、特にプロジェクト名はつけないのでEnterを押します。
「? Initialize the project with the above configuration? (Y/n) 」は、初期化しますか？と聞かれているのでYを入力してEnterを押します。
「? Select the authentication method you want to use: (Use arrow keys)」では、「❯ AWS access keys 」を選択してEnterを押します。
「accessKeyId」と「secretAccessKey」が聞かれるので、IAMユーザの情報を入力しましょう。
「? region: (Use arrow keys)」では「ap-northeast-1」を入力します。するといろいろ準備されます。
「Try “amplify add api” to create a backend API and then “amplify publish” to deploy everything」が表示されれば成功です！

ここまでで、Amplify上にアプリが作成されました。AWSでAmplifyと検索し、Amplifyのメイン画面に行ってみてください。

amplifyappというアプリが作成されているはずです。

では、以下でデプロイしてみましょう。

amplify publish

あれ、「 Please add hosting to your project before publishing your project」と出てしまいました。

ホスティングしてくださいとのことです。

ではホスティングしてみましょう。

amplify add hosting

なにやら2つから選べるようです。

❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) 
  Amazon CloudFront and S3 

S3はストレージサービスとのことで、S3のストレージ上にアプリが配置されるのかーと推測できます。

無料利用枠では15Gまで使用可能とのこと。

Hosting with Amplify Consoleは、Amplify用のストレージで、これも5Gまで使用できるらしいです。

Amplify用だということもあり、今回は「Hosting with Amplify Console」を選択したいと思います！

以下が表示されます。

  Continuous deployment (Git-based deployments) 
❯ Manual deployment 
  Learn more 

デプロイは主導で実施するので、そのままEnterです。

「You can now publish your app using the following command:」が表示されれば成功です。

では、あらためてデプロイしてみましょう。

amplify publish

設定に間違いないか聞かれるので、Yを入力してEnterを押しましょう。

| Category | Resource name  | Operation | Provider plugin   |
| -------- | -------------- | --------- | ----------------- |
| Hosting  | amplifyhosting | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n) 

設定に間違いないか聞かれるので、Yを入力してEnterを押しましょう。

問題がなければ以下のような文字が表示され、その下にhttps://～amplifyapp.comと表示されるので、そのURLにアクセスしましょう。

✔ Zipping artifacts completed.
✔ Deployment complete!
https://～amplifyapp.com

reactの画面が表示できれば成功です！

デプロイすると誰でもアクセスできる状態になります。

今回、デプロイしたアプリを停止する方法が見つからなかったので、デプロイされている状態が嫌な方は残念ですがAmplify画面からアプリの削除をお願いします。。

どうやって制御するんだろう。。今後はデプロイせず、「Preview Running Aplication」で確認していきたいと思います！