将现有Express节点应用发布到静态站点的最简单方法？

Question

我几乎无法通过使用create-react-app与React专门合作来宠坏，该应用程序具有适用于npm的构建实用程序，这使得将我的项目部署到静态Web托管变得非常容易（github页面/ surge），最终给了我原始的印象。 html / css / js。

但是最近有一个朋友走近我，无论他在哪所学校里，他们都教给他很多关于如何仅使用Express编写应用程序的知识，却没有关于如何部署它们的知识。 我暂时在Heroku上编写了他的代码，但仅使用静态托管可能会更好（因为该站点非常简单，并且仅使用express进行路由/没有服务器端代码或交互功能）

是否有诸如create-react-app的快速构建功能？ 如此简单的事情绝对不可能完全占用整个节点服务器的开销。

Answer 1

我想您可能会混淆一些事情，所以让我们从头开始只是为了确保我们使用的是相同的定义。

Node是一个JavaScript引擎，由V8引擎（专为Chrome构建）提供支持。 它基本上是一个JavaScript解释器。

Express是一个在Node之上构建的程序包，它基于Node的http库构建。 它是Node等效于nginx或apache的（其中之一）。

Heroku是基于云的Web主机，具有动态扩展的能力（就像AWS一样，它是基于它构建的）。

说“ Express不需要成熟的Node服务器”并没有多大意义。 他只需要一台可以运行Node应用程序的服务器即可。 Node服务器的大小可以变化，实际上他可能不需要一个很大的服务器。

Heroku可能是一个非常合适的主机。 他不必使用缩放比例或任何东西，并且在那里轻松部署Node应用程序非常容易。

许多其他流行的主机也可以支持Node。 如果它们使您能够访问终端并能够安装应用程序，则几乎可以肯定。

据我所知，没有像create-react-app这样create-react-app会启动express应用程序的新实例。 那可能是因为它们非常容易设置。 对于一个基本的Express应用程序，只有两个文件就足够了： package.json和您的express文件（我将其命名为index.js 。

package.json：

{
   "name": "my-app",
   "dependencies": {
     "express": "latest"
   }
}

index.json：

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('<h1>Hello World</h1>').end());

app.listen(8888, () => console.log('Listening on port 8888'));

将其部署到可以运行Node的任何服务器上，并运行命令npm install; node index.js npm install; node index.js将使其开始运行。

通常，您实际上会创建一个express服务器来服务您的Web应用程序，该服务器经常以React编写（这是我每天工作的场景）。 create-react-app只是建立项目的一种快速方法，该项目在结构上颇有建树，但不是使用React的唯一方法。

（从技术上讲，不需要package.json可以逃脱，但是必须在服务器上手动运行npm install express ，这确实很奇怪，所以不要这样做）。

Answer 2

我在非常简单的网站上工作时也有相同的感觉，因此我已将express应用程序转换为Web-boost方法，该方法在后台使用相同的Express。

您唯一要做的就是创建看起来像这样的web-boost.json配置文件

{
  "routes": {
    "/": {
      "view": "index.twig",
      "vars": {
        "title": "Home page",
        "greeting": "Hello world!"
      },
      "assets": {
        "js/index.min.js": [
          "js/index.js"
        ]
      }
    },
    "/user": {
      "view": "user.twig",
      "vars": {
        "title": "User's page",
        "greeting": "Hi John Doe!"
      },
      "assets": {
        "css/user.min.css": [
          "styles/bootstrap.min.css",
          "styles/user.scss"
        ]
      }
    }
  }
}

然后使用wb-compile CLI命令将动态应用程序转换为静态应用程序。

PS之后，我刚刚将静态页面部署到了AWS.S3