4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Linkbal(リンクバル)Advent Calendar 2021

Day 10

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

Last updated at Posted at 2021-12-10

はじめに

こんにちは。先日、ハッカソンリーグ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の実行履歴を見ると、正常にデプロイができている
  • あれ、デプロイ前と全く変わってないぞ :thinking: :thinking: :thinking: :thinking:
  • GithubActionの問題かもしれないので、VSCodeのAzureプラグインからデプロイしてみる
  • やっぱりうごかない!初期画面のまま! :thumbsdown: :thumbsdown: :thumbsdown: :thumbsdown:

スクリーンショット 2021-12-10 21.17.18.png

どう対処するか

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

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

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

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

スクリーンショット 2021-12-11 0.29.39.png

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

スクリーンショット 2021-12-11 0.27.57.png

おわりに

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

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

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

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

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

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

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?