vagrant, chefメモ

Jenkinsを実行しようとしたときに、ローカルユーザーとJenkinsユーザーで、グローバルに入れてたツールが権限で読めなかったりしました。
アプリだけじゃなく、実行する環境を文書化して、自動構築できるようにしておくことも重要だと感じ、勉強し試してみました。
なお、vagrantは基本をドットインストールで勉強、http://dotinstall.com/lessons/basic_vagrant
chef, berkshelfは、qiitaで見ました。
では、その時にあった問題メモを以下に記載します。

1. windowsで、gitデータでの実行を確認

windows側でもう一度実行しようとしたら、古くなっていたのか、npm installからは動かなくなっていたので、nodejsのバージョンアップからやり直し。

npm updateで、パッケージもバージョンアップ。

2.vagrant, chefの準備

vagrant plugin install vagrant-berkshelf

が、開発をやめるので、あまり使わない方がよいとあったが、その後、pluginを作り直したそうなので、普通に使える。

http://qiita.com/DQNEO/items/b8d2c2d88189812d6e68

chefDKを、vagrant側に入れようとしたけど、設定ファイルですぐに出来なかったので、windows側に入れることにした。

vagrant側は、plugin(vagrant-omnibus, vagrant-berkshelf)で入れる。

3.vagrantを起動して、必要なツールインストールを記述する。

bundle installのために、bundler追加

npm install -g bowerのために、git追加

npm install -g は、権限のため、sudo

npm installのとき、rebuildしているらしく、g++が必要。

apt install g++ で、入れることができた。

レシピを探すが、単独はないので、build-essentialを入れる。

sudoが必要。

vagrantの共有フォルダは、シンボリックリンクが作れないのでnpm installで、エラーとなる。

npm install --no-bin-linksで、エラーはなくなるが、実行時エラーとなるので、共有フォルダではなく、homeで実行する。

nodejsのバージョンが、最新ではないみたいで、warningが出てる。 → 

nodejs最新->5.x

http://qiita.com/notsunohito/items/eb719b3206981159cc05

https://github.com/nodesource/distributions

gemfile → Gemfile

jadeファイルのパス表記が、windows→linuxで、\→/

npm install -g で必要なものは、defaultレシピで、shellで実行。

jade, coffee-scriptは、グローバルインストールは不要。(--save-devで入れてたみたい)

4.gulp test

ここで、gulp lint, gulp buildは、実行可能となる。

のこりは、gulp test

protractor exited with code 8

Chromedriverがないと言われる。

→

protractor.conf.coffeeに追加。

chromeDriver: './node_modules/protractor/selenium/chromedriver'

https://github.com/angular/protractor/blob/master/docs/referenceConf.js

最新バージョンでは、実行できないので、ダウングレードが必要らしい。ダウングレードが面倒なので、対応するまで待つことにする。

https://github.com/angular/protractor/issues/2638

nodejsを最新にしたら、解決してるっぽい。

しかし、他のエラーが出てる。

5.vagrant内のシェルで実行を試してたのも、provisionで実行するように記述。

gitから、ソースを取得。bundle, bower実行。

bower install

→sudo bower install -f --allow-root

npm

/tmp/npm-0/.npm/4f4b43d0-m-0-npm-lodash-2-4-1-package-tgz.lock

→npmのバージョンが古いと、複雑なpackage依存で起こるらしい。

https://github.com/npm/npm/issues/6309

→npmのアップデート

→表示が前と変わったけど、killedって表示されてる。途中で終わっているようで、node_modulesの中に何もない。

→メモリーを増やす

    512->2048

gulp-filterの書き方が変わっていた。



追記(2015/11/22)

JDKが、java cookbookだと、デフォルトで、6が入るらしい。その影響でwebdriverが動かなかったようなので、JDKバージョンを指定して入れる。

   JDK6->7

xvfb用に、DISPLAY=:0 つける。

protractor.confに、directConnect: trueを追加。

https://github.com/angular/angular-phonecat/issues/276

Jenkinsメモ

