Trying to deploy a Vue application to Azure App Service results in error: Module "../package.json" not found
P粉269847997
2023-08-31 13:58:53
<p>I have a simple Vue SPA that builds and serves locally with no issues, but when I try to build and deploy to Azure App Service via GitHub Actions it just results in '<strong>: (An error occurred when the application started '</strong>' page.</p>
<p>Below is the almost default workflow <code>.yml</code>, the application service configuration, and the error log when trying to build the application. </p>
<p>I assume these files are built from the <code>/dist</code> folder of <code>/home/site/wwwroot</code> where node_modules is installed and package.json is generated ..but it doesn't seem to be the case (no files when checking wwwroot, so the build fails?)</p>
<p>Any help would be greatly appreciated, I've been stuck on this all day and would be happy to provide more information. I also deployed the NodeJS backend to the app service without too much trouble, so I'm familiar with the process - just can't get this frontend started! </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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Check the following steps to create
VueJSand deploy to Azure App Service using Git Hub actions.Thanks to @Anthony Salemo for the clear steps.
In the command prompt, run the following command to create a Vue application.
Navigate to the root directory of the application
cd myvueappand runor
Run the
npm run buildcommand for production build.distThe folder will be created.Push the application to the GitHub repository. You can view the available code in my GitHub repository.
My GitHub folder structure
App Service=>Deployment Centerand select the code repository from GitHub.start commandinConfiguration=>General Settings.The folder structure I deployed in the KUDU console