在IIS中部署Next Js项目

Question

我的项目中有服务器端渲染的需求。所以，我使用 next js 开发了它，现在我在部署中得到了结构。

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

我尝试过

next export

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

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

Answer 1

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

这是当前的解决方案：

文件夹树：

节点模块
公开
页数
- index.js
- first.js
- two.js
- _错误.js
next.config.js
package.json
package.lock.json
自述文件.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 或域名}/whatever => 您将从 IIS 收到 404 错误，我需要这里的帮助！

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

note: // 您可以在这里指定错误页面！

<?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

使用此链接并按照说明进行操作“https://medium.com/codenp/deploying-nextjs-application-on-windows-iis-server-cabdc22bccf8”。

在IIS中部署Next Js项目

问题描述投票：0回答：2

2个回答

最新问题

在IIS中部署Next Js项目

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2