VPSにBowerをインストールして使用する方法

getdocs

2年前

ステータス：非推奨

この記事では、サポートされなくなったバージョンのUbuntuについて説明します。現在Ubuntu12.04を実行しているサーバーを運用している場合は、サポートされているバージョンのUbuntuにアップグレードまたは移行することを強くお勧めします。

理由： Ubuntu 12.04は2017年4月28日に保守終了（EOL）に達し、セキュリティパッチまたはアップデートを受信しなくなりました。このガイドはもう維持されていません。

代わりに参照してください：
このガイドは参考として役立つかもしれませんが、他のUbuntuリリースでは機能しない可能性があります。可能な場合は、使用しているUbuntuのバージョン用に作成されたガイドを使用することを強くお勧めします。ページ上部の検索機能を使用して、より新しいバージョンを見つけることができます。

序章

Bower は、javascriptライブラリやcssフレームワークなどのフロントエンドパッケージ用のパッケージ管理ソリューションです。 Node.jsで実行され、Gitを使用してほとんどのパッケージをフェッチしてインストールします。 Bowerを使用してインストールできるすべてのパッケージのリストを見つけることができます。

このチュートリアルでは、Ubuntu12.04を実行しているVPSにBowerをインストールします。独自の仮想プライベートサーバーと、Node.jsおよびNPM（Node Packaged Modules）がすでにインストールされている必要があります。そうでない場合は、このチュートリアルで概説されている手順に従ってセットアップを行ってください。

BowerをVPSにインストールします

まず、Gitをインストールします。この手順の詳細については、すばらしいチュートリアルを参照してください。基本的に、次のコマンドを使用してインストールできます。

sudo apt-get install git-core

Bowerをインストールするには、次のコマンドを実行します（Node.jsとNPMがインストールされていると仮定します）。

npm install -g bower

BowerがVPSにインストールされたので、使用可能なコマンドの詳細について、以下を実行できます。

bower help

rootユーザーを使用している場合、コマンドを実行するには、コマンドに次のオプションを追加する必要があることに注意してください。-allow-root ：

bower help --allow-root

プロジェクトでのBowerの使用

Bowerを使用してプロジェクトのパッケージ依存関係を管理する方法を見てみましょう。

Webサーバーのルートディレクトリに移動します。

cd /var/www

新しいフォルダを作成し、内部をナビゲートします。

mkdir project
cd project

これがプロジェクトのルートディレクトリになります。 TwitterBootstrapを使用するとします。 zipファイルをダウンロードしてクラウドサーバーで解凍することで利用できます。ただし、Bowerを使用すると、プロジェクトをパッケージに変換し、Bootstrapを依存関係として宣言し、Bowerにフェッチさせることができます。このために、依存関係をリストするbower.jsonというファイルが必要です。ここには、Bootstrapが含まれます。

したがって、プロジェクトのルートにbower.jsonという名前の新しいファイルを作成します。

nano /var/www/project/bower.json

次のように貼り付けます。

{
  "name": "my-project",
  "dependencies": {
    "bootstrap": ">= 3.0.0"
  }
}

ファイルを保存して終了します。プロジェクトには、依存関係としてBootstrap 3.0（またはそれ以降）が設定されています。 Bowerにフェッチしてインストールさせるには、宣言する必要のある他のすべての依存関係と同様に、次のコマンドを実行します（rootユーザーとして操作している場合は-allow-root を追加することを忘れないでください）。

bower install

プロジェクトにbower_componentsという新しいフォルダーが作成され、bootstrapとjquery（後者はBootstrapにはjQueryが必要なため、これもインストールされます）。とてもかっこいいです。

プロジェクトのVPSにすでにインストールされているパッケージを確認するには、次のコマンドを実行します。

bower list

このリストに、作成するアプリケーションに含める必要のあるファイルへのパスを含める場合（つまり、関連する.jsまたは.cssファイル）、-pathsオプションを追加します。

bower list --paths

パッケージをインストールする別の方法は、 install コマンドを使用して、VPSにインストールする実際のパッケージを指定することです。それでは、別のプロジェクトフォルダーを作成し、そこにBootstrapをインストールしましょう。

cd /var/www
mkdir project2
cd project2

新しいプロジェクトフォルダに移動したので、次のコマンドを実行します。

bower install bootstrap

同じ効果がはるかに速く発生することがわかります。この方法でBowerを使用して、BowerコンポーネントのWebサイトに必ずしもあるとは限らないgitエンドポイントまたはURLの最後に事実上すべてのものをインストールできることに注意してください。したがって、たとえば、同じコマンドを実行し、 bootstrap をgitアドレスに置き換えると、そのgitプロジェクトがフェッチされます。

bower install git://github.com/someone/some-package.git

または、フォルダに抽出されるzipファイルでさえ：

bower install http://www.example.com/package.zip

プロジェクト用にローカルにインストールしたパッケージをアンインストールするには、次のコマンドを実行できます。

bower uninstall bootstrap

もちろん、bootstrapをアンインストールするプロジェクトの名前に置き換える必要があります。

投稿者： Danny