Ubuntu14.04でBowerを使用してフロントエンドのJavaScriptとCSSの依存関係を管理する方法
序章
フロントエンドフレームワーク、ライブラリ、およびアセットのインストールディレクトリを手動で検索、ダウンロード、解凍、および把握する必要があった時代は過ぎ去りました。
Bower は、通常JavaScriptやCSSで構成されるフロントエンドモジュールのパッケージマネージャーです。 これらのフロントエンドの依存関係を簡単に検索、インストール、更新、または削除できます。
Bowerを使用する利点は、プロジェクトを配布するときに、外部の依存関係をプロジェクトにバンドルする必要がないことです。 bower install
を実行し、それらの依存関係を適切な場所に取得すると、Bowerがサードパーティのコードを処理します。 また、配布用に最終的なプロジェクトパッケージを小さくします。
このチュートリアルでは、Ubuntu14.04サーバーにBowerをインストールして使用する方法を学習します。 Bowerを使用してBootstrapとAngularJSをインストールし、NginxWebサーバーで単純なアプリケーションを実行する方法を説明します。
前提条件
始める前に、完了する必要のある重要な手順がいくつかあります。
- クリーンなUbuntu14.04がインストールされたドロップレット。 この目的のために、液滴のサイズは実際には重要ではないので、最小のバージョンで安全に行くことができます。 ドロップレットをまだ作成していない場合は、最初のDigitalOceanドロップレット仮想サーバーを作成する方法チュートリアルの手順に従って作成できます。
- SSHでサーバーに接続する
- Ubuntu 14.04初期サーバーセットアップチュートリアルに従って、sudo権限を持つユーザーを作成します。 この例では、このユーザーの名前はsammyです。
- Webサーバーには、 Nginx を使用します。これは、そのパフォーマンス機能により広く採用されている強力で効率的なWebサーバーです。 Ubuntu 14.04 LTSにNginxをインストールする方法チュートリアルに従って、Nginxをインストールします
また、Bowerには Git 、 Node.js 、npmが必要です。
次のコマンドを使用して、サーバーにGitをインストールします。
sudo apt-get install git
Gitのセットアップに関するより詳細なチュートリアルが必要な場合は、 Ubuntu14.04にGitをインストールする方法をご覧ください。
次のコマンドを使用して、サーバーにNode.jsをインストールします。
sudo apt-get install nodejs
Node.jsの設定に関するより詳細なチュートリアルが必要な場合は、Ubuntu14.04サーバーにNode.jsをインストールする方法を参照してください。
次のコマンドを使用して、サーバーにnpmをインストールします。
sudo apt-get install npm
npmの設定に関するより詳細なチュートリアルが必要な場合は、Linuxサーバーでnpmを使用してNode.jsパッケージを管理する方法を参照してください。
パッケージマネージャーからNode.jsをインストールしたため、バイナリはnodeではなくnodejsと呼ばれる場合があります。 npmは、Node.jsバイナリが node と呼ばれるという事実に依存しているため、次のようにシンボリックリンクする必要があります。
sudo ln -s /usr/bin/nodejs /usr/bin/node
この問題の詳細については、 Github をご覧ください。また、シンボリックリンクの詳細については、このStackExchangeの質問をご覧ください。
これらの手順が完了したら、このガイドを続行できます。
ステップ1—Bowerのインストール
npmを使用してBowerをインストールします。
sudo npm install bower -g
-g スイッチは、Bowerをシステムにグローバルにインストールするために使用されます。
Bowerをインストールしたので、実際の例を続けます。 次のステップでは、
- 新しいバウアープロジェクトを作成する
- Bowerでブートストラップをインストールする
- Bowerを使用してAngularJSをインストールする
- Nginxを介してWebサイトにサービスを提供する
このチュートリアルの最後にあるBowerReference セクションで、各Bowerオプションの詳細を読むことができます。
ステップ2—プロジェクトディレクトリの準備
Bowerプロジェクトを/usr/share/nginx/html
ディレクトリに作成して、アプリケーションにWebサイトとして簡単にアクセスできるようにします。 これは、Nginxのデフォルトのドキュメントルートディレクトリです。
したがって、cd
コマンドを使用してこのディレクトリに移動する必要があります。
cd /usr/share/nginx/html
デフォルトでは、Ubuntu14.04のNginxでは1つのサーバーブロックがデフォルトで有効になっています。 前述の/usr/share/nginx/html
ディレクトリからドキュメントを提供するように構成されています。
簡単な例では、デフォルトのサイトを使用します。
ただし、本番アプリケーションの場合は、特定のドメイン用にサーバーブロックを設定する必要があります。
/usr/share/nginx/html
ディレクトリで作業を行う前に、sudoユーザー権限をそのディレクトリに付与する必要があります。
次のコマンドを使用して、ディレクトリの所有権を変更します。
sudo chown -R sammy:sammy /usr/share/nginx/html/
sammy の代わりに、前提条件のUbuntu14.04初期サーバーセットアップチュートリアルで作成した独自のsudoユーザーを使用します。
ステップ3—バウアープロジェクトの初期化
ここで、ディレクトリ/usr/share/nginx/html
内で、次のコマンドを実行して、新しいBowerプロジェクトを作成します。
bower init
一連の質問があります。 この簡単なサンプルプロジェクトでは、ENTER
を押すだけですべてのデフォルトを選択できます。
赤でマークされた以下の回答の詳細な内訳を参照してください。
Interactive? May bower anonymously report usage statistics to improve the tool over time? Yes ? name: BowerTest ? version: 0.0.0 ? description: Testing Bower ? main file: index.html ? what types of modules does this package expose? Just press ENTER ? keywords: bower angular bootstrap ? authors: Nikola Brežnjak ? license: MIT ? homepage: http://bower.example.com ? 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: '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? Yes
これらのオプションに関するいくつかの注意事項:
- 以前のメモに戻るために、このサンプルプロジェクトで
bower init
コマンドを実行するときに、オプションを入力する必要はありません。 What types of modules does this package expose?
の質問では、SPACEBAR
を押して、オプションを選択または選択解除できます。ENTER
を押すと、選択が確定します。 デフォルトでは何も選択されていません。この簡単な例では、それらは必要ありません。 それらの詳細については、公式のGitHubの問題から読むことができます。- 本番プロジェクトの場合は、
authors
フィールドやその他の設定に入力して、他の人がプロジェクトについてもっと知ることができるようにします。 homepage
設定は、自分のWebサイトを表示するためにのみ使用され、このアプリケーションを実行している実際のサーバーの設定とは関係ありません。
これで、作業ディレクトリ(/usr/share/nginx/html/
)にbower.json
ファイルが作成され、上記の出力にJSONコンテンツが表示されます。
ステップ4—AngularJSをインストールする
AngularJSは、Webアプリケーション用のJavaScriptフレームワークです。 Bowerを使用してAngularJSをインストールするには、次のコマンドを実行します。
bower install angularjs --save
以下のコマンドの出力を確認できます。
[secondary_label 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
)ディレクトリにインストールされ、縮小バージョン(使用する)へのパスはbower_components/angular/angular.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
これで、ブートストラップがbower_components/bootstrap
ディレクトリにインストールされ、縮小バージョン(使用する)へのパスはJavaScriptファイルの場合はbower_components/bootstrap/dist/js/bootstrap.min.js
、CSSの場合はbower_components/bootstrap/dist/css/bootstrap.min.css
になります。ファイル。
jQueryはBootstrapに必要な依存関係であるため、どのようにインストールされているかに注目してください。
ステップ6—HelloWorldアプリケーションを作成する
/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>
BowerがシステムにAngularJSをインストールする方法によっては、スクリプトへのパスがbower_components/angular/angular.min.js
ではなくbower_components/angularjs/angular.min.js
になる場合があります。
これで、AngularJSでBoostrapを使用し、Nginxで実行される単純なHelloWorldタイプのサンプルアプリケーションができました。
(これは基本的に、Bootstrap のサインインテンプレートの例であり、<body>
タグ内のコンテンツは2つの入力フィールドを持つ単純な形式です。)
このサンプルアプリを表示するには、ブラウザでドロップレットのIPに移動する必要があります。 http://your_server_ip/
のようなもの。 次の画像のようなものが表示されます。
テキストボックスフィールドに何かを入力すると、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 package
package
の代わりに、インストールするパッケージの正確な名前を入力します。 パッケージには、GitHubの省略形、Gitエンドポイント、URLなどがあります。
特定のパッケージの特定のバージョンをインストールすることもできます。
Bowerのインストールに関する公式ドキュメントを介して、インストールに使用できるすべてのオプションの詳細を確認してください。
パッケージの検索
このオンラインツールまたはBowerCLIを使用してパッケージを検索できます。 Bower CLIを使用してパッケージを検索するには、次のコマンドを使用します。
bower search package
たとえば、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" ], "dependencies": { "angularjs": "~1.4.3" } }
パッケージのアンインストール
Bowerパッケージをアンインストールするには、次のコマンドを実行するだけです。
bower uninstall package
これにより、bower_component
ディレクトリ(または.bowerrc
ファイルで定義したその他のディレクトリ(次のセクションで構成の詳細)からパッケージがアンインストールされます。
.bowerrcを使用したBowerの構成
Bowerを構成するには、.bowerrc
というファイルを作成する必要があります。 (ドットに注意してください。これは、Linux環境では隠しファイルであることを意味します。)
プロジェクトのルートディレクトリに.bowerrc
ファイルを作成します(bower.json
ファイルと一緒に)。 プロジェクトごとに、異なる設定で1つの.bowerrc
ファイルを作成できます。
Bowerでは、このファイルを使用して多くのオプションを構成できます。このファイルの詳細については、公式ドキュメントの構成オプションを参照してください。
便利なオプションの1つは、directory
オプションです。これにより、Bowerがすべてのパッケージを保存するフォルダーをカスタマイズできます。
この簡単なオプションを設定するには、次のような.bowerrc
ファイルを作成します。
.bowerrc
{ "directory": "js/" }
結論
このチュートリアルを完了すると、Bowerを使用して単純なAngularJSアプリケーションの依存関係をインストールする方法を理解する必要があります。
また、独自のカスタムアプリケーションにBowerを使用する方法についても理解しておく必要があります。