ホームページのソースについて、gulpを用いて、自動でbuildなどしていましたが、Jenkinsを使って実行できるようにしました。
「CIしたい」というよりかは、「Jenkins使いたい」というための、勉強のようなもの。
出来るようにしたことは、以下の通り。

1.build
  gitからチェックアウト
  npm installなどで、必要な環境構築
  Jadeやsassなどからビルド

2.lint
  coffee-scriptやsassなどのソースを解析
  checkstyleなど

3.test
  動作について、e2eテスト
  ユニットテストもしたかったけど、するほどのソース量がなかった。

4.deploy
  buildしたソースをサーバーに転送する



これらのJenkins設定を行う際にあった問題と解決について、メモがあるので以下に記載します。メモなので言葉足らずなところもあるかもしれませんが、後で気が向いたら追記します。少しでも何か参考になれば。

jenkinsメモ

1.Jenkinsが、グローバルに入っている、gulpなどを読み取れない。

カスタムワークスペースを利用

C:\Users\sora\Documents\Jenkins\myweb

npm config set cache C:\npm\npm-cache --global

http://kakakikikeke.blogspot.jp/2013/08/windowsjenkins.html

実行ユーザがLocal SystemになっているためWindowsに設定しているJAVA_HOME等の環境変数が有効になっていない

■解決方法

ファイル名を指定して実行からservices.mscを入力

一覧からJenkinsを探す

右クリックからプロパティを開く

プロパティダイアログが開いたらログオンタブを選択

アカウントを選択しWindowsにログインするユーザ名とパスワードを入力する

アカウントを検索した場合は参照から検索できる

名前を入力して「名前の確認」というボタンを押下するとそのユーザがいるかどうかを確認できる

アカウントが設定できたらプロセスの一覧画面に戻り右クリックから再起動を実施すると環境変数が反映される

2.build

json,jadeのデータが一部gitにあげてないので、ローカルでコピーする　→タスクとして追加

3.test

A Jasmine spec timed out. Resetting the WebDriver Control Flow.

  繝�繧ｹ繝茨ｼ域峩譁ｰ螻･豁ｴ�ｼ�

    笨� 繧ｵ繝悶Γ繝九Η繝ｼ縺ｮ譛�蠕後�ｮ隕∫ｴ�縺ｯ縲�2006蟷ｴ縲�

      - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

「Windowsではサービスとしてcronなどのdaemonを起動させると、そのプロセスからはGUIアプリケーションを立ちあげて動作させることが出来ない制約があります」

らしい

→ローカルでマスタースレーブを作り、起動してそちらで実行することに

コンソール文字化け

　→環境変数に以下を追加

JAVA_TOOL_OPTIONS=-Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8

http://www.ramuda.co.jp/techlabo/archives/2609

4.lint

scss-lint

バージョンが古かった。更新した。

gemfileを今まであまり扱っていなかった。

coffee-lint

checkstyleがconsole.logに出力される

ファイルに出力したい。　→　一時的に、console.logを変更

色情報を消したい　→　正規表現で削除

console.log = (d) ->
log_file.write d.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '') + '\n'

5.deploy

パスワードなどを、引数として指定するようにし、ファイルに保存しない

conn.newer　としているけど、新規だけじゃなくすべてのファイルが転送される。

転送時に更新日時が更新されてる？

→different size とした

gulp buildが、--release --jenkins　をjenkinsで実行した時のみエラーになる

6.フロー

フロー表示をしたかった。

pipeline pluginを入れた。

もやしもん１２

もやしもん(12)限定版 (プレミアムKC イブニング )


西野さんを交えて、大きなテーマは、以下の２つ
　日本酒業界
　大人って何？


日本酒業界については、
桶取引、逆桶買いなど

お酒についてはよくわからないから、
そういうのもあるんだ。
美味しければ、作り手も納得してればそれでいいじゃない？と思ってたけど、
改めて読むと、著作権の話とか関連するかなと思って気になる。

あと、いつもの様に、お酒の作り方、菌たちの仕事などが解説されていて、
お酒飲めないのにお酒知識がつくよｗ



大人って何？については、
はじめに読んだ時は、ふんわり思っていたけれども、
改めて読みなおして、自分も以前より少しだけいろいろ経験して時間が過ぎたからか、
共感できる言葉が、多くあるなぁと思える。
前よりも、共感する内容の意味がよりはっきり認識できたかな。


以下に、その、読んでて、わかる！とか、いいねと思った言葉を抜粋します。

　　西野さんの「私のことを分かった風に決めつけないで」

　　ワインは加点法、日本酒は減点法。人でも減点より褒められたいね。

　　転機っていうのは後付で、
　　実は毎日ってのはつながっているからいきなり変わったりしない
　　転機を待たなくても、やりたいことをやればいい

　　大学生ってなってみたらガキだよね
　　小学生の頃は中学生は大人に見えたけれど、自分が高校生になったら小学校の時と変わらない
　　「大人」は常に私から遠い

　　二十歳になったら大人の仲間入りするんだと思っていたけど、相変わらず大人は二十歳なんて鼻であしらって子供扱い

　　先達が今日までやってきたことは、君たちはもう一からやらなくても容易に手にすることが出来る
　　君たちにとって素晴らしいリードだ
　　僕なんかよりもずっと先に進める可能性を持っているんだ

---

→もやしもん

JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで

jQueryは、別の本で読んでみたり、なんとなくwebの情報で使っていたjavascriptだけれど、一度本で学んでみようと思って、買って読んでみました。

各章としては以下のとおり。（正確な章の名前ではなく、扱っている内容を記載）
Capter1　javascriptとは？
Capter2　基本的な文法、型、制御命令など
Capter3　基本データ型、オブジェクト
Capter4　関数
Capter5　オブジェクト指向構文
Capter6　ブラウザオブジェクト
Capter7　DOM
Capter8　Ajax
Capter9　jQuery
Capter10　現場で使うための応用知識（JsUnit/JsDoc/コーディング規約など）


前半の、Capter２～5が知らなかった内容。
後半の、Capter6～は、だいたい知っている内容でした。

特に、関数やオブジェクト指向構文などは、webの使用例などを見ているだけでは構文として学べなかったので、良かったと思います。
この本を読んだ後に、webの記事を見なおしていると、分かる部分が増えて理解が深まりました。

後半については、この本が、2010年に発行されたもののため、その後、ライブラリやフレームワークが色々出ているのは反映されていません。
そのため、もともと知っていたことが含まれていることもあり、参考程度でした。



ひと通り、基本的な文法を確認したので、次に読む本に悩むところ。
目次レベルだと、あまり差がわからないものもあり、、、
オライリーのjavscript（サイ本というらしい）は、分厚いし、
JavaScript: The Good Partsは、書評によると癖が強いらしい？出版も2008年と古め
JavaScriptパターンは、書評がわからないけれど、ちなみに出版は2011年
Effective JavaScriptを読んでみようかな、、いいという書評も見たし、この中では2013年発行と一番新しい。

ES6という新しい標準化が出てきているらしいし、その解説か、
Coffeescriptの文法を確認したほうが良いかなぁ
（coffeescriptは、{}を書かなくて良いのとかインデントが楽で好き）

なお、最近は、これも読んでる　→JavaScript Promiseの本

webページ更新しました。というか、webのお勉強 →bootstrap →webテスト

webページ更新しました。
・・・といっても、コンテンツとしては特になく、構造をね。。。
webコンテンツ作成の勉強になった。

そして、更新履歴を見て、約１年ぶりの更新。。。


以下に、変更点を記載します。

＜template＞

foundation　→　bootstrap

　簡単。
　この前が、jadeでlayoutを外出ししていたため、そこの構成やclass名を変えるだけですぐに対応できた。

＜追加導入＞

サブメニュー

　　これまでサイドのメニューは、topのメニューと同じにしていたけど、同じページ内の項目にしてみた

ページtopへ

　　ページの右下などでよく見る。同じページのtopへ移動ボタン追加。
　　これも、bootstrapであるかと思ったんだけど、無いようなのでjsにサンプルからそのまま記載

affix

　サイドのメニューが、スクロールしても同じ位置に固定する機能。
　bootstrapにあったので、追加してみた。
　追加で、レスポンシブで幅が狭い時は、上部にあるため、コンテンツと被らないように、実施しないよう@mediaで制御追加

scrollspy

　スクロールしていると、現在のコンテンツにあわせたサブメニューの見出しをactive表示して、自分が今どれを読んでいるか分かるもの。bootstrapのサイトでも利用されている。
　こちらも、bootstrapにあるので追加してみた。
　スクロールを始めると、サブメニューの幅が小さくなるというバグが有るらしいので、それにも対応。

fontawesome

　

js concat

 　bowerのものを、１つにconcatしようとしたけれど、jsは順番がやっぱり重要で、順番が異なると動かない。依存関係を確認するというのをいろいろ調べたけれども、できなかったけど、
　　bower.json内のdependenciesの順番変更したらすぐ出来た。
　　dependenciesは、アルファベット順かと思っていたけど、変更できたみたい。

＜構成の分離＞

jade内の記載のうち、ページ構成ではないデータをjsonに分離
繰り返し処理のPGM化促進　変更履歴など

＜CSS＞

css spriteを利用しようとして、うまくいかないからやめた
後で、これだけ試す

scssをsass記法に変えようとして、うまくいかないし、bowerのscssファイルを現在参照しているので、やめた

＜gulp＞

browsersyncで、変更があったらブラウザ上もリロードして確認
gulpのcoffeeコンパイルを、これまで、coffeeだけのもので行っていたけれど、webpackで行う

＜webテスト＞

karma・jasmine

この辺を見て、勉強したので、使ってみようと思った。
静的サイトなので、特にjsのロジックはなく、animationぐらいなんだけど、試してみようとした。
http://qiita.com/hosomichi/items/4e508e804b0e50e7b6ec
http://qiita.com/hosomichi/items/311e3eac4f55183b62c2
http://qiita.com/hosomichi/items/7464c69bf54927d019a7


こちらにもwebpack導入。テストをcoffeeで書くため

DOMの操作をしやすくするよう、karma jquery導入

ページが表示されないと思ったら、相対パスが異なっていた。（specファイルからの相対位置ではない？）
　document.body.innerHTML = window.__html__['../WebContent/history.html']
→document.body.innerHTML = window.__html__['WebContent/history.html']

jsのcoverageがとれないと思ったら、パス指定の間違いだった（間に空白入ってた）
　'WebContent/js/**/* .js': ['coverage']
→'WebContent/js/**/*.js': ['coverage']

karmaでwebページ動作テストをしようと思ったが、ページリンク動作がうまく動かず
結局、karmaはunit testで、integrated testじゃねーからと言われたので、
ひとまずunit testのみを行うことにする
、、、が、単体で出来る事もないのでやめたｗ
http://bittersweetryan.github.io/jasmine-presentation/#slide-17

protractor

そこで、end to endテストを行うことにした。
karmaにも、end2endのプラグインが（非公式？？）あるようだけど、動かなかったので、e2e用という、protractorを利用してみる。
はじめ、for AngularJSと書かれていたので、他のだと使えないと思って諦めていたけど、使ってみたら出来た。検索したら、Angular以外で利用しようとしている人も、まあまあいるみたい

tutorialが、confとspecをjsで書かれていたが、coffeeで書きたい。
エラーが出ていたが、byがcoffeescriptの予約語とかぶっている記事を思い出して、Byに変更すると実行できた。

windowサイズ初期化

リンククリック後のスクロール値取得しようとしたが、animationで時間差があるため、sleep使用

helper関数化

テスト完成後、共通部分を関数として外出し
　しかし、javascriptの文法＋coffeescriptの文法がいまいちわかっていないので、なかなか動かない。結局、()のあるなしで動かなかったみたい。
　　getScrollTop
　→getScrollTop()

さらに、helper関数として外出し

サーバー終了設定

gulpの設定で、こちらの方法で、サーバーのexitをしようとすると、テスト実行されない
https://github.com/schickling/gulp-webserver/issues/48

