How to fix you do not have permission to view this directory or page

Question

Hi, I am trying to deploy a nextjs fullstack app using the web app service and I am getting this error? "You do not have permission to view this directory or page." when I clink on the URL link provided by Azure. How can I resolve this error? Thanks

Answer 1

Hello @IE,

We are sorry to hear you're facing this issue. can you please share the full error message and the Azure tutorial you are following?

Here are a few things you can try to resolve the "You do not have permission to view this directory or page" error when deploying a Next.js app to Azure Web App Service:

1. Check the permissions on the App Service. Make sure the identity you are using to deploy has read/write access. You can check under Access Control in the portal.
2. Enable Detailed Error Messages. This can be done in the Azure portal by going to App Services -> Your Web App -> App Service logs. Turn on Detailed Error Messages or all of the logging options
3. Check that your Next.js app is building correctly and generating the static pages in the .next folder. The Web App service needs those static pages to serve the app.
4. Make sure you are deploying the .next folder along with your source code to Azure. The Web App service looks for the .next folder to run the Next.js app.
5. In your next.config.js file, set the output option to next-azure. This will optimize the build for Azure Web App service.
6. In the Azure portal, go to the Configuration section of your Web App and make sure your build settings are correct. Set the build mode to Next.js if it's not already.
7. Restart the Web App instance after deploying code changes. The new .next folder may not be picked up until a restart. Hope that helps. -Grace

Answer 2

This helped me. Hope it helps you.

Add this to your web.config in the root of your project

<configuration>
  <system.webServer>

    <!-- indicates that the server.js file is a node.js application 
    to be handled by the iisnode module -->
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>

    <!-- adds server.js to the default document list to allow 
    URLs that only specify the application root location, 
    e.g. http://mysite.azurewebsites.net/ -->
    <defaultDocument enabled="true">
      <files>
        <add value="server.js" />
      </files>
    </defaultDocument>

    <!-- Ensure all errors are sent to the node.js application for better error handling -->
    <httpErrors existingResponse="PassThrough" />

    <!-- Ensure the Node.js application can handle all URLs -->
    <rewrite>
      <rules>
        <rule name="NodeJS" stopProcessing="true">
          <match url="/*" />
          <action type="Rewrite" url="server.js" />
        </rule>
      </rules>
    </rewrite>

  </system.webServer>
</configuration>

create a server.js file and add the code below

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(process.env.PORT || 3000, (err) => {
    if (err) throw err;
    console.log("> Ready on http://localhost:3000");
  });
});

finally in your package.json, edit your start script

 "start": "node server.js"