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プラグインからデプロイしてみる
- やっぱりうごかない!初期画面のまま!
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はこちら (デザインがひどい、説明文が少ないのは仕様です)
Author And Source
この問題について(AzureAppServiceにVueやReactのアプリがうまくデプロイできない問題), 我々は、より多くの情報をここで見つけました https://qiita.com/d-nakajima/items/d11e2c16794e9c46db9b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .