PHPのテストフレームワークCodeceptionのインストール手順

今回は今はやりのPHPのBDDテストフレームワークであるCodeceptionをインストールする手順を紹介します。CodeceptionはCept/Cestと従来のPHPUnitと同様の形式でテストを記述することが可能です。
本記事の最後でCeptとCestそれぞれの雛型を作成するので違いが良く分かると思います。

目次

Codeceptionのインストール

環境

OS: AmazonLinux

手順

Remiリポジトリを追加する。

$ rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm

php-bcmathをインストールする。

$ sudo yum install -y --enablerepo=remi php71 php71-bcmath php71-mbstring

またgitもインストールしておきます。

$ sudo yum install -y git

Codeceptionをインストールする。

$ git clone https://github.com/Codeception/Codeception.git
$ cd Codeception
$ curl -s http://getcomposer.org/installer | php
$ php composer.phar install

codeceptの実行ファイルがある場所で以下コマンドを打つとバージョンとヘルプが表示されます。

$ php codecept
Codeception 2.3.8

EPELとRemiリポジトリを追加する手順を整理

最新のパッケージを入れようとすると大体EPELかRemiをよく使うので整理しました。
ちなみにAmazonLinuxを使う場合は最初からEPELは入っているので追加する必要はありません。

目次

EPLEの追加

$ sudo yum install epel-release

Remiの追加

CentOS7の場合

$ sudo rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

CentOS6の場合

$ sudo rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm

トラブルシューティング

AmazonLinuxを使う場合、amznリポジトリとEPELやRemiで注意しないとパッケージの依存関係が混在してしまうことがあります。
そのような場合は一旦パッケージを削除してamznかRemiのどちらかに偏らせましょう。

サンプルソースでVue.jsと生Javascriptを比較！YAML形式をチェックするソースを作ってみた

Vue.jsは学習コストが低いらしいので触ってみました。らしいというはVue.js以外に自分が触ったことがないから。
そもそもリアクティブってなんだ？という方には以下が分かりやすいです。
あなたは、”プロ・アクティブ”それとも”リ・アクティブ”？

世の中には自分から考えて行動を起こす人と、
他人に言われたり、何か物事が差し迫ってきて
行動を起こすタイプの人がいる。

前者をプロ・アクティブ
後者をリ・アクティブと言う。

引用元：Daily Inspiration

リアクティブの概要や登場の経緯はこちらが分かりやすいです。
リアクティブシステムが注目を集める理由 | Think IT（シンクイット）

もっと深い話が知りたい方はこちら。
リアクティブプログラミングとは何だったのか - Qiita

そしてVue.jsを学びたい方はこちら。
ChromeならF12を押してコンソールを開きながら動きを学ぶと理解が早く進みます。
はじめに — Vue.js

作成するサンプル

先にVue.jsで作ったサンプルがこちらです。
YAML Online Checker

YAML形式をチェックするサンプルソース（生Javascript）

以前生JavascriptでYAML形式をチェックするプログラムを頑張って作ったことがありました。
js-yamlというライブラリを使って作ったサンプルが以下です。
GitHub - nodeca/js-yaml: JavaScript YAML parser and dumper. Very fast.

このソースを作るのに結構調べました。
3行目でキー入力イベントをキャッチしてcheckChange関数を毎回呼んでいます。そしてoldYamlとyamlを比較して変更があったときだけチェックしてJSON変換をするという処理です。
ポイントは13行目でoldYamlとyamlに初期値を設定しているところです。ここはjavascriptを読み込まれたときに1度だけ呼ばれます。

YAML形式をチェックするサンプルソース（Vue.js）

生Javascriptで作成したYAMLチェッカーをVue.jsで作ったのが下記です。
ちなみにライブラリは先ほどと同様js-yamlを使っています。
GitHub - nodeca/js-yaml: JavaScript YAML parser and dumper. Very fast.

生javascriptと比べたらかなり簡潔に見えませんか。
#areaのv-model:messageが変更されるたびに、YAML形式をチェックしてJSON変換しjsonTextに結果を表示する処理を行っています。

