はじめに
いよいよ本記事も最後となりました。
本記事では社内研修で作成したAI Chat Bot のフロントエンド側のアプリケーションをIBM Cloud Code Engine を使用してビルド・デプロイし、フロントエンドとバックエンドの連携をしていきます。
フロントエンドのデプロイはバックエンドと同様の手順で作成します。本記事ではバックエンド編と異なる点のみを記載します。
IBM Cloud Code Engine を使用してフロントエンドのビルド・デプロイ
バックエンド編との変更点
| バックエンド編の番号 | 項目 | 値 |
|---|---|---|
| 1-3 | 名前 | tdc-rehorenso-frontend |
| 1-6 | コンテキスト・レジストリ | frontend/ |
| 1-8 | リポジトリー（イメージ名） | rep-rehorenso-frontend |
| 1-12 | ドメイン・マッピング | パブリック |
| 1-13 | 環境変数 | 下記に記載 |
環境変数
環境変数は以下のように設定します。
| 項目 | 値 |
|---|---|
| 定義タイプ | configmap内のキー参照 |
| 名前のオーバーライド | 空欄 |
| Configmap | backend-api-url |
| キー | BACKEND_API_URL |
Code Engineの作成！（フロントエンド）
次のような画面になっていればビルド成功です。
動作の確認方法
デプロイしたtdc-rehorenso-frontendとtdc-rehorenso-backendが動作するかの確認を行います。
- 作成したtdc-rehorenso-frontendのドメインマッピングを選択
- システム・ドメイン・マッピングのパブリックの欄のURLをコピー
- アドレスバーにコピーしたURLを入力
うまくデプロイできていると
うまくデプロイできていると、以下のようにアクセスすることができ、レスポンスも返ってきます！
また、パブリックに公開しているため、URLを入力することで自身のスマートフォンからもアクセスが可能です。
お疲れ様でした！
筆者がつまずいた点
ここでは、Code Engineを使用してデプロイする際に筆者がつまずいた点について解説していきます。
初めてCode Engineを操作する人にも起きる可能性があるため、備忘録としてここに残します。
1. アプリが起動しない（リビジョン失敗と出る）
ビルドは成功したが、添付図のようにリビジョン失敗とでてアプリを起動することができない。
原因
フロントエンドで使用しているポート番号が違う。
以下のようにポートが違うと出ていたため、調べてみたところ
イメージ始動オプションのリスニング・ポートが8080になっているのに対し、ソースコードでは3000と記載していたため、リビジョンができていなかったと判明。
// サーバーの起動
app.listen(3000, () => {
console.log('ポート3000でリクエスト待受中...'); // サーバー起動時のログ
});
解決策
app.jsとDockerfileのポート番号を8080に修正し、再度Code Engineアプリケーションを作成することで起動することができました。
2. ビルドは成功したが、フロントエンドとバックエンドの連携がうまくいかない
frontend、backend共にデプロイ完了し、起動することができたが、バックエンド側からの返答が返ってこない
原因
バックエンドのエンドポイントがhttp://localhost:5000になっていた。
バックエンドのインスタンスを確認したところ、フロントエンド側でリクエストを送信しても、インスタンスがアクティブにならなかったため、リクエストがうまく送信されていないと判明。
また、ソースコードを確認すると、バックエンドに送るリクエストがhttp://localhost:5000となっていたため、正しくリクエストが送信されていないことが分かりました。
try {
const response = await fetch("http://localhost:5000/api/generate", {
解決策
http://localhost:5000を環境変数BACKEND-API-URLに変更。
また、tdc-rehorenso-backendからプライベートのシステム・ドメイン・マッピングのURLを取得し、configmapに登録、tdc-rehorenso-fronrendの環境変数に設定することで解決しました。
try {
const response = await fetch(BACKEND-API-URL, {
プライベートのシステム・ドメイン・マッピングのURLを取得
configmapに登録
まとめ
今回はIBM Cloud Code Engineを使用してWebアプリケーションのデプロイを行いました。
初めてCode Engineを使用してWebアプリケーションのデプロイを行いましたが、実際に手を動かすことでクラウドに関する知識がより一層理解できるようになりました。
今回の記事では初心者の人にも分かるように手順を詳細に記載し、実装の際に出現する単語についても補足の説明をいたしました。クラウドを使用してデプロイをしてみたいという方は、ぜひ今回の記事を参考にしてWebアプリケーションのデプロイに挑戦してみてください。