What's the proper way to host Nuxt.js web app on IIS?

Question

I use IIS in Windows to run several web page servers. And this time, I studied Nuxt.js. Build a project created with Nuxt.js using the "npm run build" command. I know that if you go into that folder and "npm run dev", the server opens on port 3000. At this time, instead of "http://example.com:3000" on the web browser, I would like to launch the service through "http://example.com". How shall I do it?

1. Is there a way to set it up in IIS Manager?
2. If not, should we consider a new web server instead of IIS?
3. If not, is there a way to set it up in Nuxt.js?

I tried the HTTP redirection feature in IIS Manager, but I could not get the desired result.

Answer 1

With HttpPlatformHandler you can easily host Nuxt.js web apps on IIS, but changes to your project are required as below,

Nuxt 2.x

The official guide to host Nuxt 2.x for Azure App Service (Windows) shows the general hints,

1. Create server\index.js.
2. Modify nuxt.config.js.

but it misses important steps,

• You must add express and nuxt-start as dependencies (check your package.json).
• Change const nuxt = await loadNuxt(isDev ? 'dev' : 'start') to simply const nuxt = await loadNuxt('start'), as isDev isn’t defined anywhere.

Then your web.config should look similar to,

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <handlers>
            <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" requireAccess="Script" />
        </handlers>
        <httpPlatform stdoutLogEnabled="true" stdoutLogFile=".\node.log" startupTimeLimit="20" processPath="C:\Users\<user name>\AppData\Roaming\nvm\v16.13.2\node.exe" arguments=".\server\index.js">
            <environmentVariables>
                <environmentVariable name="PORT" value="%HTTP_PLATFORM_PORT%" />
                <environmentVariable name="NODE_ENV" value="Production" />
            </environmentVariables>
        </httpPlatform>
    </system.webServer>
</configuration>

Note that iisnode mentioned in that Nuxt.js guide is no longer maintained, and only HttpPlatformHandler is recommended.

Note that rewrite rules in official guide were not added as the minimal sample project does not require them, but you can add them for your project if needed.

Nuxt 3.0

The steps are simplified,

npx nuxi init test-nuxt
cd test-nuxt
npm install
npm run build

with web.config,

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <handlers>
            <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" requireAccess="Script" />
        </handlers>
        <httpPlatform stdoutLogEnabled="true" stdoutLogFile=".\node.log" startupTimeLimit="20" processPath="C:\Users\<user name>\AppData\Roaming\nvm\v16.13.2\node.exe" arguments=".output\server\index.mjs">
            <environmentVariables>
                <environmentVariable name="PORT" value="%HTTP_PLATFORM_PORT%" />
                <environmentVariable name="NODE_ENV" value="Production" />
            </environmentVariables>
        </httpPlatform>
    </system.webServer>
</configuration>

Reference

• My blog post on Nuxt 2.x
• My blog post on Nuxt 3.0
• Nuxt.js for Azure guide

Answer 2

If you want to access the website on port 3000 by entering "http://example.com" in the browser address bar, you can do it through IIS reverse proxy.

First of all, you need to install URL Rewrite module and ARR module on IIS.

Then you need to double-click the Application Request Routing Cache on the server level, and select "Server Proxy Settings" on the right tree node, check "Enable Proxy" and apply.

According to your description, you need to have two websites on your IIS, one is the default website (port 80), and the other is the application website you deployed to IIS (port 3000). Next you need to create a rewrite rule on the default website, as follows:

<rewrite>
    <rules>
        <rule name="test" stopProcessing="true">
            <match url="(.*)" />
            <action type="Rewrite" url="http://example.com:3000/{R:1}" />
        </rule>
    </rules>
</rewrite>

By the above method, you can access your application through the URL: "http://example.com".

Answer 3

I am using Nuxt 3.x version and I am following the documentation "Using IIS" to deploy my application. However, I am not sure where I made a mistake as it keeps showing a 404 Page not found error.

enter image description here

enter image description here