Recently, I encountered an issue while trying to deploy my app that utilizes Next.js on the frontend (including some getStaticProps function) and a custom express/node.js backend on Azure. The backend is connected to MySQL, although I don't believe this is related to the problem at hand. Upon deployment on Azure, I received an error message stating, "You do not have permission to view this directory or page." displayed on the webpage. My express file with all the routes and requests is located in a folder named 'server', and the file itself is called index.js. Additionally, there is a web.config file containing the following configuration:
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="server/index.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="NodeServer" patternSyntax="ECMAScript" stopProcessing="true">
<match url="server/index.js" />
<action type="Rewrite" url="server/index.js" />
</rule>
<rule name="NextJsRouting" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="server/index.js" />
</rule>
</rules>
</rewrite>
<iisnode nodeProcessCommandLine=""C:\Program Files\nodejs\node.exe"" />
</system.webServer>
</configuration>
In addition, there is an iisnode.yml file with the following content:
nodeProcessCommandLine: "node server/index.js"
The contents of the package.json file are as follows:
{
"name": "endelig",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "nodemon server/index.js",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next/font": "13.1.6",
"@stripe/react-stripe-js": "^2.1.0",
"@stripe/stripe-js": "^1.52.0",
"bcrypt": "^5.1.0",
"cookie-parser": "^1.4.6",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"jsonwebtoken": "^9.0.0",
"micro": "latest",
"micro-cors": "latest",
"mysql": "^2.18.1",
"next": "^13.1.6",
"nodemailer": "^6.9.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"stripe": "^11.17.0"
}
}
The jsconfig.js file contains the following:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
I have also set up all the necessary environment variables on the Azure web app. However, despite these efforts, I've been struggling with this issue for a few days now. Any assistance or guidance would be greatly appreciated.
After attempting to deploy it on Azure, encountering the error message "(You do not have permission to view this directory or page)" has left me perplexed.