將現有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