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