Vue アプリケーションを Azure App Service にデプロイしようとすると、エラーが発生します: モジュール "../package.json" が見つかりません

Question

問題なくローカルでビルドして提供できるシンプルな Vue SPA を持っていますが、GitHub Actions 経由でビルドして Azure App Service にデプロイしようとすると、「」という結果になります (アプリケーションが「」ページを開始しました。

以下は、ほぼデフォルトのワークフロー .yml、アプリケーション サービス構成、およびアプリケーションをビルドしようとしたときのエラー ログです。

これらのファイルは、node_modules がインストールされ package.json が生成される /home/site/wwwroot の /dist フォルダーからビルドされると思います。しかし、そうではないようです (wwwroot をチェックするとファイルがないため、ビルドが失敗しますか?)

どんな助けでも大歓迎です。私は一日中この問題で立ち往生しており、さらに詳しい情報を提供させていただきます。 NodeJS バックエンドもそれほど問題なくアプリ サービスにデプロイしたので、プロセスには慣れていますが、このフロントエンドを開始することができません。

name: Node.js アプリをビルドして Azure Web アプリにデプロイする - シェルフ ライブラリ

の上：
  押す：
    支店:
      - 主要
  ワークフロー_ディスパッチ:

仕事:
  建てる：
    実行: ubuntu-最新

    手順:
      - 使用:actions/checkout@v2

      - 名前: Node.js バージョンのセットアップ
        使用:actions/setup-node@v1
        と：
          ノードバージョン: '16.x'

      - 名前: npm インストール、ビルド、テスト
        実行: |
          npmインストール
          npm run build --if-present

      - 名前: デプロイメント ジョブのアーティファクトのアップロード
        使用:actions/upload-artifact@v2
        と：
          名前: ノードアプリ
          パス: dist/

  展開する：
    実行: ubuntu-最新
    ニーズ: 構築
    環境：
      名前：「プロダクション」
      URL: ${{ ステップ.deploy-to-webapp.outputs.webapp-url }}

    手順:
      - 名前: ビルド ジョブからアーティファクトをダウンロード
        使用:actions/download-artifact@v2
        と：
          名前: ノードアプリ

      - 名前: 「Azure Web アプリにデプロイ」
        ID: Web アプリにデプロイ
        使用: azure/webapps-deploy@v2
        と：
          アプリ名: 'シェルフ ライブラリ'
          スロット名: 'プロダクション'
          公開プロファイル: ${{ Secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
          パッケージ: .

Answer 1

次の手順を確認して、VueJS を作成し、Git Hub アクションを使用して Azure App Service にデプロイします。

@Anthony Salemo の明確な手順に感謝します。

コマンド プロンプトで次のコマンドを実行して Vue アプリケーションを作成します。

リーリー

アプリケーション cd myvueapp のルート ディレクトリに移動し、

を実行します。 リーリー

＃＃＃＃＃＃＃＃＃または＃＃＃＃＃＃＃＃＃ リーリー

実稼働ビルドに対して

npm run build

コマンドを実行します。

dist

フォルダーが作成されます。

• アプリケーションを GitHub リポジトリにプッシュします。 利用可能なコードは、私の GitHub リポジトリ でご覧いただけます。

• 私の GitHub フォルダー構造

Azure App Serviceを作成する

App Service

=>

デプロイメント センター

に移動し、GitHub からコード リポジトリを選択します。

• 最初にアプリにアクセスしようとすると、次のコンテンツ ページが表示されました。

• 構成

=>

一般設定

に

開始コマンド
• を追加します。 リーリー 最初は同じアプリケーションエラーが発生しました。

• Git Hub では、ビルドとデプロイの操作がまだ完了していないことがわかります。

• ビルドとデプロイが成功するまで待ちます。

• KUDU コンソールにデプロイしたフォルダー構造

これで問題なくアプリにアクセスできるようになりました。