node.ucpダウンロードnode.ucpソースコードのダウンロード

node.ucp

ウェブサイトデータ

1.0.0

ダウンロード

node.ucp

これは、nodejsの上に書かれた本格的な同型JavaScriptコントロールパネルで、反応です。このコントロールパネルの目的は、本格的で非常に柔軟であるため、他の人のための例またはボイラープレートコードとして機能することです。さまざまなユースケースやデータベースの種類と構造に簡単に適応できるようにコードを書きました。

サーバーサイドのレンダリング、反応、サービスワーカーの揮発性リソースのキャッシュの取り扱い、およびこのアプリケーションのソースコードで手動でセッションを処理することに関連する多くの問題に私が書いたソリューションを見つけることができます。

コードはES6の矢印関数を使用して非常に約束しているため、まだそうでない場合はこれらの概念に精通してください！

ソースコードでのアプリケーションの動作を説明するために、できる限りコメントしようとしましたが、明確でない場合はお気軽にお問い合わせください。

デモ

ログイン情報：

ユーザー名：ジョナス

パスワード：テスト

デモはここをクリックしてください。

デモが機能していないケース内の画像については、ここをクリックしてください。

前提条件

nodejs v6.11.3以降
サンプルデータベースを使用する場合は、MySQLバージョン5.6.5以降。
Linuxを使用している場合は、Node-Gypをインストールする必要があります。次のコマンドを使用してインストールします。

sudo npm install -g node-gyp

Windowsを使用している場合は、DEPEDENISの一部をコンパイルおよび構築するために、Windowsビルドツールもインストールする必要があります。次のコマンドを使用してインストールします。

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

インストール

ソースコードを配置したい空のフォルダーに移動します。
次のコマンドを使用してリポジトリをクローンします。

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

または

リポジトリの右上にある緑色のClone or Downloadボタンからリポジトリを手動でダウンロードし、空のフォルダーにコンテンツを抽出します。 3.プロジェクトのルートにいることを確認し、次のコマンドを入力して、アプリケーションに必要なパッケージをインストールしてください。

npm install

パッケージのインストールには時間がかかる場合があります。 5.サンプルデータベース（ ./sample-database.sql ）をMySQLサーバーにインポートします。 ./config/config.jsonファイルと、システム設定のように構成ファイルを編集します。

アプリケーションの開始

開発者モード：

開発者モードでアプリケーションを開始するには、次のコマンドを使用します。

npm run start-dev

開発者モードでは、次のことが起こります。

./srcフォルダー内の任意のファイルに変更があるたびに、アプリケーションは自動的に再起動します。
クライアントサーバーの共有アプリケーションの一部は、アプリケーションの開始時に自動的にバンドルされます。
アプリケーションは、デフォルトではキャッシュされていないglobal.min.cssの代わりにglobal.cssを使用します。静的ファイルを提供するためにnginxを使用する場合（後述）、nginx構成に応じて.cssファイルをキャッシュする場合があることに注意してください。
バンドルファイルの自動キャッシュバストは、アプリケーションの再起動時に行われます。このキャッシュバストは、サービスワーカー（ ./public/js/sw.js ）によって検出され、バンドルファイルがキャッシュに置き換えられます！

生産モード：

プロダクションモードでアプリケーションを開始する前に、クライアントに共有されたクライアントの共有部分を1つのファイルの下にバンドルする必要があります。

npm run make

上記のコマンドは、 ./public/css/global.css css/global.cssファイルコンテンツを監督し、 ./public/css/global.min.css css/global.min.cssとして保存することに注意してください。

バンドリングが完了したら、次のコマンドを使用してアプリケーションを開始します。

npm start

生産モードでは、次のことが起こります。

アプリケーションは、キャッシュされたリソースであるglobal.min.cssではなくglobal.cssを使用します。
バンドルファイルのキャッシュバストは引き続き行われますが、コマンドnpm run makeを使用して作成されたバンドルファイルのみです。
Express（アプリケーションで使用されるWebサーバー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 config.jsonに移動し、 databaseAPIオプションを編集して、DB APIレイヤーを含むファイルの名前を一致させます。ファイルは./src/db/ディレクトリに配置する必要があります。

nginxを使用して静的ファイルを提供します

Nodejsの代わりに静的ファイルを提供するためにNginxを使用することをお勧めします。そのために、次のロケーションブロックをSeverブロック構成に追加できます。

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

静的ファイルを提供するためにNginxを使用することにした場合は、アプリケーションのGZIP圧縮をNginxにシフトしたい場合があります。そうする必要がある場合は、 ./node.ucp.jsファイルから次の2行にコメントすることにより、アプリケーション側の圧縮を無効にします。

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

app . use ( compression ( ) ) ;