iis部署前后端分离项目（React前端，Node.js后端）

在现代 web 开发中，前后端分离的架构越来越受到欢迎。其中，React 是一个优秀的前端框架，而 Node.js 则给后端开发带来了高效与灵活性。本文将介绍如何在 IIS 上部署一个前后端分离的项目，包含 React 前端和 Node.js 后端，并提供代码示例。

一、准备工作

在开始之前，请确保您已经安装了以下环境：

1. Node.js：用于后端服务的开发和运行。
2. IIS：Windows 操作系统自带的 web 服务器。
3. npm：Node.js 的包管理工具。
4. React 创建的前端应用：你可以使用 create-react-app 来迅速搭建。

二、React 前端项目的构建

首先，我们来创建一个简单的 React 应用并进行构建。

npx create-react-app my-app
cd my-app

在 src/App.js 中，你可以编写一个简单的组件：

import React from 'react';

function App() {
  return (
    <div>
      <h1>欢迎使用 React 前端</h1>
    </div>
  );
}

export default App;

构建应用：

npm run build

构建完成后，所有的文件都会出现在 build 目录下，你需要将这个目录中的文件部署到 IIS 上。

三、Node.js 后端项目的建立

接着，我们来搭建一个简单的 Node.js 后端。在项目根目录下创建一个 server.js 文件：

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

app.get('/api/message', (req, res) => {
  res.json({ message: '欢迎访问 Node.js 后端' });
});

app.listen(PORT, () => {
  console.log(`服务器正在运行在 http://localhost:${PORT}`);
});

然后，我们需要在项目中安装 Express 和 Cors：

npm init -y
npm install express cors

你可以直接使用 node server.js 命令来启动应用。确保 API 正常工作后，接下来我们就要进行部署。

四、在 IIS 上部署

1. 部署 React 应用

• 打开 IIS，创建一个新的站点，指向 my-app/build 目录。
• 确保已启用静态文件和 URL 重写模块。
• 创建一个 web.config 文件在 build 目录下，内容如下：

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="React 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="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

2. 部署 Node.js 应用

为了将 Node.js 应用部署到 IIS 上、需要使用 IIS Node 模块。在 iisnode 的 GitHub 页面上获取相关的安装和配置说明。

在 IIS 中创建一个新的站点，指向 Node.js 代码的目录。在根目录下创建一个 web.config 文件，内容如下：

<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="NodeJS" stopProcessing="true">
          <match url="server.js" />
          <action type="Rewrite" url="server.js" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

五、测试和调试

• 启动 Node.js 服务器，并确保前端服务运行正常。
• 访问 React 应用，查看 API 调用是否成功，并且前端能够正常显示后端返回的数据。

通过以上步骤，你就可以成功在 IIS 上部署一个前后端分离的项目，利用 React 和 Node.js 的强大能力来构建现代化的 web 应用。随着项目的不断发展，可能会加入更多的功能与优化，例如使用数据库、进行性能调优等。希望这篇文章对你有所帮助！