搜尋

首頁  >  問答  >  主體

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

<p>我有一個簡單的Vue SPA,可以在本地毫無問題地建置和提供服務,但是當我嘗試透過GitHub Actions 建置並部署到Azure 應用程式服務時,它只會導致'<strong>: ( 應用程式啟動時發生錯誤</strong>'頁面。</p> <p>下面是幾乎預設的工作流程 <code>.yml</code>、應用程式服務配置以及嘗試建立應用程式時的錯誤日誌。 </p> <p>我假設這些檔案是從<code>/home/site/wwwroot</code> 的<code>/dist</code> 資料夾建置的,其中安裝了node_modules 並產生了package.json ..但它好像不是(檢查wwwroot時沒有文件,所以建置失敗?)</p> <p>任何幫助將不勝感激,我已經為此堅持了一整天,並且很樂意提供更多信息。我還將 NodeJS 後端部署到應用程式服務,沒有太多麻煩,所以我熟悉這個過程 - 只是無法啟動這個前端! </p> <pre class="brush:php;toolbar:false;">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: .</pre>
P粉269847997P粉269847997559 天前637

全部回覆(1)我來回復

  • P粉986028039

    P粉9860280392023-09-01 09:17:43

    檢查下列步驟以建立 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 控制台中部署的資料夾結構

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

    回覆
    0
  • 取消回覆