Ubuntu 14.04でNodeJS、SailsJS、DustJSを使用してSPA（シングルページアプリケーション）を構築する方法

投稿日: 2019-11-08 2022-04-20
タグ: Node.js, ubuntu

序章

Node.js®は、ChromeのJavaScriptランタイム上に構築されたプラットフォームであり、高速でスケーラブルなネットワークアプリケーションを簡単に構築できます。 Node.jsは、イベント駆動型の非ブロッキングI / Oモデルを使用しており、軽量で効率的であり、分散デバイス間で実行されるデータ集約型のリアルタイムアプリケーションに最適です。

Sails は、バックエンドサーバー用のNodeJSフレームワークです。 Model-View-Controllerパターンに基づいて、アプリケーションの迅速な開発を可能にします。 Sailsには、リアルタイムプッシュメッセージ用のWebソケットの統合が組み込まれています。 Waterline ORM をデフォルトのORMとして使用するため、データベースに依存しません。つまり、SQL以外のデータベースだけでなく、さまざまなSQLデータベースでのデータベース操作が可能になります。最も重要なことは、Sailsがアプリケーションに適切な構造を提供することです。

DustはJavaScriptテンプレートエンジンです。 ctemplateファミリーの言語から外観を継承し、サーバーとブラウザーの両方で非同期的に実行されるように設計されています。

SPA は、シングルページアプリケーションの略です。これらは、単一のWebページに適合するアプリケーションです。サイトが開くと、それ以降はページがリロードされません。このようなアプリケーションの目標は、デスクトップアプリと同じように、ページの読み込み時間を短縮し、さまざまなページに簡単に移行できるようにすることで、流動的なユーザーエクスペリエンスを提供することです。

このチュートリアルでは、コードを管理するためのフレームワークとしてSailsJSを使用してNodeJSサーバーをセットアップします。クライアントとサーバーの両方で使用される同形テンプレートにはDustJSを使用します。

目標

私たちの主な目的は、サーバーだけでなくクライアントでも同形（または同じ）テンプレートを使用することです。これは素晴らしいです

クライアントとサーバーの両方で同じテンプレートとして記述および維持するコードが少なくなります
任意のページをサーバーから直接フェッチできるため、インデックス可能な検索エンジン

前提条件

このチュートリアルは、Ubuntu14.04×64ドロップレットを作成したことを前提としています。 512MBのRAMでテストされました。パッケージをインストールするには、sudoアクセス権を持つユーザーも必要です。

ステップ1—ソフトウェアのインストール

まず、npmからネイティブアドオンをコンパイルしてインストールするには、ビルドツールをインストールする必要があります。

sudo apt-get install python-software-properties python g++ make

次に、次のコマンド（ ChrisLeaのPPAから）を使用してNodeJとNPMをインストールします。

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

注：これにより、NodePackageManagerまたはnpmもインストールされます。 NPMは、ノードパッケージのインストールに使用されます。 NodeJのapt-getに似ています。これを使用して、Sails、dust-compiler、およびその他の要件などのノードモジュールをインストールします。

次に、SailsJsをインストールします。

sudo npm -g install sails

注：これにより、最新バージョンのSailsがインストールされます。 Sails.jsの詳細については、Webサイトを参照してください。

ステップ2—新しい帆プロジェクトを作成する

新しいアプリケーションを作成します。

sails new dustspa
cd dustspa

Sailsは、次の構造でdustspaディレクトリを作成します。

--config
--views
---api
--tasks
--assets
README
.gitignore
package.json
.sailsrc
app.js
Gruntfile.js

package.jsonファイルで次の行を見つけます。

