一人もくもく会 α verでサービス開始しました。

CakePHP3プロジェクトをwerckerで無料CI

werckerにて、CakePHP3プロジェクトの無料CI設定をしたログ。

良いDockerイメージがなくwercker-laravel5を参考に作成したので、 基本的には下記に書いてあることそのままで設定可能。

https://hub.docker.com/r/dala00/wercker-cakephp3/

DBのホスト名とポートが環境変数で渡されるのでapp.phpのDBのtest設定を下記のように変更。

'host' => env('MYSQL_PORT_3306_TCP_ADDR', 'localhost'),
'port' => env('MYSQL_PORT_3306_TCP_PORT', 3306),

そしてwerkcer.yml

box: dala00/wercker-cakephp3
services:
  - id: mysql
    env:
      MYSQL_ROOT_PASSWORD: rootpasswd
      MYSQL_USER: testuser
      MYSQL_PASSWORD: testpasswd
      MYSQL_DATABASE: testdb

build:
  steps:
    - script:
        name: Install dependencies
        code: |
          composer install

    - script:
        name: Run phpunit
        code: |-
          vendor/bin/phpunit

MySQLは設定がデフォルトなので、not nullカラムを無指定で保存しようとするとエラーになる。 ローカルで設定を変えていたりするとそのへんでテストの差異が出るので、 ローカルも設定を合わせたりコンテナを使って開発したりなどの注意が必要。

カバレッジが必要な場合はこちら

alphabrend.hatenablog.com

Angular2プロジェクトをwerckerで無料CI

Angular2のプロジェクトをwerckerで無料CIした時の設定ログ。

angular-cliのng testを使用。

要件

下記を満たすDockerイメージが必要となる。

  • node7が入れられる
  • chromium-browserが入っている

Dockerイメージ

要件を満たすものを探してみたけどうまく見つからなかったので作成した。

https://hub.docker.com/r/dala00/chromium-xvfb-angular-cli/

wercker.yml

多分下記が最小。

box: dala00/chromium-xvfb-angular-cli

build:
  steps:
    - npm-install

    - script:
        name: test start
        code: |
          ng test --single-run

Dockerfileも小さいので別のnodeのバージョンのものが欲しい場合もすぐ作成できると思う。 (今回のも同様にして作った)

CodeshipでAngular2の無料CI

CodeshipでAngular2プロジェクトの無料CIの設定方法。

Setup Commands

nvm install 7.0
npm install -g npm@latest
npm install @angular/cli
npm install
npm list --depth=0

Configure Test Pipelines

ng test --single-run

ng testはファイルの変更を検知して永久にテストをしてしまうのでsingle-runオプションが必要。

Angular2のテスト時エラー備忘録

Angularでng testを行った時に色々とエラーが出るが、 検索するとだいたい決まりきったわけのわからない解決方法があり、 何度も調べたりすることになるのでメモっておくことにする。

随時更新。

ngModel

ngModelでエラーの場合はFormsModuleをimports。(app.module.ts参照)

No provider for Overlay!

import {OVERLAY_PROVIDERS} from "@angular/material";
providers: [OVERLAY_PROVIDERS],

Error: Error in ./MyComponent class MyComponent - inline template:5:8 caused by: Cannot read property ‘subscribe’ of undefined

template:5:8は見てみるとa routerLinkのところ。下記のRouterLinkStubDirectiveをdeclarationsに追加すればいい。

https://angular.io/docs/ts/latest/guide/testing.html#!#router-link-stub

もしrouterLinkを動作させるためにRouterTestingModule, RouterModuleやアプリケーションのルーティングモジュールなどをimportsしている場合は外す。

モック

本番と同じ動作をさせられない場合はモックを使う。

Angular2でコンポーネントのユニットテストを書いてみた - アルファブレンド プログラミングチップス

angular-cliでAoTによる高速化

Angular2はAoTというものがあり、動作を高速化することができる。

