个人中心
gpt4 book ai didi

node.js - 将 NextJs 托管到 IIS

转载 作者：行者123 更新时间：2023-12-04 17:39:59 26 4
gpt4 key购买 nike

美好的一天!

我的同事有一个网站 node.js (next.js)，当我们通过控制台(npm run build 和 npm start)构建和启动时，他的网站工作正常。

我们将其托管在 Azure VM(安装了 Windows Server 2016 IIS、iisnode 和 urlrewrite)中，我们创建了一个管道并且我们能够获取工件(运行构建时的“.next”文件夹)并部署它到 IIS，但是我们仍然需要手动交互来放置 web.config。下面是 web.config

<!-- indicates that the hello.js file is a node.js application 
to be handled by the iisnode module -->

<handlers>
  <add name="iisnode" path="service-worker.js" verb="*" modules="iisnode" />
</handlers>

<!-- use URL rewriting to redirect the entire branch of the URL namespace
to hello.js node.js application; for example, the following URLs will 
all be handled by hello.js:

    http://localhost/node/express/myapp/foo
    http://localhost/node/express/myapp/bar

-->

<rewrite>
  <rules>
    <rule name="AMS" 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="/" />
    </rule>
  </rules>
</rewrite>

但是当我们访问该网站时，它会抛出 403 错误，需要提供默认页面。 (我在这里迷路了，无法通过 IIS 运行他的网站)

注意:他的其他网站运行良好(因为它有一个 service-worker.js)。

有人体验过将 Next.JS 部署到 IIS 吗？提前致谢。

最佳答案

在/public 文件夹中，创建以下 web.config 以接受来自/a/b/c 的请求并将它们重写到/我们的 NextJs 代码所在的位置。

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="NextJs Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                            
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

只是这样做应该允许您在/products 之类的路由上重新加载页面，但 NextJs 将呈现/，即索引页面，因为这是我们的重写规则告诉它要交付的内容。

因此，我们需要创建一个将 NextRouter 作为 prop 的主体组件，然后将窗口的 url 与路由器的 url 进行比较。如果它们不匹配，我们需要使用 router.push() 更改我们的客户端路由。

我正在使用 TypeScript，所以我的 body.tsx 是

import * as React from 'react';
import { NextRouter } from 'next/router';

export default class Body extends React.Component<{router : NextRouter}>
{    
    componentDidMount()
    {        
        if (window.location.pathname == this.props.router.pathname) return;
        
        this.props.router.push(global.window.location.pathname);        
    }

    render = () => this.props.children;                
}

然后在 _app.tsx 中，我们只需要将主要组件包装在我们的 Body 组件中。

import { useRouter } from 'next/router'
import Head from 'next/head';
import Body from '../src/components/elements/body';

function MyApp({ Component, pageProps }) {

    const router = useRouter();        
        
    return (
        <>
            <Head>                
                <title>NextJs on IIS</title>
            </Head>

            <Body router={router}>                                
                <Component {...pageProps} />                                
            </Body>
        </>
    )
}

export default MyApp

运行 npm run build，并将/out 文件夹复制到您的 IIS 服务器。

关于node.js - 将 NextJs 托管到 IIS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54965069/

26 4 0
文章推荐： reactjs - 对表进行 react 排序
文章推荐： apache-spark - 将 jar 动态加载到 Jupyter 笔记本中的 Spark 驱动程序
文章推荐： node.js - 解析 block 映射时未找到预期的键
文章推荐： javascript - 如何以编程方式清除 postman 的控制台
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com