Next.js 在 IIS 生产中抛出 404

Question

我使用自定义服务器设置了一个新的 Next.js 应用程序（不进行任何更改），并将构建的项目上传到 IIS。它在本地使用

npm run start

工作，但在 IIS 上，它会抛出以下错误：

Refused to execute script from 'https://server_name/_next/static/chunks/webpack-12345asdf.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Refused to execute script from 'https://server_name/_next/static/chunks/framework-12345asdf.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Refused to execute script from 'https://server_name/_next/static/chunks/main-7477d36a73a3487c.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

对于 _app.js、_error.js、buildManifest.js 和 ssgManifest.js 文件也是如此。

我没有更改任何生成的文件，例如

next.config.js

或页面目录中的任何内容，并且我没有使用实验应用程序目录。

这是我的

server.js

文件，位于根目录中：

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

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = process.env.PORT || 3000

const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    createServer(async (req, res) => {
        try {
            const parsedUrl = parse(req.url, true)
            const { pathname, query } = parsedUrl

            if (pathname === '/a') {
                await app.render(req, res, '/a', query)
            } else if (pathname === '/b') {
                await app.render(req, res, '/b', query)
            } else {
                await handle(req, res, parsedUrl)
            }
        } catch (err) {
            console.error('Error occurred handling', req.url, err)
            res.statusCode = 500
            res.end('internal server error')
        }
    })
        .once('error', (err) => {
            console.error(err)
            process.exit(1)
        })
        .listen(port, () => {
            console.log(`> Ready on http://${hostname}:${port}`)
        })
})

这是我的

web.config

，也在根目录中：

<configuration>
    <system.webServer>
        <webSocket enabled="false" />
        <rewrite>
            <rules>
                <rule name="static assets" stopProcessing="true">
                    <match url="([\S]+[.]((html?)|(svg)|(js)|(css)|(png)|(gif)|(jpe?g)|(json)))" />
                </rule>
                <rule name="reactRouter routes" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/{R:1}.html" />
                </rule>

                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}" />
                </rule>

                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
                    </conditions>
                    <action type="Rewrite" url="server.js" />
                </rule>
                <rule name="module" stopProcessing="true">
                    <match url="modules/*" />
                    <action type="Rewrite" url="{REQUEST_URI}" />
                </rule>
                <rule name="node_module" stopProcessing="true">
                    <match url="node_modules/*" />
                    <action type="Rewrite" url="{REQUEST_URI}" />
                </rule>
                <rule name="public" stopProcessing="true">
                    <match url="public/*" />
                    <action type="Rewrite" url="{REQUEST_URI}" />
                </rule>
                <rule name="files" stopProcessing="true">
                    <match url="files/*" />
                    <action type="Rewrite" url="{REQUEST_URI}" />
                </rule>

                <rule name="sendToNode">
                    <match url="/*" />
                    <action type="Rewrite" url="server.js" logRewrittenUrl="true" />
                </rule>
            </rules>
        </rewrite>
        <httpErrors existingResponse="PassThrough" />
        <iisnode node_env="production" />
        <security>
            <requestFiltering>
                <fileExtensions>
                    <add fileExtension=".ico" allowed="true" />
                    <add fileExtension=".svg" allowed="true" />
                </fileExtensions>
            </requestFiltering>
        </security>
    </system.webServer>
</configuration>

我已经研究了我可以在网上找到的所有文档和教程，但没有找到解决方案。

Answer 1

这是 IIS 问题。

自从 1998 年第一次遇到这个问题以来，2023 年我感到很惊讶！

无论如何。

IIS 控件中的某个位置可以进行 MIME 类型映射。

https://learn.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap

上面的链接可能适用于您的 IIS 版本，您可能需要四处寻找。

从历史上看，我认为这是因为 MS 更多地依赖类型的文件扩展名。