AzureAppServiceにVueやReactのアプリがうまくデプロイできない問題


はじめに

こんにちは。先日、ハッカソンリーグ2021 -ルーキーリーグというハッカソンに参加してきました。
「azure製品を使いたおして、"ポストコロナの〇〇"をつくりだそう!」というハッカソンです!

シェアハウスの友達と4人でwebサービスを作成し、なんと、優秀賞をいただくことができました!!! 🎉🎉🎉🎉🎉

今回は、サービスを作成するにあたって,デプロイ時にどハマったことを記事にしました。
同じ問題で時間を食い潰される方がでないように祈りを込めて......

要約

  • 表題の問題が出たときは、以下のコマンドを、スタートアップ コマンド に設定しよう
pm2 serve /home/site/wwwroot --no-daemon --spa
# or 
pm2 serve /home/site/wwwroot/build --no-daemon --spa

何が起こったか

  • いつも通りvueプロジェクトを作成、ローカルで動作確認した後、Githubにpush
  • AppServiceのデプロイセンターでGithub Actionを作成
  • Actionの実行履歴を見ると、正常にデプロイができている
  • あれ、デプロイ前と全く変わってないぞ
  • GithubActionの問題かもしれないので、VSCodeのAzureプラグインからデプロイしてみる
  • やっぱりうごかない!初期画面のまま!

どう対処するか

デプロイしているものが悪いのか、デプロイ先が悪いのかと、dist(build後)のフォルダのみを対象にしたりしてみましたが、全くうまくいかず、調べまくってたところ、StackOverFlowに似た内容の質問を発見しました。

これによると、pm2(Node.jsアプリのプロセス管理)を、スタートアッププロセス中に実行するといいとのことでした。

自分はdistのみをデプロイする設定にしていたため、以下のコマンドをスタートアップコマンドに設定しました。

pm2 serve /home/site/wwwroot --no-daemon --spa

設定後、ポータルから再起動することで、無事アプリが起動しました!!! 🎉🎉🎉🎉🎉

おわりに

ありがとうございました!

本当は、ハッカソンで〇〇やりました!とか感想とか書こうかなと思ったのですが、
まぁまぁありふれている内容なので、純粋に自分が困った部分を書くことにしました。

ただ、せっかくなので、ハッカソンで何を作ったかをほんのちょっとだけ紹介しておきます。

何のために、何を、どうやって作ったか

  • 存在することで他の人の居心地を良くする人っていいよね
  • その人たちが何らかの形で得をするような状態を作り出せたらいいよねという思想のもと、
  • 他者の笑顔を作成することにポイントを付与・確認するシステムを、
  • 定期的に写真を撮り、写っている人の幸せそうかどうかを中心とする感情値を分析/保存するという手法で、
  • azureサービス(AppService, Functions, FaceAPI),ラズパイ,webカメラを利用して作りました。

以上!!! ProtoPediaはこちら (デザインがひどい、説明文が少ないのは仕様です)