読者です 読者をやめる 読者になる 読者になる
一人もくもく会 α verでサービス開始しました。

一人もくもく会をCakePHP3のみに変更

CakePHP Angular2 program 一人もくもく会

Angular + CakePHP3 で作成していた

一人もくもく会

だが、Angularを捨ててCakePHPのみに修正した。

お客さんのために作成したサイトでも何でもないのでSEO対策とかどうでも良かったのでAngularを入れて試したのだが、 そもそもGoogleボットがレンダリングした状態を認識すらしてくれなかった。

インデックスもされないし、コンテンツも取得されない。 流石にそれはサイトとして存在させるメリットすらないのでAngularを使うのをやめた。

Fetch as Google

Search ConsoleにFetch as Googleという機能があり、 クローラに実際にどのようにサイトが見えているかを確認できるのだが、 それを実行したところ「Loading…」のみが表示されていた。

原因

原因は不明。 ただ、公開直後はFetch as Googleでちゃんとレンダリングされていた。 途中でAngularのバージョンをあげたのでそのあたりが原因かもしれない。

原因の特定

今回は面倒だったので特定せずにCakePHPのみにした。

JavaScriptを使い、tryでエラーをcatchできるので、それで試してみると良い、とどこかに書かれていた。 結局クローラアクセスの場合だけ出るエラーなどがJavaScript上にある場合、こうなってしまうのかもしれない。 JavaScriptフレームワークでサイトを構築するときに気をつけなければならない点のようだ。

werckerでCakePHP3のカバレッジ

CakePHP program php

CakePHP3でwerckerのCIを設定している。 カバレッジも表示したいのだが、BitBucketのプライベートリポジトリは無料でカバレッジを表示できるサービスが多分無い。

そのため別途解決策として、 出力したカバレッジhtmlを他の適当にレンタルしているサーバーなどにscpで転送することでいつでも見られるようにしてみた。

先日作成したDockerイメージを少し改良してカバレッジと転送したものを作成した。

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

scpで転送するのでssh鍵をwerckerの環境変数に設定する必要がある。 また、pipelineの設定もする必要があるがそれらは下記のページが詳しい。

werckerを使ってBitbucketからさくらのVPSに自動デプロイ - funxion

これでビルドが実行するとサーバー上にhtmlがアップされている状態となり、 ブックマークしておけばいつでも見られる状態となる。 (単なるhtmlなので自分の場合IP制限をかけている)

さくらの共用レンタルで.php.htmlが表示できない

php program

さくらの共用レンタルだと、phpunitで出力したカバレッジファイルなどの.php.htmlという拡張子のファイルにアクセスすると

Premature end of script headers

というエラーが出る。

必要なフォルダ内の.htaccess

RemoveHandler .php

とすると正しく表示できるようになる。

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

CakePHP program

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 program

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

Angular2 program

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のテスト時エラー備忘録

Angular2 program

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