helen's blog

ずっとおもしろいことしてたいな。

deployerのprepareでこけるとき

deployerのprepareが実行されるとき

  [RuntimeException]
  Unable to login with the provided credentials.

が出てるけどそのuser,PW,鍵でSSHログインできる謎にはまったのでめも

原因

あとphpseclibがDSAに対応していない

Add support for DSA · Issue #216 · phpseclib/phpseclib · GitHub

ぷぇー
こんなんドキュメントのどこに書いてあるんだー( ´_ゝ`)

GulpとEJSで設定をできるだけ減らしてみた

設定ファイルを手で書くとミスるし
ストレスマッハなのでがんばって減らしてみました

ファイル構成

ページの中身をcontentsとしてURLに合わせてディレクトリを切り、
それぞれのjndex.ejsの上下にheadやらfooterやらをくっつけて使います

.
├── contents # ページの中身
│   ├── index.ejs
│   └── hoge
│       └── fuga
│           └── piyo
│               └── index.ejs
└── layouts
    ├── common # front、mypageから使う共通系パーツ
    │   ├── _navi.ejs
    │   ├── _localNavi.ejs
    │   ├── _logged.ejs
    │   └── _notLogin.ejs
    ├── front # フロントで使用するパーツ
    │   ├── _footer.ejs
    │   └── _headTag.ejs
    ├── frontAfterContent.ejs # フロントの要素の後につけるパーツ
    ├── frontBeforeContent.ejs  # フロントの要素の前につけるパーツ
    ├── mypage # ログイン後に使用するパーツ
    │   ├── _footer.ejs
    │   ├── _headTag.ejs
    │   └── _header.ejs
    ├── mypageAfterContent.ejs # ログイン後の要素の後につけるパーツ
    └── mypageBeforeContent.ejs # ログイン後の要素の前につけるパーツ

headerやfooterの間をクルクル回すのをよく見るけど
for文書くとどこで何が動いてるのかわからなくなるので、
各contentsで何を呼ぶか明示します

gulpfile

ここでfor文で回すのをよく見るけどやらず、コンパイルして拡張子をhtmlにしてるだけ
contents/**/*.ejsな感じにすると
ディレクトリ階層を維持したままコンパイルしてくれるので設定書かなくて済む

const gulp = require('gulp');
const ejs = require('gulp-ejs');
const jsonData = require('./settings.json');

gulp.task('default', ['main']);
gulp.task('main', ['ejs']);

gulp.task('ejs', function(){
    return gulp.src(
        ['contents/**/*.ejs', '!' + 'contents/**/_*.ejs']
    )
        .pipe(ejs({jsonData:jsonData}, {'ext': '.html'}))
        .pipe(gulp.dest('../'));
});

setting.json

設定をまとめて名前をつけて呼び出せるようにして

{
    "default":{
        "title":"title",
        "description":"description"
    },
    "hogefugapiyo":{
        "title":"fugaaaa",
        "isLogin":true
    }
}

こんな感じで呼び出す

<% data = jsonData.default; %>

特に個別の指定がなければdefaultとか書いとく感じ
CakePHPだとcontrollerでtitle、descriptionを決めれるから(こうあるべきかは別の話)
URLのコントローラーまでの設定を作っとけば
同じコントローラーのアクションどうしはその設定を使いまわせるっていう幸せ

呼び出し

使いたい設定の名前を変えるだけ

<% data = jsonData.default; %>
<%- include('../layouts/frontBeforeContent', data); %>
<!-- 要素 -->
<%- include('../layouts/frontAfterContent'); %>
<!-- frontAfterContentは渡すデータがないから書いてないけどdataあると今後幸せになれそう -->

で、上下のパーツは

$ cat layouts/frontBeforeContent.ejs
<!DOCTYPE html>
<html>
  <%- include('../layouts/front/_headTag', data) %>
  <body class="lo1 skin-blue">
    <%- include('../layouts/common/_gnavi') %>
    <%- include('../layouts/common/_makeNavi') %>
    <%- include('../layouts/common/_akibaNavi', data) %>
$ cat layouts/frontAfterContent.ejs
    <%- include('../layouts/front/_footer') %>
  </body>
</html>

各小パーツを呼び出すだけにして、
1箇所いじれば全部に反映されるようになってる

ログイン判定

ログイン前ログイン後で表示が変わるものは設定ファイルで管理

ログイン済みにしたいページのみsettingにこれを追加して

"isLogin":true

パーツはこんな感じにする

<% if(data.isLogins){ %>
    <%- include('../common/_logged'); %>
<% } else { %>
    <%- include('../common/_notLogin'); %>
<% } %>

まあほんとはtrue,falseで管理されてるのかわかんないけどねー
isLoginがtureってイメージしやすいからそう書いてます

json書きたくねーymlにする!って言ってたけど
最終的にymlにするのがめんどうになりました

GulpとEJSやってみた

フロントのコーディングを早めるために使い始めるらしいのでやってみました

使うもの

Gulp

スクランナーしてくれるやつ
gulp.js - the streaming build system

EJS

JSをつかってHTMLを生成してくれる
includeとかして楽できる
EJS -- Embedded JavaScript templates

Gulpから試してみる

ファイルを移動するだけの簡単なお仕事です

インストール

$ npm install gulp --save-dev

設定ファイル作成

$ vim gulpfile.js

const gulp = require('gulp');

gulp.task('ejs', function() { // タスク定義
    gulp.src(
        ['./*.ejs', '!' + './_*.ejs'] // _から始まるejsファイルを除外
    )
        .pipe(gulp.dest('../dist')); // 出力先
});

ejsファイルをdist/に出力という設定です

実行してみた

$ vim ejs/hoge.ejs
hoge
$ gulp ejs 
Local gulp not found in ~/hoge/ejs
Try running: npm install gulp

あるぇー入れたのになー
link | npm Documentation
どうやらグローバルのnpmにリンクを貼らないといけない模様

$ npm link gulp
/Users/heleeen/hoge/node_modules/gulp -> /usr/local/lib/node_modules/gulp

$ gulp ejs 
module.js:338
    throw err;
          ^
Error: Cannot find module './lib/_stream_transform.js'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/heleeen/hoge/node_modules/gulp-ejs/node_modules/through2/node_modules/readable-stream/transform.js:1:80)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

モジュールが足りないらしいので
足りないものを一気に入れちゃいます
ちなみに入れ直しでごちゃごちゃエラー出たので
一旦node_modulesディレクトリ抹消しました

$ npm install -g npm-install-missing
/usr/local/bin/npm-install-missing -> /usr/local/lib/node_modules/npm-install-missing/bin/npm-install-missing
npm-install-missing@0.1.4 /usr/local/lib/node_modules/npm-install-missing
├── async@2.0.1 (lodash@4.15.0)
└── npm@3.10.6

【Node.js】足りないモジュールをたったの一行でインストールするコマンド - Qiita

今度こそ

$ gulp ejs
[12:49:29] Using gulpfile ~/work/gulp/gulpfile.js
[12:49:29] Starting 'ejs'...
[12:49:29] Finished 'ejs' after 15 ms

# 確認
$ less dist/hoge.ejs
hoge

できた

ejsでhtmlをincludeして楽しちゃう

次はejsをパーツ化してincludeして
共通パーツは1つのファイルを編集すれば同じ箇所が変わるようにしちゃいます

インストール

$ npm install gulp-ejs --save-dev

準備

# 荒れそうなのでsource/からdist/に出力します
$ vim gulpfile.js
const gulp = require('gulp');
const ejs = require('gulp-ejs');

gulp.task('ejs', function() {
    gulp.src(
        ['./source/*.ejs', '!' + './source/_*.ejs']
    )
        .pipe(ejs({}, {'ext': '.html'})) // 拡張子指定
        .pipe(gulp.dest('./dist'));
});

# 用意したファイル
$ ls -l source
-rw-r--r--  1 helen  staff  46  9 11 12:59 _footer.ejs # htmlにしたくないファイルは_つける自己ルール
-rw-r--r--  1 helen  staff  66  9 11 12:58 _header.ejs # htmlにしたくないファイルは_つける自己ルール
-rw-r--r--  1 helen  staff  63  9 11 13:01 hoge.ejs

$ vim source/hoge.ejs
<%- include('./_header') %> # _header.ejsをinclude
hoge
<%- include('./_footer') %> # _footer.ejsをinclude

# 実行
$ gulp ejs
[00:23:31] Using gulpfile ~/work/gulp/gulpfile.js
[00:23:31] Starting 'ejs'...
[00:23:31] Finished 'ejs' after 13 ms
# 確認
$ ls -l 
ls -l dist
total 8
-rw-r--r--  1 helen  staff  121  9 12 00:23 hoge.html # できてる!

$ less dist/hoge.html # いい感じ!
<head>
  <meta charset="utf8">
  <title>gulp test</title>
</head>
hoge
- 
<footer>
  <p>Copyright heleeen</p>
</footer>

拡張子変換してるとこ

さっきのにあるこれだけ
jsonファイルを使わないため適当にかっこつけたのですがうまくいきました

 .pipe(ejs({}, {'ext': '.html'}))

gulp-ejs 2.0.0 で .html ファイルを出力する場合拡張子の指定が必須に - Qiita

deployerをちょろっとためしたいだけなのにいきなりsyntax errorされた件

deployerについてはこちら↓
Deployer — Deployment Tool for PHP

ちなみに選定理由はPHP製デプロイツールをググって一番最初に出てきたことです
あと公式サイトがかっこよすぎてやばい

導入

$ curl -L -O http://deployer.org/deployer.phar

エラー内容

PHP Parse error:  syntax error, unexpected '[' in phar:///home/vagrant/deployer.phar/bin/dep on line 14

原因

deployerはPHP5.5以上が必要
yum install phpしたときは5.3のためエラー

PHP5.5以上をインストール

$ sudo rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
$ sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm

$ sudo yum -y install --enablerepo=remi --enablerepo=remi-php56 php php-opcache php-devel php-mbstring php-mcrypt php-mysqlnd 

$ php deployer.phar deploy


  [RuntimeException]
  You need to specify at least one server or stage.


deploy [-p|--parallel]

動きはした
一旦動かしたいだけなので不思議な動かし方をしていることは気にしない