在 IIS 中部署 Next Js 项目

Question

我的 project.So 中有服务器端渲染的要求，我使用 next js 开发了它，现在我在部署中得到了结构。

我需要在 iis 中部署我的项目，但不知道如何实现。我尝试了很多没有运气。它在开发模式下运行良好，但在生产模式下运行不佳。

我试过 next export 但这是针对静态页面部署和我的项目使用动态页面。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

我和你有同样的问题，但是到目前为止我已经成功部署并解决了路由问题，但唯一没有解决的是我无法重定向到“NotFound page”（404.js), 也许我们可以一起找到解决办法。

这是当前的解决方案：

文件夹树：

node_modules
public
页
- index.js
- first.js
- two.js
- _error.js
next.config.js
package.json
package.lock.json
README.md

package.json :

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "prod": "next build && next export"
  },
  "dependencies": {
    "next": "9.3.5",
    "react": "16.13.1",
    "react-dom": "16.13.1",
  }
}

next.config.js :

const data = [
    {
        path: '/first'
    },
    {
        path: '/two'
    }
];

module.exports = {
    exportTrailingSlash: true,
     exportPathMap: async function () {
         //you can get route by fetch
         const paths = {
             '/': { page: '/' }
         };

         data.forEach((project) => {
             paths[`${project.path}`] = {
                 page: project.path,
             };
         });
         return paths;
     }
}

index.js :

import Link from 'next/link'
import React from 'react';
import Head from 'next/head'

export default function Home(props) {

  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
        <h1 className="title">
          <Link href="/first">
            <a>page first</a>
          </Link>
          <Link href="/two">
            <a>page two</a>
          </Link>
        </h1>
    </div>
  )
}

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

first.js :

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {

  return (
    <>
      <Head>
        <title>First</title>
      </Head>
      {"First page"}
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>

    </>
  )
}

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

two.js :

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {

  return (
    <>
      <Head>
        <title>two </title>
      </Head>
      {"two page"}
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>

    </>
  )
}

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

然后运行脚本“prod”，你会有/out文件夹，就把它作为IIS的根目录，现在测试路线：

输入URL http://{你的IP或域名}/ =>你会看到index.js
输入URLhttp://{你的IP或域名}/first =>你会看到first.js
输入URL http://{你的 IP 或域}/whatever => 你会从 IIS 得到 404 错误，我需要这里的帮助！

更新回复，终于知道怎么解决了，加web.config重定向到404 errpr页面

注意： // 你可以在这里指定错误页面！

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </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="404/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Answer 2

试试这个 youtube link 它帮助我在 IIS 上部署了 nextjs 应用程序。不要忘记您的服务器上需要 NodeJS、URLRewrite 和 IISNode。

您构建您的 nextjs 应用程序并将其部署到服务器上的 IIS 文件夹。您还需要包含所有依赖项的 node_modules 文件夹，包括 express 和 node。

在 IIS 中部署 Next Js 项目

Deploying Next Js project in IIS

deployment

iis

next.js