"dependencies": {
"sails": "~0.11.0",

それらを次のように変更します。

 "dependencies": {
     "dustjs-linkedin": "^2.5.1",
     "sails": "~0.11.0",

ダストコンパイラは、ダストテンプレートをダストJavaScriptテンプレートにコンパイルするために使用されます。

次に、dustjsパッケージとその他のパッケージ依存関係をpackage.jsonファイルにインストールします。

sudo npm install

ここで、sails liftを使用してサーバーを持ち上げます。

sails lift

your_server_ip:1337にアクセスして、デフォルトのホームページを表示します。完了したら、Ctrl+Cを使用してサーバーを停止します。

ステップ3—ビューエンジンの設定

まず、 ViewEngineをdustに設定します。

config/views.jsで、engine: 'ejs'をengine: 'dust'に変更します。

nano ./config/views.js

行に移動：

    engine: 'ejs',

次のように変更します。

    engine: 'dust',

変更が完了したら、Ctrl+X（保存）、Y（ファイル名の確認）、 ENTER （保存して終了）を押します。

今後、上記の方法ですべてのファイルを編集していきます。

ステップ4—layout.dustを作成する

layout.dustのコンテンツがランディングページになります。すべてのリクエストは、最初のページでこのページに送信されます。その後、リクエストはフロントエンドで処理されます。

viewsフォルダーにファイルlayout.dustを作成します。

touch views/layout.dust

次のHTMLコードをlayout.dustにコピーします。

layout.dust

<!DOCTYPE html>
<html>
<head>
  <title>Dust SPA</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <nav>
        <ul class="nav nav-pills pull-right">
          <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
          <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
          <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
        </ul>
      </nav>
      <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
    </div>
    <br/>
    <div id="template">
      <h1>Partial Goes Here</h1>
    </div>
    <footer class="footer">
      <p>Styled by Bootstrap&copy;</p>
    </footer>
  </div>
</body>
</html>

HTMLは非常に単純です。それは使用しています：

スタイリング用のブートストラップ。
ナビゲーションリンクのシンプルなナビゲーション。
テンプレートが読み込まれる<div id="template">...</div>

次に、routes.jsで/のビューを設定する必要があります。 config/routes.jsを開き、次のように編集します。

ルート.js

'/': {
   view: 'layout'
    }

それでは、サーバーを持ち上げて（サーバーがすでに起動している場合は、Ctrl + Cを押して停止します）、進行状況を確認します。 dustspaディレクトリ（現在のディレクトリ）からこのコマンドを実行します。

sails lift

そして、ブラウザで次の場所を指定します：droplet_ip:1337

ページが表示されたら、次に進みましょう。そうでない場合は、前の手順を確認してください。また、この時点ではリンクは機能しません。

ステップ5—パーシャルの作成

注：パーシャル（またはテンプレート）はページの一部です。 SPAでは、ページ全体を置き換えるのではなく、一部だけを置き換えます。

viewsディレクトリにpartialsディレクトリを作成し、次の新しいディレクトリに移動します。

mkdir views/partials
cd views/partials

home.dust、about.dust、およびcontact.dustファイルをpartialsディレクトリに次の内容で作成します。

home.dust

    <div class="jumbotron">
      <h1>Home Page
        {?home}<small class="pull-right">Visit Count: {home}</small>{/home}
      </h1>
      <p class="lead">This is the home page. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</p>
      <p>
        <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
        <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
      </p>
    </div>

about.dust

    <div class="panel panel-primary">
      <div class="panel-heading">
      <h1 class="panel-title">About Us
        {?about}<kbd class="pull-right">Visit Count: {about}</kbd>{/about}
      </h1>
      </div>
      <div class="panel-body">
        <h4>This is the About Us template. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</h4>
        <br>
        <p>
          <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
          <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
      </p>
      </div>
    </div>

contact.dust

    <div class="well">
      <h1 class="align-center">Show us some love and we'll get back to you !
        {?contact}<small class="pull-right">Visit Count: {contact}</small>{/contact}
      </h1>
      <hr/>
      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
      </div>
      <br/>
      <p>
      <a class="btn btn-lg btn-success" href="#" role="button">Send Contact</a>
      </p>
    </div>

ステップ6—テンプレートのコンパイル

ダストテンプレートは、フロントエンドで使用する前にコンパイルする必要があります。

dust compilerをインストールしましょう。

sudo npm install -g dust-compiler

コンパイルされたすべてのテンプレートはassets/templatesに保持されます。メインのdustsディレクトリに移動します。

cd ../..

次に、dust templatesをコンパイルします。

dust-compiler -s views/partials/ -d assets/templates/ --bootstrap --nonotify

これで、assets/templatesフォルダーに3つのファイルが作成されます。

home.js
about.js
contact.js

これで、必要なファイルがすべて揃いました。

まず、views/layout.dustで、dust-jsライブラリとテンプレートファイルを<body>タグの最後に追加します。

layout.dust

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>

<script type="text/javascript" src="/templates/home.js"></script>
<script type="text/javascript" src="/templates/about.js"></script>
<script type="text/javascript" src="/templates/contact.js"></script>

それが終わったら、リンクのクリックをキャプチャして必要なテンプレートをレンダリングするためのスクリプトを追加する必要があります。次の内容でassets/js/clickHandler.jsを作成します。

clickHandler.js

    (function () {

  var links = document.getElementsByClassName("links"),
  templateDiv = document.getElementById("template"),
  nav = document.querySelector('nav > ul'),
  clicked = false, viewCount = { home: 2, about: 1, contact: 1 };

  function clickHandler(e) {
    var target = event.target,
    templateName = this.getAttribute("data-template");
    if(clicked) {
      clicked.removeAttribute('class');
    }
    else {
      nav.querySelector('.active').removeAttribute('class');
    }
    target.parentElement.setAttribute('class','active');
    clicked = target.parentElement;

    dust.render(templateName, viewCount, function (err, out) {
      if(err) console.log('Error:',err);
      else {
        viewCount[templateName]++;
        templateDiv.innerHTML = out;
      }
    });
  };

  for(var i = 0; i < links.length; i++){
    links[i].addEventListener('click', clickHandler, false);
  }

})();

上記のスクリプトは非常に単純です。次のことを行います。

リンクのクリックイベントをキャプチャします
data-template属性からリンクのテンプレート名を抽出します
クリックされたリンクを定型化する
dust.render関数を使用してテンプレートをレンダリングし、オブジェクトviewCountを渡します（何でも含めることができます。ここでは、ビューアクセスの数が含まれます）

views/layout.dustを編集し、最後の<body>タグ内に以下を追加して、この新しいclickHandler.jsファイルを参照します。

 <script type="text/javascript" src="/js/clickHandler.js"></script>

最後に、viewsディレクトリのlayout.dustを編集する必要があります。

views/layout.dustの<div id="template">...</div>を次のように変更します。

layout.dust

<div id="template">
  {> "partials/home"/}
</div>

上記の変更は何をしますか？！これはテンプレートの再利用です。 dust.jsビューエンジンは、{> "partials/home"/}をファイルview/partials/home.dustの内容に置き換えます。

このテンプレートはどのように再利用されますか？このテンプレートのコンパイル済みバージョン（dust-compilerを使用してコンパイルしたもの）は、assets/templates/home.jsにあります。このコンパイルされたテンプレートは、後でスクリプトタグに含まれます。 <script src="/templates/home.js"/>タグを使用してテンプレートを含めると、そのテンプレート（テンプレート）がfrontendのdust.cacheオブジェクトに自動的に追加されます。ここで、このテンプレートを再レンダリングするには、dust.render("home", obj, callbackFunction)を使用します。 assets/js/clickHandler.jsのコードをチェックして、コードをよりよく理解することができます。

xxxという名前のダストテンプレートは、xxx.dustという名前のファイルで作成されます。複数の.dustファイルを作成し、1つのdust.jsテンプレートを別のテンプレートの一部として参照できます。これは、複数のページの共通のヘッダーやフッターなどのタスクの「コンポーネント」または再利用可能なテンプレートの基礎です。ここでは例で.dustファイル拡張子が使用されていますが、.tlも一般的に見られることに注意してください。ビルドプロセスにのみ関係するため、適切な拡張機能を使用できます。

部分参照構文{> name /}もパスをサポートしているため、shared/header.dustのようなパスにテンプレートを作成し、{> "shared/header" /}として参照できます。これにより、ディレクトリを使用してパーシャルをライブラリのような構造に編成できます。

githubでPartialsの詳細をご覧ください。

最終的なlayout.dustは次のようになります。

layout.dust

<!DOCTYPE html>
<html>
<head>
  <title>Dust SPA</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="header">
      <nav>
        <ul class="nav nav-pills pull-right">
          <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
          <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
          <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
        </ul>
      </nav>
      <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
    </div>
    <br/>
    <div id="template">
      {> "partials/home"/}
    </div>
    <footer class="footer">
      <p>Styled by Bootstrap&copy;</p>
    </footer>
  </div>

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
  <script type="text/javascript" src="/templates/home.js"></script>
  <script type="text/javascript" src="/templates/about.js"></script>
  <script type="text/javascript" src="/templates/contact.js"></script>
  <script type="text/javascript" src="/js/clickHandler.js"></script>
</body>

</html>

ステップ7—アプリをテストする

サーバーを持ち上げます。

sails lift

ブラウザで次の場所を指定します：your_server_ip:1337

上位3つのリンクをクリックしてSPAをテストします：ホーム、バージョン情報、連絡先

結論

素晴らしい！クライアントとサーバーの両方で同じテンプレートを使用できる同形のWebサイトを正常に構築しました。シングルページアプリケーション（SPA）Webサイトを構築し、SailsJSフレームワークの使用についても理解しました。

外部リンク

使用されているテクノロジーについて詳しく知りたい場合は、以下のリンクにアクセスしてください。

getdocs

13036