サンプルソース

vue.jsと生javascriptのサンプルソース（html,css含む）はこちら。
GitHub - koboldtodragon/sample_source

CloudFront+S3+Route53で独自ドメインでHTTPS化した静的サイトを公開

CloudFront+S3+Route53のAWSサービスを使って、独自ドメインでHTTPS化した静的サイトを作成する手順を説明します。

目次

事前準備

• ドメイン： Route53やサクラドメインなどで購入(例: service.exampl.com)
• S3：公開用のS3(例： service.example.com)。ドメイン名と同じ名前で取得すること
• SSL証明書:ドメインで取得したもの。ACM(AWS Certificate Manager)で無料でSSL証明書を取得可能（CloudFrontで作成可能）

CloudFrontでS3を公開

CloudFrontを作成し、S3との紐づけ、SSL証明書の設定等を行います。
[Create Distribution]を押してCloudFrontを作成画面へ移動します。

[GetStarted]を押します。

CloudFrontの各種設定を行います。（長いので分割して画像を挿入しています。）

【Origin Settings】
Origin Domain Name: S3のバケット名が自動で出てくるので選択
Origin Path: 任意
Origin ID: Origin Domainを選択すると自動で記入
Restrict Bucket Access: yesにチェック。(Yes: S3のURLで直接アクセスを拒否する。）
Origin Access Identity: "Create a New Identity"を選択して、特定のディストリビューションのみからアクセス可能に設定する。
Comment: 自動で生成されたもの。そのまま。
Grant Read Permissions on Bucket: "Yes, Update Bucket Policy"を選択して、バケットポリシーを更新する。
Origin Custom HeadersHeader Name: ヘッダをカスタムしたい場合はここで追加する。

【Default Cache Behavior Settings】
Path Pattern: Default(*) で固定。
Viewer Protocol Policy: 任意で好きなものを選択してください。今回はHTTPSのみを選択。
Allowed HTTP Methods: 任意。GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEを選択。
Cached HTTP Methods: そのまま
Forward Headers: "None"を選択
Object Caching: "Use Origin Cache Headers"を選択
Minimum TTL: 0
Maximum TTL: 31536000
Default TTL: 86400
Forward Cookies: None
Query String Forwarding and Caching: None
Smooth Streaming: ストリーム配信をしないのでNoを選択。
Restrict Viewer Access
(Use Signed URLs or Signed Cookies): 署名付きURL、クッキーを使いたい場合はYes。今回は利用しないためNo.
Compress Objects Automatically: GZIPの圧縮使いデータ転送コストが下がりページロードが早くなります。今回はYesを選択。
Lambda Function Associations: ラムダ機能と連携機能。CloudFrontのイベントをキャッチしてLambda関数を実行したい場合に設定します。今回は使用しないためそのまま。

【Distribution Settings】
Price Class: "Use All Edge Locations" 特になければすべてを選択。
AWS WAF Web ACL: "None"
Alternate Domain Names(CNAMEs): 使用するドメインを設定する。(例: example.com)
SSL Certificate: "Default CloudFront Certificate" 独自ドメインを用意してなければAWSのデフォルトのものを選択。
　　　　　　　　 "Custom SSL Certificate" 独自ドメインでSSLを公開したいならこちらから作成可能。（[Request or Import a Certificate with ACM]を選択することでSSL証明書を作成する画面へ移動できます。）
Supported HTTP Versions: "HTTP/2, HTTP/1.1, HTTP/1.0"
Default Root Object: デフォルトでアクセスするオブジェクトを設定します。index.htmlを入力。
Logging: off(ログを残したい場合は、"On"を選択。専用のS3バケットを用意して"Bucket for Logs"に設定する必要があります。）
Enable IPv6: チェックを入れる。
Comment: メモを残したい場合は記入します。
Distribution State: Enableを選択。

[CreateDistribution]を押して作成します。

CloudFrontのTop画面に戻ると作成したCloudFrontが一覧に表示されます。
またStatusのところが"In Progress"(進行中)と表示されていますが、15分くらい経つと"Deployed"(デプロイ完了)に完了になります。

Route53で独自ドメインとCloudFrontを紐づけ

Route53の画面へ移動し、左部メニューから[Hosted zones]を選択し、上部の[Create Hosted Zone]を押してホストゾーンを作成します。

最初はNSとSOAしかありません。ここに独自ドメインとCloudFrontを紐づける設定を入れましょう。
[Create Record Set]を押すと右側に設定画面が出現するので以下を設定します。

Name: SSLやS3と同じドメインを設定
Type: A - IPv4 address
Alias: "Yes"を選択
Alias Target: CloudFrontのエンドポイントを選択
Routing Policy: "Simple"
Evaluate Target Health: "No"

[Create]を押して確定させます。
すると一覧に追加されます。早速ブラウザを開いて設定したドメインに対してhttpsで接続してみましょう。するとおそらく接続できないと思います。DNSは設定が伝搬するまで時間がかかるため、すぐには反映されません。長い場合は1日以上かかるようなので気長に待ちましょう。

設定については以上です。

AWSでSSL証明書を発行する手順

Route53で作成したドメインのSSL証明書を発行する手順を紹介します。ちなみにRoute53以外のサクラドメインなどで作ったドメインからもSSL証明書を作成できるようです。

目次

前提

• ドメイン：Route53やサクラドメインなどで独自ドメインを取得

ACMでSSL証明書を発行

ACM(AWS Certificate Manager)でSSL証明書を発行します。
まずはAWSコンソール画面からCertificate Managerを選択し、ドメイン名追加画面へ行きます。
そこで発行するSSL証明書のドメイン名を追加し[確認とリクエスト]を押します。

確認とリクエスト画面です。
証明書を作るドメイン名を確認します。問題なければ[確認とリクエスト]を押します。

するとドメインを取得した際に登録してあるメールアドレス（AWSならルートアカウアント登録時のメール）にSSL証明書発行の承認メールが送らえれます。
[続行]を押して次の画面へ進みます。

検証テスト画面です。
まだ承認してない状態だと状況のところが"検証保留中"になっています。

自分のメールアドレスにAWSからメールが着てるので開いて、[To approve this request, go to...]の後ろにあるURLリンクを開きます。

承認画面です。
東京の場合はAWS Regionが"ap-northeast-1"になっているか確認してください。
他にドメイン名などを確認して[I Approve]を押します。

承認OK画面です。

承認したらACM画面へ戻ります。
すると先ほどの状況欄が"発行済み"に変わります。
これで正式にSSL証明書の発行が完了です。

以上です。

AWSで独自ドメインを購入する手順

いろんなサイトでも紹介されてますが、あまりキャプチャ画面はないので実際の画面付きで説明します。

目次

独自ドメインを購入する手順

AWSで独自ドメインを購入するにはRoute53で手続きを行います。
まずはAWS管理コンソール画面の上部メニューから[サービス]→[Route53]を選択します。

初めて利用する場合は以下の画面が表示されます。
DomainRegistrationの[Get started now]を押します。

以下のような画面になります。
以前Route53を利用したことがある場合は、左メニューの[Registered domains]を押します。
右画面の[Register Domain]を押してドメイン選択画面へ移動します。

ドメイン選択画面です。
検索入力欄に購入したいドメインを入力し、[Check]を押します。
すると"Availability for"の下に利用可能なドメインが表示され、
その下の"Releated domain suggestions"に似ているドメインが表示されます。
また".com"や".net"などで年額の値段が異なります。
購入したいドメインが見つかったら右側にある[Add to cart]を押してカートに追加します。
すると右側（青枠）のカートに購入したいドメインの一覧と、合計金額が提示されます。
購入手続きに行く場合は右下の[Continue]を押します。

連絡先情報を入力します。
すべて入力して[Cotinue]を押して確認画面へ行きます。
以下連絡先情報の英語訳です。

• Contact Type: 連絡先情報
  • Person: 個人
  • Company: 法人
  • Association: 協会
  • Public Bdy: 公共団体
• First Name: 名前
• Last Name: 苗字
• Organization: 組織名
• Email: メールアドレス
• Phone: 電話番号。日本は81、そのあと先頭の0は入力しない。(例：+81-9012345678)
• Address 1:
• Address 2:
• Country: 国。JapanでOK。
• State: 州。日本の場合は入力不要。
• City: 都市。Tokyoで。
• Postal/Zip Code:郵便番号
• Privacy Protection:プライバシー保護。
  • Hide contact information if the TLD registry, and the registrar, allow it Don't hide contact information: TLDレジストリとレジストラが許可している場合は、連絡先情報を非表示にする。(特に理由がなければこちらを選択）
  • When the contact type is Person: 連絡先タイプが個人の場合は、連絡先情報を非表示にしない。

最終確認画面です。
購入するドメイン名や連絡先情報を再度確認します。
問題なければ[I have read and agree to hte AWS domain Name Registration Agreement]にチェックを入れて、[Complete Purchase]を押して購入を完了します。

購入完了画面です。
[Go to Domains]を押してRoute53のダッシュボード画面へ戻ります。

購入が完了していると以下画面に購入したドメイン名が追加されます。

以上です。

補足(S3との連携)

S3と連携する場合にはS3のバケット名をCNAMEで設定するときのホスト名と同じにする必要があるので気を付ける必要があります。

HTML/CSS/JavaScriptだけを使ったWebサイトなら、S3で安価に構築して公開する。

S3のレイアウトが変更されたので改めて新レイアウトでWebサイトホスティングの手順を公開します。

目次

テスト用のサイトを作成する

S3ではトップページと、エラーページが必要なため、テスト用でindex.htmlとerror.htmlを作成します。
以下をコピーしてサクラエディタなどで作成しましょう。

index.html

<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	Hello S3
</body>
</html>

error.html

<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	Error!
</body>
</html>

index.html, error.htmlをアップロードする

S3のTOP画面を表示してバケット名を選択する。

[アップロード]をクリックする。

アップロードダイアログが表示されるので、[ファイルを追加]をクリックするか、ドラッグアンドドロップでアップロードするファイルを選択します。

アクセス許可を設定する画面です。
以降の設定はすべてデフォルトのままでよければ[アップロード]を押してアップロードを開始します。
今回は他の設定も説明するのでデフォルトのままで[次へ]を選択します。

プロパティを設定画面です。
ココではストレージクラスや暗号化の要否などが設定可能です。
デフォルトのままで[次へ]を選択します。

アップロードの確認画面です。
[アップロード]を押してファイルのアップロードを開始します。

index.htmlがアップされているのを確認します。
同様の手順でerror.htmlをアップロードします。
以下のようになればOKです。

Webサイトホスティングを設定する

index.htmlとerror.htmlを表示するように設定しましょう。
[プロパティ]→[static website hosting]を選択して以下を設定します。

• 「このバケットを使用してウェブサイトをホストする」を選択
  • インデックスドキュメント: index.html
  • エラードキュメント: error.html

さてまだ設定途中ですが、一度index.htmlにアクセスして表示を確認してみましょう。
index.htmlを選択して右側のプロパティから[リンク]に記載されているURLをクリックしてアクセスしてみましょう。

すると「This XML file does not appear to have any style information associated with it. The document tree is shown below.」と表示され、アクセス拒否されます。

これはバケットに読み込み許可のアクセス権限がないためです。

バケットに読み込み許可の権限を設定する

それではバケットに読み込み許可の権限を設定します。

バケット名から[アクセス権限]タブ→[バケットポリシー]を選択します。
テキストエリアに以下を張り付け[保存]を押します。
"examplebucket"は自分のバケットのバケット名を設定します。

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::examplebucket/*"]
    }
  ]
}

設定が完了したら再度index.htmlを表示してみます。
Hello S3と表示されればOKです。

以上です。