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

投稿日: 2022-08-10 2022-10-22
タグ: Applications, nginx, ubuntu

序章

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

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

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

このチュートリアルでは、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 他の人がプロジェクトについてもっと知ることができるように、フィールドや他の設定
The homepage 設定は、自分のWebサイトを表示するためにのみ使用され、このアプリケーションを実行している実際のサーバーの設定とは関係ありません。

今、あなたは持っている必要があります bower.json 作業ディレクトリ内のファイル（/usr/share/nginx/html/）上記の出力に示されている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

これで、Bootstrapがインストールされました。 bower_components/bootstrap 縮小バージョン（これを使用します）へのパスを持つディレクトリは次のとおりです。 bower_components/bootstrap/dist/js/bootstrap.min.js JavaScriptファイルと bower_components/bootstrap/dist/css/bootstrap.min.css 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/angularjs/angular.min.js それよりも bower_components/angular/angular.min.js.

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

（これは基本的に、ブートストラップからのサインインテンプレートの例であり、 <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.json Bowerがプロジェクト構成に使用するファイル。プロセスは次のようになります。

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 スイッチ、それらはに保存されます bower.json dependenciesオブジェクト内のファイル。たとえば、次のコマンドを使用して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を使用する方法についても理解しておく必要があります。

getdocs

13036