Question

我的项目中需要服务器端渲染。因此，我使用下一个js开发了它，现在我可以在部署中使用结构了。

我需要在iis中部署我的项目，并且不知道如何实现。我尝试了很多运气。它在开发模式下工作正常，但在生产中却无法正常工作。

我尝试了next export，但这是用于静态页面部署和我的项目使用动态页面。

任何帮助将不胜感激。预先感谢。

Answer 1

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

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

Answer 2

我和您有相同的问题，但是到目前为止，我已经成功部署并解决了路由问题，但是唯一未解决的问题是我无法重定向到“ NotFound页面”（404.js），也许我们可以一起找到解决方案。

这是当前解决方案：

文件夹树：

node_modules
公开
页
- 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
输入URL http：// {您的IP或域} / first =>您将看到first.js
输入URL http：// {您的IP或域} /无论如何=>您将从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>

在IIS中部署Next Js项目

2 个答案: