LoginSignup
2
2

More than 5 years have passed since last update.

BluemixでBowerを使う(非推奨)

Last updated at Posted at 2016-10-12

追記1
Bowerは、deprecatedとなっています。
この記事は、以降の参考のために残しますが、新規の開発はWebpack等を使いましょうね。

deprecated bower@1.8.0: ..psst! While Bower is maintained, we recommend Yarn and Webpack for new front-end projects! Yarn's advantage is security and reliability, and Webpack's is support for both CommonJS and AMD projects. Currently there's no migration path but we hope you'll help us figure out one.

追記2
Bluemix DevOps Service (hub.jazz.net) のサービスは、停止になりました。今後は Continuous Deployment を使うことになります。ですので、下記の手順は、そのままでは使えません。
一方、ツールチェーン作成時に導入されるサンプルコードにはBowerがすでに組み込まれております。

記事本文

Bluemixのcfインスタンスとしてnode.js, express環境を作成しMEANスタックでの開発を行うのは、一般的な開発手順ですみます。一方でフロントエンドのレポジトリであるbowerも、MEAN環境での一般的なツールでありますが、日本語でまとめられた設定手順がweb上にありません。ここに手順メモをシェアいたします。

前提

  • BluemixのCloud Foundry ランタイム・インスタンスとしてnode.js環境を構築していること。
  • Bluemix DevOps servicesのGitレポジトリ機能を使用し、ローカルで開発・git pushでアップロードする運用をしていること
  • ここでは git clone で作成したローカルのプロジェクト・フォルダをdev/とします

git clone で生成したローカルのプロジェクトフォルダに移動する。

> cd dev/

プロジェクトに、bowerを組み込む

> npm install --save bower

プロジェクトのpackage.json における dependencies にbowerが追加されます

プロジェクトにおけるbowerの初期化を行う

> bower init

ここでは、この選択肢はYesで返答します。

? would you like to mark this package as private which prevents it from being ac
cidentally published to the registry? Yes

上記以外は全てデフォルトでOK。

プロジェクトフォルダのルートにてbower.jsonが作成される。

bowerを使ったinstallを実施する。

この例では bootstrap をインストールしている

> bower install bootstrap --save

bower.json の dependencies に bootstrapが追加される。

またプロジェクト内にbower_componentsフォルダが作成され
その中に bootstrap フォルダ, jqueryフォルダが作成され、ファイルが保存されている

gitにフォルダを無視させる設定 .gitignore ファイルを作成する。

プロジェクトフォルダのルート (dev/) にて .gitignore ファイルを作成する。
これにより、gitは、bower関連の雑多なファイルを無視するため、
変更がcommitに反映されないし、Bluemixへgit pushする際に、雑多なファイルが送信されなくなる

.gitignore

/node_modules/
/bower_components/

参考: Windowsエクスプローラーでドットファイルを作成する
http://qiita.com/sgur/items/745e0ee02c69b50bf9e5

package.json に bower install を自動実行させる設定を組み込む

プロジェクト・ルート・フォルダの package.json にて

  "scripts": {
    "start": "node app.js"
  },

 を、次のように設定追加

  "scripts": {
    "start": "node app.js",
    "postinstall": "bower install"
  },

bowerで導入されるパッケージをpublicと同様に公開するための設定

/public と /bower_components が同じフォルダに存在する構成。

  / 
    |
    |- /bower_components
    |    |
    |    |- /bootstrap
    |    |- /jquery
    |
    |- /public

なので、次のように プロジェクトルートフォルダの app.jsに staticミドルウェア関数設定を追加する。

app.use(express.static(__dirname + '/public'));

上記の行のようにstaticミドルウェア関数を設定している行があれば、下記のように追加する。

app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/bower_components'));

以上の設定で、git push すればOK

http://~~~.mybluemix.net/bootstrap/****.js でアクセスできるはずです。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2