Trying to deploy this barebones Nextjs app into an Azure Web App (from GitHub Actions) I get the following exception at runtime:
Error: Cannot find module '../server/require-hook'
Ok
2024-07-13T05:21:05.27594
Require stack:
Ok
2024-07-13T05:21:05.2759785
- /home/site/wwwroot/node_modules/.bin/next
Ok
2024-07-13T05:21:05.2759846
at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
Ok
2024-07-13T05:21:05.275989
at Module._load (node:internal/modules/cjs/loader:986:27)
Ok
2024-07-13T05:21:05.2759931
at Module.require (node:internal/modules/cjs/loader:1233:19)
Ok
2024-07-13T05:21:05.2759972
at Module.patchedRequire (/agents/nodejs/node_modules/diagnostic-channel/dist/src/patchRequire.js:16:46)
Ok
2024-07-13T05:21:05.2760016
at Hook._require.Module.require (/agents/nodejs/node_modules/require-in-the-middle/index.js:167:34)
Ok
2024-07-13T05:21:05.276006
at require (node:internal/modules/helpers:179:18)
Ok
2024-07-13T05:21:05.27601
at Object.<anonymous> (/home/site/wwwroot/node_modules/.bin/next:6:1)
Ok
2024-07-13T05:21:05.2760147
at Module._compile (node:internal/modules/cjs/loader:1358:14)
Ok
2024-07-13T05:21:05.2760187
at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
Ok
2024-07-13T05:21:05.2760226
at Module.load (node:internal/modules/cjs/loader:1208:32) {
Ok
2024-07-13T05:21:05.2760349
code: 'MODULE_NOT_FOUND',
Ok
2024-07-13T05:21:05.2760387
requireStack: [ '/home/site/wwwroot/node_modules/.bin/next' ]
Ok
2024-07-13T05:21:05.2760428
}
The deployment works if done via VSCode with the Azure Extensions but I need it to be automated via GitHub Actions.
The deployment file is the default one Azure provides when setting up the continuous integration. Any ideas how to fix it?
My yml in case you don't want to open the link:
# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions
name: Build and deploy Node.js app to Azure Web App - nextjs-az-template
on:
push:
branches:
- master
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Node.js version
uses: actions/setup-node@v3
with:
node-version: '20.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
- name: Zip artifact for deployment
run: zip release.zip ./* -r
- name: Upload artifact for deployment job
uses: actions/upload-artifact@v4
with:
name: node-app
path: release.zip
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@v4
with:
name: node-app
- name: Unzip artifact for deployment
run: unzip release.zip
- name: 'Deploy to Azure Web App'
id: deploy-to-webapp
uses: azure/webapps-deploy@v3
with:
app-name: 'nextjs-az-template'
slot-name: 'Production'
package: .
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_FB5C5356BD1A48A79DF07D1243712E42 }}
I tried your code and deployed to the Azure App service through GitHub and it successful.
Thank you @Azure OSS Developer Support, for Clearly explanation.
code: 'MODULE_NOT_FOUND'
"start": "node_modules/next/dist/bin/next start",
package.json:
{
"name": "nextjs-az-webapp-template",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "node_modules/next/dist/bin/next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.5"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.5"
}
}
- name: Zip artifact for deployment
run: zip next.zip ./* .next -qr
.github/workflows:
name: Build and deploy Node.js app to Azure Web App - kanextjsapp1
on:
push:
branches:
- main
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Node.js version
uses: actions/setup-node@v3
with:
node-version: '18.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
- name: Zip artifact for deployment
run: zip next.zip ./* .next -qr
- name: Upload artifact for deployment job
uses: actions/upload-artifact@v4
with:
name: node-app
path: next.zip
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@v4
with:
name: node-app
- name: Unzip artifact for deployment
run: unzip next.zip
- name: 'Deploy to Azure Web App'
id: deploy-to-webapp
uses: azure/webapps-deploy@v3
with:
app-name: 'kanextjsapp1'
slot-name: 'Production'
package: next.zip
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_<AzureKey> }}
It is Successful deployed through GitHub as shown below.
Azure App Service Output: