Ubuntu 14.04でBowerを使用してフロントエンドJavaScriptとCSSの依存関係を管理する方法

前書き

フロントエンドのフレームワーク、ライブラリ、およびアセットのインストールディレクトリを手動で検索、ダウンロード、アンパック、および検索する必要があった時代は過ぎ去りました。

Bowerは、通常JavaScriptやCSSで構成されるフロントエンドモジュールのパッケージマネージャーです。これらのフロントエンドの依存関係を簡単に検索、インストール、更新、または削除できます。

Bowerを使用する利点は、プロジェクトを配布するときに、外部の依存関係をプロジェクトにバンドルする必要がないことです。 Bowerは、「+ bower install」を実行し、それらの依存関係を適切な場所に取得するときに、サードパーティのコードを処理します。また、最終プロジェクトパッケージを配布用に小さくします。

画像：https：//assets.digitalocean.com/articles/bower/zlrTjni.png [Bower logo]

このチュートリアルでは、Ubuntu 14.04サーバーにBowerをインストールして使用する方法を学びます。 Bowerを使用してBootstrapとAngularJSをインストールし、Nginx Webサーバーで簡単なアプリケーションを実行する方法を説明します。

前提条件

始める前に、完了する必要がある重要な手順がいくつかあります。

Ubuntu 14.04がクリーンインストールされたドロップレット。この目的のために、ドロップレットのサイズは実際には重要ではないので、最小バージョンを安全に使用できます。ドロップレットをまだ作成していない場合は、https：//www.digitalocean.com/community/tutorials/how-to-create-your-first-digitalocean-droplet-virtual-の手順に従って作成できます。 server [最初のDigitalOcean Droplet仮想サーバーの作成方法]チュートリアル
SSHでサーバーに接続
Ubuntu 14.04 Initial Server Setupチュートリアルに従って、sudo権限を持つユーザーを作成します。この例では、このユーザーの名前は* sammy *です
Webサーバーには、http：//nginx.org/ [Nginx]を使用します。これは、パフォーマンス機能により広く採用されている強力で効率的なWebサーバーです。 Ubuntu 14.04 LTSにNginxをインストールする方法チュートリアルに従ってNginxをインストールします

また、Bowerには* Git 、 Node.js 、および npm *が必要です。

次のコマンドを使用して、サーバーにGitをインストールします。

 sudo apt-get install git

Gitのセットアップに関する詳細なチュートリアルが必要な場合は、https：//www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-14-04をご覧ください[ Ubuntu 14.04にGitをインストールする方法]。

次のコマンドを使用して、サーバーにNode.jsをインストールします。

 sudo apt-get install nodejs

Node.jsのセットアップに関する詳細なチュートリアルが必要な場合は、https：//www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an-をご覧ください。 ubuntu-14-04-server [Ubuntu 14.04サーバーにNode.jsをインストールする方法]。

次のコマンドを使用して、サーバーにnpmをインストールします。

 sudo apt-get install npm

npmの設定に関する詳細なチュートリアルが必要な場合は、https：//www.digitalocean.com/community/tutorials/how-to-use-npm-to-manage-node-js-をご覧ください。 packages-on-a-linux-server [npmを使用してLinuxサーバー上のNode.jsパッケージを管理する方法]。

Node.jsをパッケージマネージャーからインストールしたため、バイナリは* node ではなく nodejs と呼ばれる場合があります。 npmはNode.jsバイナリが node *と呼ばれるという事実に依存しているため、次のようにシンボリックリンクする必要があります。

 sudo ln -s /usr/bin/nodejs /usr/bin/node

この問題の詳細については、https：//github.com/joyent/node/issues/3911 [Github]を参照してください。シンボリックリンクの詳細については、http：//unix.stackexchange.com/questions/68368/をご覧ください。シンボリックリンクと方法、学習方法、実行方法、この[StackExchangeの質問]。

これらの手順が完了したら、このガイドを続行できます。

ステップ1-Bowerのインストール

npmを使用してBowerをインストールします。

sudo npm install bower -g

-g *スイッチは、システムにBowerをグローバルにインストールするために使用されます。

Bowerをインストールしたので、実際の例を続けます。次のステップでは、

新しいBowerプロジェクトを作成する
BowerでBootstrapをインストールする
BowerでAngularJSをインストールする
Nginx経由でWebサイトを提供する

このチュートリアルの最後の* Bower Reference *セクションで、各Bowerオプションの詳細を確認できます。

ステップ2-プロジェクトディレクトリの準備

Bowerプロジェクトを `+ / usr / share / nginx / html +`ディレクトリに作成して、ウェブサイトとしてアプリケーションに簡単にアクセスできるようにします。これは、Nginxのデフォルトのドキュメントルートディレクトリです。

したがって、 `+ cd +`コマンドでこのディレクトリに変更する必要があります。

cd /usr/share/nginx/html

デフォルトでは、Ubuntu 14.04のNginxでは、デフォルトで1つの_server block_が有効になっています。前述の `+ / usr / share / nginx / html +`ディレクトリからドキュメントを提供するように設定されています。

簡単な例では、デフォルトのサイトを使用します。

ただし、実稼働アプリケーションの場合、おそらくhttps://www.digitalocean.com/community/tutorials/how-to-set-up-nginx-server-blocks-virtual-hosts-on-ubuntu-14-04-特定のドメインのlts [サーバーブロックのセットアップ]。

`+ / usr / share / nginx / html`ディレクトリで作業を行う前に、sudoユーザー権限を付与する必要があります。

次のコマンドを使用して、ディレクトリの所有権を変更します。

sudo chown -R : /usr/share/nginx/html/

sammy *の代わりに、前提条件https://www.digitalocean.com/community/articles/initial-server-setup-with-ubuntu-14-04[Ubuntu 14.04初期サーバーで作成した独自のsudoユーザーを使用しますセットアップ]チュートリアル。

ステップ3-Bowerプロジェクトの初期化

次に、ディレクトリ `+ / usr / share / nginx / html +`内で、次のコマンドを実行して新しいBowerプロジェクトを作成します。

bower init

一連の質問が表示されます。この簡単なサンプルプロジェクトでは、 `+ ENTER +`を押すだけですべてのデフォルトを選択できます。

以下でマークされた以下の回答の詳細な内訳を参照してください。

Interactive? May bower anonymously report usage statistics to improve the tool over time?
? name:
? version:
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors:
? license:
? homepage:
? set currently installed components as dependencies?
? add commonly ignored files to ignore list?
? would you like to mark this package as private which prevents it from being accidentally published to the registry?

{
 name: 'BowerTest',
 version: '0.0.0',
 description: 'Testing Bower',
 main: 'index.html',
 keywords: [
   'bower',
   'angular',
   'bootstrap'
 ],
 authors: [
   'Nikola Brežnjak'
 ],
 license: 'MIT',
 homepage: 'http://bower.example.com',
 ignore: [
   '**/.*',
   'node_modules',
   'bower_components',
   'test',
   'tests'
 ]
}

? Looks good?

これらのオプションに関する注意事項：

以前のメモを再検討するために、このサンプルプロジェクトで `+ bower init +`コマンドを実行するときにオプションを入力する必要はありません。
「このパッケージが公開するモジュールの種類は何ですか？」という質問では、「+ SPACEBAR 」を押してオプションを選択または選択解除できます。「 ENTER +」を押すと選択が確定します。デフォルトでは何も選択されていません。この単純な例では、それらは必要ありません。 https://github.com/bower/bower/issues/1229 [公式GitHubの問題]からそれらの詳細を読むことができます。
本番プロジェクトの場合、他の人がプロジェクトについてもっと知ることができるように、 `+ authors +`フィールドとその他の設定に記入する必要があります。
`+ homepage +`設定はあなた自身のウェブサイトを表示するためにのみ使用され、このアプリケーションを実行している実際のサーバーの設定とは何の関係もありません

これで、作業ディレクトリ（ + / usr / share / nginx / html / +）に `+ bower.json`ファイルがあり、上記の出力に示されているJSONコンテンツが含まれているはずです。

ステップ4-AngularJSのインストール

AngularJSは、Webアプリケーション用のJavaScriptフレームワークです。 BowerでAngularJSをインストールするには、次のコマンドを実行します。

bower install angularjs --save

以下のコマンドの出力を見ることができます：

Output                                                bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.14
bower angularjs#*             validate 1.3.14 against git://github.com/angular/bower-angular.git#*
bower angularjs#*                  new version for git://github.com/angular/bower-angular.git#*
bower angularjs#*              resolve git://github.com/angular/bower-angular.git#*
bower angularjs#*             download https://github.com/angular/bower-angular/archive/v1.4.3.tar.gz
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 20%
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 24%
bower angularjs#*             progress received 0.5MB of 0.5MB downloaded, 98%
bower angularjs#*              extract archive.tar.gz
bower angularjs#*             resolved git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3         install angularjs#1.4.3

angularjs#1.4.3 bower_components/angularjs

上記の出力とわずかに異なる出力が得られる場合、それはBowerがダウンロードを高速化するためにパッケージをキャッシュし、パッケージがキャッシュからインストールされたという事実による可能性があります。

これで、AngularJSが + bower_components / angular +`ディレクトリ（または、おそらく `+ bower_components / angularjs +）ディレクトリにインストールされました。 .min.js + `。

ステップ5-ブートストラップのインストール

ブートストラップはCSSフレームワークです。 BowerでBootstrapをインストールするには、次のコマンドを実行します。

bower install bootstrap --save

以下のコマンドの出力を見ることができます：

Outputbower angularjs#~1.4.3          cached git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3        validate 1.4.3 against git://github.com/angular/bower-angular.git#~1.4.3
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#*             validate 3.3.5 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.1           cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#>= 1.9.1         validate 2.1.4 against git://github.com/jquery/jquery.git#>= 1.9.1
bower angularjs#~1.4.3         install angularjs#1.4.3
bower bootstrap#~3.3.5         install bootstrap#3.3.5
bower jquery#>= 1.9.1          install jquery#2.1.4

angularjs#1.4.3 js/angularjs

bootstrap#3.3.5 js/bootstrap
└── jquery#2.1.4

jquery#2.1.4 js/jquery

Bootstrapを + bower_components / bootstrap +`ディレクトリにインストールし、縮小版（使用する予定）へのパスをJavaScriptファイルの `+ bower_components / bootstrap / dist / js / bootstrap.min.js +`にします。 CSSファイルの場合は `+ bower_components / bootstrap / dist / css / bootstrap.min.css +。

jQueryはBootstrapに必要な依存関係であるため、jQueryもインストールされていることに注意してください。

ステップ6-Hello Worldアプリケーションの作成

`+ / usr / share / nginx / html / `フォルダーの編集内で、デフォルトの ` index.html +`ファイルを独自のコンテンツに置き換えましょう：

mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.orig

ファイルを編集用に開きます。

vim /usr/share/nginx/html/index.html

このコンテンツを正確に入力できます。

/usr/share/nginx/html/index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>Bootstrap 101 Template</title>

   <!-- Bootstrap -->
   <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
   <div class="container" ng-app>
       <form class="form-signin">
           <h2 class="form-signin-heading">What you type here:</h2>

           <input ng-model="data.input" type="text" class="form-control" autofocus>

           <h2 class="form-signin-heading">It will also be shown below:</h2>
           <input type="text" class="sr-only">{{data.input}}</label>
       </form>
   </div>

   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

   <script src="bower_components/angular/angular.min.js"></script>
</body>
</html>

これで、Nginxで実行される、AngularJSでBootstrapを使用した簡単なHello Worldタイプのサンプルアプリケーションができました。

（これは基本的にhttp://getbootstrap.com/examples/signin/[Bootstrapからのサインインテンプレート]の例で、 `+ <body> +`タグ内のコンテンツは2つの入力フィールドを持つシンプルなフォームです。）

このサンプルアプリを表示するには、ブラウザでDropletのIPに移動する必要があります。 `+ http：// +`のようなもの。以下の画像のようなものが表示されるはずです。

image：https：//assets.digitalocean.com/articles/bower/O3wFyJW.png [ここに入力するもの：以下にも表示されます：]

テキストボックスフィールドに何かを入力すると、https：//docs.angularjs.org/tutorial/step_04 [AngularJS双方向データバインディング]を使用して、まったく同じコンテンツが下に表示されます。

出力が表示されない場合は、次のコマンドでNginxを再起動してください。

sudo service nginx restart

AngularJSの詳細については、https：//docs.angularjs.org/tutorialの公式ドキュメントをご覧ください。 Bootstrapの詳細については、http：//getbootstrap.com/getting-started/の公式ドキュメントをご覧ください。

パブリックIPアドレスの代わりにドメイン名を使用してWebサーバーにアクセスできるようにする場合は、ドメイン名を購入してから次のチュートリアルに従ってください。

バウアーリファレンス

Bowerを使用した実用的な例を確認したので、その一般的な機能のいくつかを見てみましょう。

パッケージのインストール

パッケージ（AngularJSやBootstrapなど）をインストールするには、次のコマンドを実行する必要があります。

bower install

「++」の代わりに、インストールするパッケージの正確な名前を入力します。パッケージには、GitHubの速記、Gitエンドポイント、URLなどがあります。

特定のパッケージの特定のバージョンをインストールすることもできます。

Bowerのhttp://bower.io/docs/api/#install [インストールに関する公式ドキュメント]を介してインストールするために利用可能なすべてのオプションの詳細をご覧ください。

パッケージを検索する

このhttp://bower.io/search/ [オンラインツール]またはBower CLIを使用して、パッケージを検索できます。 Bower CLIを使用してパッケージを検索するには、次のコマンドを使用します。

bower search

たとえば、AngularJSをインストールしたいが、正しいパッケージ名がわからない場合や、AngularJSで利用可能なすべてのパッケージを確認したい場合は、次のコマンドを実行できます。

bower search angularjs

次のような出力が得られます。

OutputSearch results:
   angularjs-nvd3-directives git://github.com/cmaurer/angularjs-nvd3-directives.git
   AngularJS-Toaster git://github.com/jirikavi/AngularJS-Toaster.git
   angularjs git://github.com/angular/bower-angular.git
   angular-facebook git://github.com/Ciul/Angularjs-Facebook.git
   angularjs-file-upload git://github.com/danialfarid/angular-file-upload-bower.git
   angularjs-rails-resource git://github.com/FineLinePrototyping/dist-angularjs-rails-resource
   angularjs-geolocation git://github.com/arunisrael/angularjs-geolocation.git

AngularJSをインストールするには、次のコマンドを実行するだけです。

bower install angularjs

パッケージの保存

Bowerでプロジェクトを開始する場合、 `+ init +`コマンドの実行から開始するのが標準です：

bower init

これはBowerがプロジェクト設定に使用する `+ bower.json`ファイルの作成をガイドします。プロセスは次のようになります。

Output? name: howto-bower
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Nikola Breznjak <[email protected]>
? license: MIT
? homepage: https://github.com/Hitman666/jsRockstar
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
 name: 'howto-bower',
 version: '0.0.0',
 homepage: 'https://github.com/Hitman666/jsRockstar',
 authors: [
   'Nikola Breznjak <[email protected]>'
 ],
 license: 'MIT',
 ignore: [
   '**/.*',
   'node_modules',
   'bower_components',
   'test',
   'tests'
 ]
}

? Looks good? Yes

これで、 +-save`スイッチを使用してパッケージのいずれかをインストールした場合、それらは* dependencies *オブジェクトの + bower.json`ファイルに保存されます。たとえば、次のコマンドでAngularJSをインストールした場合：

bower install angularjs --save

それから、 `+ bower.json`ファイルは次のようになります（* dependencies *オブジェクトに注意してください）：

bower.json

{
 "name": "howto-bower",
 "version": "0.0.0",
 "homepage": "https://github.com/Hitman666/jsRockstar",
 "authors": [
   "Nikola Breznjak <[email protected]>"
 ],
 "license": "MIT",
 "ignore": [
   "**/.*",
   "node_modules",
   "bower_components",
   "test",
   "tests"
 ],



}

パッケージのアンインストール

Bowerパッケージをアンインストールするには、次のコマンドを実行するだけです。

bower uninstall

これにより、 `+ bower_component `ディレクトリ（または ` .bowerrc +`ファイルで定義した他のディレクトリ）からパッケージがアンインストールされます（設定については次のセクションで詳しく説明します）。

.bowerrcを使用したBowerの構成

Bowerを設定するには、 `+ .bowerrc +`というファイルを作成する必要があります。（ドットに注意してください。これは、Linux環境では隠しファイルであることを意味します。）

プロジェクトのルートディレクトリに（+ bower.jsonファイルと一緒に） `+ .bowerrc`ファイルを作成します。プロジェクトごとに異なる設定で1つの `+ .bowerrc +`ファイルを作成できます。

Bowerでは、このファイルを使用して多くのオプションを構成できます。公式ファイルのhttp://bower.io/docs/config/ [構成オプション]で詳細を確認できます。

便利なオプションの1つは `+ directory +`オプションで、これによりBowerがすべてのパッケージを保存するフォルダーをカスタマイズできます。

このシンプルなオプションを設定するには、次のような `+ .bowerrc +`ファイルを作成します：

bowerrc

{
 "directory": ""
}

結論

このチュートリアルを完了したら、Bowerを使用して、単純なAngularJSアプリケーションの依存関係をインストールする方法を理解する必要があります。

また、独自のカスタムアプリケーションにBowerを使用する方法についてのアイデアも必要です。

TOC