node.ucp

node.ucp

這是一個完整的同構JavaScript控制面板，寫在nodejs和React的頂部。該控制面板的目的是作為其他人的示例或樣板代碼，因為它是完整的且非常靈活的。我編寫了代碼，可以輕鬆適應不同的用例和數據庫類型和結構。

您可以找到我寫的解決方案，用於與服務器側渲染，反應，處理服務工作人員中波動資源的緩存的許多問題，並在此應用程序的源代碼中手動處理會話。

該代碼使用ES6的箭頭功能並極大地承諾，因此，如果您還沒有，請熟悉這些概念！

我試圖盡可能多地發表評論，以在源代碼中解釋應用程序的工作，但是如果不清楚，請隨時提出。

演示

登錄信息：

用戶名：喬納斯

密碼：測試

單擊此處進行演示。

單擊此處以獲取示例中的圖像演示不起作用。

先決條件

• Nodejs v6.11.3或更高版本
• MySQL版本5.6.5或更高版本，如果您想使用示例數據庫。
• 如果您使用的是Linux，則需要安裝節點GYP。使用以下命令安裝它：

sudo npm install -g node-gyp

• 如果您使用的是Windows，則需要安裝Windows構建工具，以編譯和構建某些偏見。使用以下命令安裝它：

npm install --global --production windows-build-tools

安裝

1. 導航到需要放置源代碼的空文件夾。
2. 使用以下命令克隆存儲庫：

git clone https://github.com/zeus2198/node.ucp 

或者

從綠色Clone or Download按鈕下載存儲庫，位於存儲庫的右上部分，並在空文件夾中提取內容。 3。確保您在root the項目中並鍵入以下命令以安裝應用程序所需的軟件包：

npm install

軟件包安裝可能需要一些時間。 5。將示例數據庫（ ./sample-database.sql ）導入您的MySQL Server。 4。打開./config/config.json文件，並按照您的系統設置來編輯配置文件。

啟動應用程序

開發人員模式：

要在開發人員模式下啟動應用程序，請使用以下命令：

npm run start-dev

在開發人員模式下，發生以下情況：

• 每當./src文件夾中的任何文件發生更改時，應用程序就會自動重新啟動。
• 應用程序的client-server共享一部分將在應用程序啟動時自動捆綁。
• 該應用程序使用global.css而不是global.min.css ，默認情況下未緩存。請注意，如果您決定使用nginx用於服務靜態文件（如下所述），則可能會根據NGINX配置來緩存.CSS文件。
• 捆綁文件的自動緩存破壞發生在應用程序重新啟動上。服務工作者（ ./public/js/sw.js ）檢測到此緩存破壞，然後在我們的緩存中替換了捆綁文件！

生產模式：

在以生產模式啟動應用程序之前，您需要在一個文件下將client-erser-server共享一部分捆綁在一起，以便可以將其提供給客戶端，以便使用以下命令：

npm run make

請注意，上面的命令還將縮小./public/css/global.css文件內容，並將其存儲為./public/css/global.min.css 。

捆綁完成後，請使用以下命令來啟動應用程序：

npm start

在生產模式下，發生以下情況：

• 該應用程序使用global.min.css而非global.css ，這是一個緩存的資源。
• 捆綁文件的緩存破壞仍將發生，但僅用於使用命令npm run make創建的捆綁文件。
• 啟用了Express的（我們在應用程序中使用的Web-Server API）生產模式。

藝術品

您可以從這裡找到該項目中使用的藝術品的Photoshop文件

筆記

• ./src/shared/目錄包含客戶端和服務器部件中常見的代碼，因此請確保您不會在本節中公開任何敏感信息。
• 該應用程序使用僅適用於Localhost和HTTPS啟用域的服務工作者，因此請確保您使用https協議與域一起使用。
• 受保護的路線沒有在服務器端渲染。
• 要清除緩存，請打開./public/js/sw.js並編輯版本字符串。然後關閉在瀏覽器中打開的所有應用程序選項卡，然後再次打開應用程序。編輯global.css文件時，請使用它清除global.min.css退出緩存。
• 獲取免費的SSL證書並使用NGINX將域將域倒入您的應用程序。

使用不同的數據庫

./src/db/db.api.abstract.js文件包含我們數據庫API的抽像類，請閱讀方法規格的註釋。然後在您的自定義數據庫API層中需要此文件，然後覆蓋抽象方法。有關實現示例，請參見./src/db/mysql.api.js文件。請注意，每種方法都應返回承諾。

完成為DB編寫API後，請轉到./config/config.json和Edit databaseAPI選項，以匹配包含DB API層的文件的名稱。該文件應放入./src/db/目錄中。

使用nginx服務靜態文件

我建議使用nginx使用靜態文件而不是nodejs。為此，您可以將以下位置塊添加到您的Sever塊配置中：

 location /public {
	alias  /path/to/your/app/public;
}

如果您決定使用nginx服務靜態文件，則可能也想將應用程序的GZIP壓縮轉移到nginx。如果您./node.ucp.js做，則應使用。

 //./node.ucp.js
// comment out the following lines if you use nginx for gzip compression
import compression from 'compression' ;

app . use ( compression ( ) ) ;

使用Process Manager確保應用程序在生產模式下永遠運行

在生產模式下，您可能需要一個可以重新啟動應用程序的流程管理器，我建議將PM2用於此目的。使用以下命令安裝PM2：

npm install pm2 -g

現在，在使用PM2以在生產模式下啟動應用程序之前，請確保應用程序實際啟動並運行其他應用程序，您的應用程序將卡在啟動和重新啟動循環中。

我已經為PM2創建了一個配置文件以啟動應用程序，以使用PM2類型以生產模式啟動應用程序：

pm2 start node.ucp.pm2.json