使用ExpressJS正确部署ReactJS

是的,这只是有关部署ReactJS应用程序的另一篇文章。

我不得不写这篇文章。
我四个月前开始使用ReactJS进行开发,并且发现整个过程中最令人沮丧的部分是部署最终产品

在过去的两个月中,我尝试了BabelWebpack和其他出色的工具,但是我发现` create-react-app`是开始使用该出色库的最佳方法。 这就是我的出发点。

我有一个基于create-react-app的简单ReactJS应用程序,我只想部署它。
运行npm run build我得到一个包含简单HTML文件及其静态依赖项的文件夹。 所以现在我有多种选择:

  1. 使用Apache进行部署 。 我可能要使用Apache进行部署,因为我位于共享主机上,并且它可以提供静态HTML文件。 我的VPS上也可以有多个VirtualHost,在这种情况下,Apache可以为我提供很多帮助。
  2. 使用NGINX进行部署 。 NGINX将为我提供许多管理SSL证书和多个NodeJS实例的帮助,但是我认为如果我的目标只是部署静态HTML文件,可能会有些复杂。
  3. 使用ExpressJS进行部署 。 我们到了! 我有一个简单的应用程序,需要访问一些NodeJS API 。 我也想利用所有客户端渲染的优势,因此ExpressJS + ReactJS可能是一个很好的解决方案!

所以这就是我们要做的:

  • 获取新的Ubuntu 16.04 LTS VPS
  • 创建一个新的ExpressJS应用
  • 设置SSL证书
  • 设置HTTP2支持

请记住,为了在低于1024的端口上运行应用程序,您需要对VPS的root访问权限。

让我们创建一个新的ExpressJS应用程序:

  $ npm install express-保存 

然后我们可以创建一个新文件:

  $ touch server.js
 $ nano server.js 

这将是我们的网络服务器。 让我们写下一些代码:

 var express = require('express'); var app = express();  const port = 3000; app.get('/', function (req, res) { res.send('I\'m running!'); }); app.listen(port, function () { console.log(`ExpressJS is running on port ${port}!`); }); 

假设我们的IP为10.0.0.123,我们可以通过键入以下内容来查看ExpressJS Web服务器的运行情况:

  $节点server.js 

访问http://10.0.0.123:3000,我们将获得:

 我在跑! 

行! 现在,我们希望每次有人点击我们的任何路线时都发送一个静态HTML文件。

那就是我们要做的:

  const path = require('path');
 const http = require('http');
 const express = require('express');
 const app = express(); app.use(express.static(path.join(__ dirname,'build')))); app.get('*',(req,res)=> {
    res.sendFile(path.join(__ dirname +'/build/index.html'));
 }); const httpServer = http.createServer(app);
 httpServer.listen(80);
 console.log('服务器已启动!'); 

这段代码将解决很多问题。 当用户点击您的任何一条路线时(请注意通配符路线为“ app.get()”的第一个参数),我们将发回一个静态文件。 就我而言, React Router将使用其惊人的虚拟路由来完成其余的工作。

让我们检查一下文件夹结构:

  $ ls
 $ package.json server.js npm_modules 

我们需要创建一个名为“ build ”的新文件夹,您猜怎么着? 我们将使用ReactJs静态构建对其进行更新。

  $ mkdir构建
 $ cd构建
 $ git clone https://yourrepository.com/react-build。 

我认为Git是控制应用程序部署流程的最简单方法,但是您显然可以通过SFTP或FTP更新构建文件夹。

到了2017年,我们至少需要添加HTTPS支持。
我们还将通过添加库SPDY添加HTTP2支持。

让我们从创建一个新目录开始,在该目录中存储证书:

  $ mkdir证书
 $ cd证书
 $ touch server.key
 $ touch server.crt 

现在,使用SSL .crt和.key文件编辑这些新文件。

 纳米server.key server.crt 

行! 现在,我们需要SPDY库:

  npm install express-spdy-保存 

现在我们可以编辑server.js文件了:

  const fs = require('fs');
 const path = require('path');
 const http = require('http');
 const https = require('https');
 const spdy = require('spdy')
 const express = require('express'); const privateKey = fs.readFileSync('certs / server.key','utf8');
 const证书= fs.readFileSync('certs / server.crt','utf8'); const凭证= {key:私钥,cert:证书};
 const app = express(); app.use(express.static(path.join(__ dirname,'build')))); app.get('*',(req,res)=> {
    res.sendFile(path.join(__ dirname +'/build/index.html'));
 }); const httpServer = http.createServer(app);
 const httpsServer = spdy.createServer(credentials,app); httpServer.listen(80);
 httpsServer.listen(443); console.log('服务器通过HTTP2协议启动。'); 

是的 我们已经使用ExpressJS,HTTPS和HTTP2协议正确部署了ReactJS应用程序!