使用 React-Router 和 Express 后端部署 React 应用
创建 Express 应用后端
创建 React 应用
部署到 Heroku
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
本文将介绍如何使用 React-Router 进行路由，并使用 Express 作为后端，创建一个 React 应用。之后，我们将把它部署到 Heroku。本教程提供了一种简单的方法来设置 API，以便在创建 React 应用的同时快速更新和测试。它也可能对 React 新手有所帮助。实现此目标的方法有很多，但我介绍的是我最熟悉的一种非常简单的方法。如果您有其他方法，或者我犯了任何错误，请随时告诉我。
使用的技术：
- Express.JS
- React.JS
- React-Router
创建 Express 应用后端
要开始设置我们的应用程序，需要先安装 node.js 和 npm。
首先，我们需要创建一个父目录，名称可以随意。这里我们将其命名为 react-express-example。
mkdir react-express-example
cd react-express-example
使用 npm 初始化项目：
npm init -y
安装 express 软件包：
npm add express
创建一个名为 index.js 的文件，并输入以下代码，这将构成一个最基本的 Express 应用程序。
const express = require('express');
const path = require('path');
const app = express();
// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));
// An api endpoint that returns a short list of items
app.get('/api/getList', (req,res) => {
var list = ["item1", "item2", "item3"];
res.json(list);
console.log('Sent list of items');
});
// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
res.sendFile(path.join(__dirname+'/client/build/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port);
console.log('App is listening on port ' + port);
我们调用 `express()` 来创建 Express 应用，该应用由对象 `app` 表示。然后，我们创建一个方法来处理对 `/api/getList` 的 GET 请求，该方法会返回一个包含项目列表的 JSON 响应。稍后，我们将从 React 应用中调用此方法。
在 package.json 文件中添加一个脚本，以便应用部署到相应的服务器后能够自动启动。我通常会将示例项目部署在 Heroku 上。
{
"name": "react-express-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3"
}
}
测试我们的 Express 服务器
此时我们可以测试我们的 Express 应用，以确保目前为止一切正常。
使用上面创建的脚本运行 Express 应用程序：
npm start
打开http://localhost:5000/api/getList，您应该会看到以下内容：
创建 React 应用
如果您尚未安装 Create-React-App，请运行以下代码：
npm install -g create-react-app
下一步是创建实际的 React 应用，我们将把它放在 client 文件夹中。我们将通过在项目目录中运行以下命令来完成此操作：
create-react-app client
在客户端文件夹内运行 `npm start` 命令后，即可在http://localhost:3000/访问基本的 React 应用。如果您决定将其命名为 `client` 以外的名称，则需要修改 Express 文件，因为它默认指向 `client/build` 目录。
为了使我们的 React 应用能够将 API 请求代理到我们上面创建的 Express 应用，我们需要修改client/package.json文件。具体做法是添加以下代码行："proxy": " http://localhost:5000 "
client/package.json：
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
添加 React-Router
在这里，我们将向项目中添加 React-Router，并创建两个页面，Home.js 和 List.js。
如果您选择不使用 React-Router，请跳至“调用我们的 Express 应用”部分。我之前在搭建一个简单的实现时遇到了一些问题，因此我将其包含在了本教程中。
为我们的 React 项目安装以下软件包：
npm install -g react-router-dom
将以下代码插入到 /client/src/index.js 文件中：
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App/App';
render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById('root'));
将以下代码插入到 /client/src/App.js 文件中：
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
import List from './pages/List';
class App extends Component {
render() {
const App = () => (
<div>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/list' component={List}/>
</Switch>
</div>
)
return (
<Switch>
<App/>
</Switch>
);
}
}
export default App;
在这段代码中，我们创建了首页和列表显示页面的路由。接下来，我们需要创建这些页面。
读了 Alexis Mangin 的一篇文章后，我开始按照他描述的方式构建我的 React 项目。现在，我建议你重新组织项目，使其与下图所示一致。
在 src/App/pages 目录下创建 Home.js 文件，并包含以下代码：
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Home extends Component {
render() {
return (
<div className="App">
<h1>Project Home</h1>
{/* Link to List.js */}
<Link to={'./list'}>
<button variant="raised">
My List
</button>
</Link>
</div>
);
}
}
export default Home;
我们创建了一个按钮，该按钮将链接到 List.js。
拨打我们的 Express 应用程序
在 src/App/pages 目录下创建 List.js 文件，并包含以下代码：
import React, { Component } from 'react';
class List extends Component {
// Initialize the state
constructor(props){
super(props);
this.state = {
list: []
}
}
// Fetch the list on first mount
componentDidMount() {
this.getList();
}
// Retrieves the list of items from the Express app
getList = () => {
fetch('/api/getList')
.then(res => res.json())
.then(list => this.setState({ list }))
}
render() {
const { list } = this.state;
return (
<div className="App">
<h1>List of Items</h1>
{/* Check to see if any items are found*/}
{list.length ? (
<div>
{/* Render the list of items */}
{list.map((item) => {
return(
<div>
{item}
</div>
);
})}
</div>
) : (
<div>
<h2>No List Items Found</h2>
</div>
)
}
</div>
);
}
}
export default List;
测试我们的最终应用程序
此时项目应该已经启动并运行。要测试项目，请分别从项目根目录和客户端目录运行 `npm start` 命令。从首页选择“我的列表”后，我们应该可以看到来自 Express 服务器的三个项目。
部署到 Heroku
在上传到 Heroku 之前，我们需要确定如何构建客户端代码。Express 指向 client/build 目录，但在构建 React 应用之前，我们并没有这个目录。借助 Heroku，我们可以添加一个 heroku-postbuild 脚本，这样在推送代码之后，React 应用就会自动构建，而无需上传编译后的代码。
编辑父目录中的 package.json 文件，并添加以下脚本（不是 /client/package.json）：
"scripts": {
"start": "node index.js",
"heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
}
Heroku 现在将进入客户端目录，并为我们创建 React 应用的生产版本。
如果您已经安装了 Heroku 工具包，部署就非常简单，只需运行以下命令即可：
git init
git add .
git commit -m "Initial commit"
heroku create
git push heroku master