他の記事で色々設定が必要というものを見かけるが、angular-cliを使っている場合は元々機能があるのですぐ有効化することができる。

ng build --prod --aot

で有効化できるし、そもそも最新のangular-cliだとデフォルトで有効化されているため –aot オプションは不要。

Angular2.2から2.4にしてangular-cliも最新にしてみたところ、元々ビルドされたmain.jsが90MBほどあったものが800kBほどに最適化された。 スマホで10秒近くかかっていた初期化も改善された。

古いバージョンを使っている人は早めに最新バージョンに変更した方が良い。

ただ、色々と別のパッケージを使っていると思うが、それらはバージョンが合わないと動作しなかったりする。 自分もng2-tag-input0.8.5だと動かないので0.8.0にしたら動作したし、 ネット上の情報だと他にも同様のエラーがでるパッケージがある。 色々とバージョンの調整は必要。

Linux Mint 18でmailtodisk

Linux Mint 18でxamppに入っているmailtodiskと同じことができるようにした。 多分Ubuntu16あたりでも同じだと思う。

詳しくは

php - Use of mailtodisk / mailoutput in XAMPP for Linux - Stack Overflow

にかかれていることそのままなのだが、例えば下記のようなファイルを作成する。

/usr/local/bin/mailtodisk (実行属性を忘れないように)

#!/usr/bin/php
<?php
$input = file_get_contents('php://stdin');
$dir = '/home/yourname/Documents/mailoutput/';
$filename = $dir . 'mail-' . gmdate('Ymd-Hi-s') . '.txt';
$retry = 0;
while(is_file($filename))
{
    $filename = $dir . 'mail-' . gmdate('Ymd-Hi-s') . '-' . ++$retry . '.txt';
}
file_put_contents($filename, $input);

そして上記の$dirで保存フォルダを指定。 保存フォルダに書き込み属性を忘れずに。

あとはphp.iniのsendmail_pathに上記スクリプトを指定すれば良い。 apache用とcli用の2つがあった。

sendmail_path = /usr/local/bin/mailtodisk

さらに下記のようなものを以前作ったので、 localhost以下に適当に配置してブックマークしておけば簡単にメールを見たり削除したりできる。

GitHub - dala00/MailoutputViewer

Angular2アプリケーションを通常のサーバーにデプロイ

Angular2アプリケーションをangular-cliでビルドすると公開用のdistフォルダが作成されるので、 基本的にはこれをサーバーにアップすればそのまま動作する。

ただ、jsファイルはハッシュ値がついてファイル名が変わってしまうため、 多少気をつけないといけない。

簡単にデプロイするための方法として下記のような方法があげられる。

distフォルダもignoreせずバージョン管理してしまう

特に支障がなければdistフォルダもcommitしてしまえば良いと思う。

ソースに変更がなければ何度ビルドしてもハッシュ値は変わらない気がするので、 バージョンアップの際だけビルドしてそのままコミットで問題ないと思う。 あとは本番サーバーでpullするだけ。

デプロイ用のプログラムを作成する

何らかの理由でdistフォルダ以外は本番にアップしたくない場合、 上記方法は使えないので自動デプロイ用のプログラムを用意する必要がある。

具体的には下記のような処理のプログラム。

  1. 準備用フォルダを作成
  2. 準備用フォルダに最新のdist内ファイルを全てアップロード
  3. 本番フォルダと準備用フォルダを入れ替え

一人もくもく会 用にぱぱっと適当に作成したプログラムのサンプル。

Deploying script with sftp for Angular. 'npm run deploy' or 'npm run deploy rollback' · GitHub

必要に応じて準備用フォルダを事前に削除したり、古い本番フォルダを残してバージョン管理するなり削除するなりが必要かと思われる。

.htaccess

関係ないので補足になるが、ルーティングを使っている場合、トップページ以外からアクセスが来た場合もそのURLのページを表示しなければならないので、 下記のような.htaccessの設定が必要となる。

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]