こんにちは、スタートアップテクノロジー開発部のてつです。

今回も、Amazon ComprehendとAWS Lambdaを使ってTwitterでつぶやいた内容がネガティブな発言でないかを確認できるAPIの続きを作成していきます。

前回までの記事をまだご覧になっていなければ、ぜひ先に以下をご覧ください。
Amazon ComprehendでTwitterのつぶやきを感情解析する-①TwitterAPI編
Amazon ComprehendでTwitterのつぶやきを感情解析する-②バックエンド環境編

フロントエンド環境の構築

作成したAPIをGUIで利用できる環境をReactで作成します。今回はすでに作成しているものをGitHubからcloneして使用します。

プロジェクトのClone

サンプルコードをcloneします。

$ git clone git@github.com:kitsunecat/twitter-comprehend.git

Tweet取得用APIのURL修正

src/components/main.jsのTweet取得用APIのURL部分を修正します。
63行目の<APIのURL>をAPIのデプロイで取得したURLに修正します。

// 例： URLが「https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/default/twitterComprehend」の場合
// 修正前
      .get(`<APIのURL>?twitter_id=${twitterId}`)
// 修正後
      .get(`https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/default/twitterComprehend?twitter_id=${twitterId}`)

依存ライブラリのインストール

axiosなどの依存ライブラリをインストールします。

$ npm install

サーバ起動

サーバを起動し、ローカルで動作することを確認します。

$ npm start

以下のような画面になるはずです。

フロントエンド環境のデプロイ

作成したフロントエンド環境をAmplifyでデプロイして、外部へ公開します。

リポジトリの準備

GitHubにログインし、リポジトリを新規作成します。

https://github.com/new

任意のリポジトリ名でリポジトリを作成します。

作成したリポジトリを初期化するために、ローカルのフロントエンド環境を構築したディレクトリで以下コマンドを実行します。

git add .
git commit -m "API URL変更"
git remote set-url origin git@github.com:<GitHubアカウント名>/<作成したリポジトリ名>.git
git push -u origin main

フロントエンドのデプロイ

AWS Consoleにログインし、サービス「AWS Amplify」をクリックします。

ページ下部のDeliverのGet startedをクリックします。

GitHubを選択してContinueをクリックします。

AmplifyからGitHubアカウントへの権限の付与を許可します。

GitHubアカウントのパスワードを入力してConfirm passwordをクリックします。

GitHub認証が成功したら、リポジトリ名に先ほど作成したリポジトリ名、ブランチにmainを入力して次へをクリックします。

デフォルトのビルド設定で次へをクリックします。

保存してデプロイをクリックします。

進捗が検証まで完了したことを確認したら生成されたURLをクリックしてデプロイされていることを確認します。

リンクをクリックしたら以下のように表示されるはずです。

アプリケーションの削除

AWSで使用した各種サービスを削除します。今後も使用し続けるのであれば本手順は不要です。
作成した環境は放置していると使用量に応じて料金が加算されていくので、不要になったら削除しておくことをおすすめします。

API Gatewayの削除

AWSコンソールにアクセスし、サービスAPI Gatewayを選択します。

作成したAPIのラジオボタンにチェックを入れ、アクション > Deleteをクリックします。

削除をクリックします。

Lambda関数の削除

AWSコンソールにアクセスし、サービスLambdaを選択します。

作成したLambda関数にチェックを入れ、アクション > 削除をクリックします。

削除をクリックします。

Amplifyアプリケーショの削除

AWSコンソールにアクセスし、サービスAWS　Amplifyを選択します。

作成したアプリケーションを選択します。

アクション > アプリの削除をクリックします。

deteleをテキストボックスに入力しDeleteをクリックして削除します。

これで今回作成したサービスの削除は完了です。

今回のアプリケーション作成のために Cloud9 環境を作成され、またその Cloud9 環境をこれ以降使用しない場合は、EC2 インスタンスタイプに応じた料金が発生しますので、そちらも別途削除しておいてください。

これで全て完了です。お疲れさまでした！

さいごに

全3回に分けてAmazon ComprehendとAWS Lambdaを使用しTwitterのつぶやきを感情解析するAPIの作成方法をお送りしました。

本記事の通りに設定をしていけば環境をゼロから構築する必要がありませんので、みなさんもぜひアプリケーションを作成してつぶやきの感情解析をしてみてくださいね。

同じくAWS Lambdaを使用して自然言語解析APIを作成したイベントのレポートもあるので、興味のある方はご覧ください！

また、国内2人目のサーバーレスヒーローである弊社エンジニア松井のインタビューもございます。

ご覧いただき、ありがとうございました！