こちらの方法で、終了時の処理を入れると、テストが実行後、自動終了するようになった
    .on 'end', -> process.exit()
http://stackoverflow.com/questions/29968380/how-to-exit-protractor-when-done


なお、参考までに、最終的なspecファイルはこちら。

<e2eSpec.coffee>

h = require('../helpers/helper')

describe 'テスト（更新履歴）', ->

  submenu_link_list = $$('.submenulist li')
  submenu_link_last = submenu_link_list.last()
  submenu = $('.submenulist')
  mainrow = $('.main-row')
  gototop_link = $('.gototop')

  SLEEP_TIME = 1000
  INIT_WINDOW_WIDTH = 1500
  INIT_WINDOW_HEIGHT = 1000
  SCROLL_TEST_ITEM = 5


  beforeEach ->
    browser.driver.manage().window()
        .setSize(INIT_WINDOW_WIDTH, INIT_WINDOW_HEIGHT)
    browser.ignoreSynchronization = true
    browser.get browser.baseUrl+'/history.html'
    return


  it 'サブメニューの最後の要素は「2006年」', ->
    expect(submenu_link_last.getText()).toEqual '2006年'

  it 'サブメニューの最後の要素のリンク先は、#submenu[0-9]*であること', ->
    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->
      expect(submenu_link_url).toMatch '#submenu[0-9]*$'

  it 'サブメニューリンクをクリックすることで、ページ内リンク先に移動すること', ->
    # 初期スクロール位置の確認
    expect(h.getScrollTop()).toEqual 0

    # サブメニューリンクをクリック
    submenu_link_last.click()
    browser.sleep(SLEEP_TIME)

    # クリック後のスクロール位置の確認
    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->
      submenu_link_id = h.getLinkId(submenu_link_url)
      $(submenu_link_id).getLocation().then (locationdata) ->
        mainrow.getCssValue('padding-top').then (headerH) ->
          expect(h.getScrollTop()).toEqual locationdata.y - parseInt(headerH, 10)


  it 'スクロールすると、サブメニューが合わせて移動すること', ->
    # サブメニューの初期location取得
    init_locationdata_y = 0
    submenu.getLocation().then (locationdata) ->
      init_locationdata_y = locationdata.y

    # スクロール
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)

    # スクロール後のサブメニューの位置が、スクロール量+初期locationであること
    h.getScrollTop().then (scrollTop) ->
      submenu.getLocation().then (locationdata) ->
        expect(locationdata.y).toEqual scrollTop + init_locationdata_y

  it 'スクロールすると、scrollspyが動作すること', ->
    # 初期はactive状態ではないこと
    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(false)

    # スクロール
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)

    # スクロール後に、titleに一致した項目がactiveになっていること
    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(true)

  it 'トップへボタンで、ページ先頭に移動すること', ->
    # トップへボタンをクリック前に、スクロールする。初期位置がページ先頭でないこと
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)
    expect(h.getScrollTop()).toBeGreaterThan 0

    # トップへボタンをクリック
    gototop_link.click()
    browser.sleep(SLEEP_TIME)

    # ページ先頭に移動していること
    expect(h.getScrollTop()).toEqual 0

<helper.coffee>

module.exports = {
  getScrollTop : ->
    browser.executeScript('return document.body.scrollTop;')

  hasClass : (element, cls) ->
    element.getAttribute('class').then (classes) ->
      classes.split(' ').indexOf(cls) != -1

  getLinkId : (url) ->
    url.substring(url.lastIndexOf('#'), url.length)
}

＜今後＞

今後、追加でやりたいことメモ
・Jenkinsでテスト　CI　→（7/14 build/test/lint）
・css sprite　→アイコン整理したら、spriteする画像がなくなった。。。
・coffeescript lint　→（7/11）
・sourcemap　→（7/11 仮）
・SNSアイコン変更　→　（7/15）
・gulpファイルをtaskで分割　→　(11/26)


なお、現在、こちらの本で、javascriptのことを一旦勉強中。