嘗試將 Vue 應用程式部署到 Azure 應用程式服務，導致錯誤：找不到模組'../package.json”
P粉269847997
2023-08-31 13:58:53
<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>
檢查下列步驟以建立
VueJS並使用 Git Hub 作業部署至 Azure 應用程式服務。感謝@Anthony Salemo 提供的明確步驟。
在命令提示字元下，執行以下命令來建立 Vue 應用程式。
導航到應用程式的根目錄
cd myvueapp並執行或
執行
npm run build指令進行生產建置。dist資料夾將會被建立。將應用程式推送到 GitHub 儲存庫。 您可以在我的 GitHub 儲存庫中查看可用的程式碼。
我的 GitHub 資料夾結構
應用程式服務=>部署中心並從 GitHub 選擇程式碼儲存庫。設定=>常規設定中新增啟動指令。我在 KUDU 控制台中部署的資料夾結構