Cuba untuk menggunakan aplikasi Vue ke Azure App Service mengakibatkan ralat: Modul "../package.json" tidak ditemui

Question

Saya mempunyai Vue SPA ringkas yang membina dan berkhidmat secara tempatan tanpa sebarang masalah, tetapi apabila saya cuba membina dan menggunakan perkhidmatan Azure App Service melalui GitHub Actions, ia hanya mengakibatkan ': (Ralat berlaku apabila permohonan bermula halaman ''.

Di bawah ialah aliran kerja hampir lalai .yml, konfigurasi perkhidmatan aplikasi dan log ralat semasa cuba membina aplikasi.

Saya menganggap fail ini dibina daripada folder /dist /home/site/wwwroot tempat node_modules dipasang dan package.json dijana .. tetapi nampaknya tidak begitu (tiada fail semasa menyemak wwwroot, jadi binaan gagal?)

Sebarang bantuan amat kami hargai, saya telah terperangkap dalam perkara ini sepanjang hari dan berbesar hati untuk memberikan maklumat lanjut. Saya juga menggunakan bahagian belakang NodeJS ke perkhidmatan aplikasi tanpa terlalu banyak masalah, jadi saya sudah biasa dengan prosesnya - saya tidak dapat memulakan bahagian hadapan ini!

name: Bina dan gunakan apl Node.js ke Apl Web Azure - perpustakaan rak

pada:
  tolak:
    cawangan:
      -utama
  workflow_dispatch:

pekerjaan:
  membina:
    runs-on: ubuntu-latest

    langkah-langkah:
      - kegunaan: actions/checkout@v2

      - nama: Sediakan versi Node.js
        kegunaan: actions/setup-node@v1
        dengan:
          versi nod: '16.x'

      - nama: npm memasang, membina dan menguji
        lari: |
          pemasangan npm
          npm run build --if-present

      - nama: Muat naik artifak untuk kerja penempatan
        kegunaan: actions/upload-artifact@v2
        dengan:
          nama: node-app
          laluan: dist/

  gunakan:
    runs-on: ubuntu-latest
    keperluan: membina
    persekitaran:
      nama: 'Pengeluaran'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    langkah-langkah:
      - nama: Muat turun artifak daripada kerja binaan
        kegunaan: tindakan/muat turun-artifak@v2
        dengan:
          nama: node-app

      - nama: 'Kerahkan ke Apl Web Azure'
        id: deploy-to-webapp
        menggunakan: azure/webapps-deploy@v2
        dengan:
          nama-apl: 'rak-perpustakaan'
          nama slot: 'Pengeluaran'
          terbitkan-profil: ${{ rahsia.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
          pakej: .

Answer 1

Semak langkah berikut untuk membuat VueJS dan gunakan ke Azure App Service menggunakan tindakan Git Hub.

Terima kasih kepada @Anthony Salemo atas langkah yang jelas.

Dalam gesaan arahan, jalankan arahan berikut untuk mencipta aplikasi Vue.

vue create  myvueapp

Navigasi ke direktori akar aplikasi cd myvueapp dan jalankan

yarn serve

atau

npm run serve

• Runnpm run build命令进行生产构建。distFolder akan dibuat.

• Tolak aplikasi ke repositori GitHub. Anda boleh melihat kod yang tersedia dalam repositori GitHub saya.

Struktur folder GitHub saya

• Buat Perkhidmatan Apl Azure

• Navigasi ke 应用服务 =>部署中心 anda dan pilih repositori kod daripada GitHub.

• Pada mulanya apabila saya cuba mengakses aplikasi, saya melihat halaman kandungan berikut.

• dalam配置 => 常规设置中添加启动命令.

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

• Pada mulanya saya mengalami ralat apl yang sama.

• Dalam Hab Git, saya dapat melihat bahawa operasi binaan dan penggunaan masih belum lengkap.

• Tunggu penggunaan binaan berjaya.

Struktur folder yang saya gunakan dalam konsol KUDU

• Kini saya boleh mengakses aplikasi tanpa sebarang masalah.