嘗試將 Vue 應用程式部署到 Azure 應用程式服務，導致錯誤：找不到模組'../package.json”

Question

我有一個簡單的Vue SPA，可以在本地毫無問題地建置和提供服務，但是當我嘗試透過GitHub Actions 建置並部署到Azure 應用程式服務時，它只會導致': ( 應用程式啟動時發生錯誤'頁面。

下面是幾乎預設的工作流程 .yml、應用程式服務配置以及嘗試建立應用程式時的錯誤日誌。

我假設這些檔案是從/home/site/wwwroot 的/dist 資料夾建置的，其中安裝了node_modules 並產生了package.json ..但它好像不是（檢查wwwroot時沒有文件，所以建置失敗？）

任何幫助將不勝感激，我已經為此堅持了一整天，並且很樂意提供更多信息。我還將 NodeJS 後端部署到應用程式服務，沒有太多麻煩，所以我熟悉這個過程 - 只是無法啟動這個前端！

name: Build and deploy Node.js app to Azure Web App - shelf-library

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: dist/

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'shelf-library'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
          package: .

Answer 1

檢查下列步驟以建立 VueJS 並使用 Git Hub 作業部署至 Azure 應用程式服務。

感謝@Anthony Salemo 提供的明確步驟。

在命令提示字元下，執行以下命令來建立 Vue 應用程式。

vue create  myvueapp

導航到應用程式的根目錄cd myvueapp並執行

yarn serve

或

npm run serve

• 執行npm run build指令進行生產建置。 dist資料夾將會被建立。

• 將應用程式推送到 GitHub 儲存庫。 您可以在我的 GitHub 儲存庫中查看可用的程式碼。

我的 GitHub 資料夾結構

• 建立 Azure 應用程式服務

• 導航到您的應用程式服務 =>部署中心並從 GitHub 選擇程式碼儲存庫。

• 最初，當我嘗試訪問該應用程式時，我看到了以下內容頁面。

• 在設定 => 常規設定中新增啟動指令。

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

• 最初我也遇到了同樣的應用程式錯誤。

• 在 Git Hub 中，我可以看到建置和部署作業尚未完成。

• 等待建置部署成功。

我在 KUDU 控制台中部署的資料夾結構

• #現在我可以毫無問題地存取該應用程式了。