こんにちは、スタートアップテクノロジー開発部のてつです。
今回も、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
以下のような画面になるはずです。
![](https://t.gyazo.com/teams/startup-technology/6a8d879c95b2273b8c3fafd7fd21d942.gif)
フロントエンド環境のデプロイ
作成したフロントエンド環境をAmplifyでデプロイして、外部へ公開します。
リポジトリの準備
GitHubにログインし、リポジトリを新規作成します。
任意のリポジトリ名でリポジトリを作成します。
![](https://t.gyazo.com/teams/startup-technology/0d797ccba25303ac7433b93b447366ef.png)
作成したリポジトリを初期化するために、ローカルのフロントエンド環境を構築したディレクトリで以下コマンドを実行します。
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」をクリックします。
![](https://t.gyazo.com/teams/startup-technology/ec549f00290970884a6ef94b8e54bacf.png)
ページ下部のDeliverのGet started
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/2a1d3ba8cd981321e46810e242c00ef9.png)
GitHub
を選択してContinue
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/41136b94efeac934817359e88a4d0607.png)
AmplifyからGitHubアカウントへの権限の付与を許可します。
![](https://t.gyazo.com/teams/startup-technology/3fb23934d62760cd4c1fabb10a42516a.png)
GitHubアカウントのパスワードを入力してConfirm password
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/5ae9a70b166ccd21f7a26432b092a163.png)
GitHub認証が成功したら、リポジトリ名に先ほど作成したリポジトリ名、ブランチにmain
を入力して次へ
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/b33dcd3a46a1424939315a7464fa10ac.png)
デフォルトのビルド設定で次へ
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/e269b817d2f1f3b21f9402725a9be7bd.png)
保存してデプロイ
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/d3e7be06aeea2bc2a024995f1aa073a4.png)
進捗が検証
まで完了したことを確認したら生成されたURLをクリックしてデプロイされていることを確認します。
![](https://t.gyazo.com/teams/startup-technology/39dd482adf595e0c148fccc58eb68f19.png)
リンクをクリックしたら以下のように表示されるはずです。
![](https://t.gyazo.com/teams/startup-technology/a70d523daff801494d02a47990df48a5.png)
アプリケーションの削除
AWSで使用した各種サービスを削除します。今後も使用し続けるのであれば本手順は不要です。
作成した環境は放置していると使用量に応じて料金が加算されていくので、不要になったら削除しておくことをおすすめします。
API Gatewayの削除
AWSコンソールにアクセスし、サービスAPI Gateway
を選択します。
![](https://t.gyazo.com/teams/startup-technology/a20b98bd1caf535ca9fbc2fd919e2efd.png)
作成したAPIのラジオボタンにチェックを入れ、アクション
> Delete
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/19ffba9174ccb4ac53fe38981711e2a8.png)
削除
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/54be1c5185b43b05130132e0149244eb.png)
Lambda関数の削除
AWSコンソールにアクセスし、サービスLambda
を選択します。
![](https://t.gyazo.com/teams/startup-technology/ffe5b160461d69ce7df4e97085012ced.png)
作成したLambda関数にチェックを入れ、アクション
> 削除
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/1b4f3487f4f5a899a185d20e8f6fbc17.png)
削除
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/0100cffee1e8035be0dab72b8544f990.png)
Amplifyアプリケーショの削除
AWSコンソールにアクセスし、サービスAWS Amplify
を選択します。
![](https://t.gyazo.com/teams/startup-technology/146a64c7bc92239f4f2dd84f30f62ec2.png)
作成したアプリケーションを選択します。
![](https://t.gyazo.com/teams/startup-technology/059a4f699239dd520344df37cbd659da.png)
アクション
> アプリの削除
をクリックします。
![](https://t.gyazo.com/teams/startup-technology/07f4747b77816697434d3488dbbffab2.png)
detele
をテキストボックスに入力しDelete
をクリックして削除します。
![](https://t.gyazo.com/teams/startup-technology/fae54a8cfa18c81337902f64458de0b2.png)
これで今回作成したサービスの削除は完了です。
今回のアプリケーション作成のために Cloud9 環境を作成され、またその Cloud9 環境をこれ以降使用しない場合は、EC2 インスタンスタイプに応じた料金が発生しますので、そちらも別途削除しておいてください。
これで全て完了です。お疲れさまでした!
さいごに
全3回に分けてAmazon ComprehendとAWS Lambdaを使用しTwitterのつぶやきを感情解析するAPIの作成方法をお送りしました。
本記事の通りに設定をしていけば環境をゼロから構築する必要がありませんので、みなさんもぜひアプリケーションを作成してつぶやきの感情解析をしてみてくださいね。
同じくAWS Lambdaを使用して自然言語解析APIを作成したイベントのレポートもあるので、興味のある方はご覧ください!
また、国内2人目のサーバーレスヒーローである弊社エンジニア松井のインタビューもございます。
ご覧いただき、ありがとうございました!