2013-11-05

Amazon S3 + お名前.comでサクッとWebサイトを作った

AWS

まず、今回作ったもの。自分のポートフォリオサイトです。
http://higan96.info/

作った経緯

AmazonのS3でサイト作ったら安くて簡単だった。

参考資料（どちらもslideshareから）

http://www.slideshare.net/horiyasu/amazon-s3web-27138902
http://www.slideshare.net/YoshidaShingo/20130113-jawsug-saitamas3site

前提

AWSアカウントを持ってる
お名前.comでドメインを取得済み

手順

Webサイト用にS3のバケットを作成
公開のためにバケットを設定
バケットポリシーの追加
HTMLファイルのアップロード
Route53の設定
お名前.comでDNSプロバイダ設定

もちろんお名前.comを使わないといけない理由はないので、そのあたりは適宜読み替えてください。

1.Webサイト用にS3のバケットを設定

まず取得したドメインとバケットは2つ作ります。
「Create Bucket」のボタンを押して、BucketNameに取得したドメイン名（example.comなど）を入力してRegionはTokyoに設定して「Create」ボタンで作成。同じ手順で今度はBucketNameに取得したドメインのサブドメイン名（www.example.com）で入力します。
これで「example.com」「www.example.com」のふたつのバケットが出来ました。「example.com」のバケットに公開するhtmlファイルをアップロードすることになります。

2.公開のためにバケットを設定

先ほど作った2つのバケットの設定を行っていきます。
「exapmle.com」バケットのプロパティStatic Website HostingでEnable website hostingでIndex Documentに「index.html」と入力、Error Documentに「error.html」と入力します。
（エラードキュメントは404FileNotFoundの時に表示されるので、内容はそれに準じたものにするのがよいでしょう。）
つぎに、「www.exaple.com」へのリクエストを「example.com」バケットへ転送する設定を行う。
「www.example.com」バケットのプロパティStatic Website HostingでRedirect all requests to another host nameで「example.com」を指定する。

3.バケットポリシーの追加

「exapmle.com」にだけバケットポリシーを追加。アップロードされたファイルをだれでも閲覧可能な状態にします。バケットポリシーは「example.com」プロパティのPermissionsのAdd bucket policyから追加。内容は表示されたEditorのSample Bucket Policiesの中のGranting Permission to Anonymous Userをコピペして「bucket/」の部分を「example.com」に変えます。
f:id:higan_n:20131105213325p:plain

4.HTMLファイルのアップロード

index.htmlとerror.htmlを「example.com」のバケットにアップロードします。

5.Route53の設定

HostedZonesを作成

HostedZones→CreateHostedZone→取得したドメイン「exmple.com」を入力（必要ならコメントも）→CreateHostedZoneをクリックして作成を実行。

Aレコードを作成

「Alias」は「yes」に。
「Alias Target」S3WebsiteEndpointsから選択。ここではルートドメイン名の「exapmle.com」を選択。
f:id:higan_n:20131105213353p:plain

CNAMEレコードを作成

「Name」に「www.example.com」を設定。
「Value」に「exmple.com」のEndpoint URLを設定。

6.お名前.comでDNSプロバイダ設定

作成されるとDelegation Setとして4つのネームサーバーが割り当てられるので、これをお名前.comで設定します。

お名前.com→ネームサーバーの変更→「他のネームサーバーを利用」を選択→4つのネームサーバーを入力して設定を保存。

以上で終了。

Amazon Web Services クラウドデザインパターン実装ガイド

作者: 大澤文孝,玉川憲,片山暁雄,鈴木宏康
出版社/メーカー: 日経BP社
発売日: 2013/02/07
メディア: 単行本
購入: 1人クリック: 15回
この商品を含むブログ (13件) を見る

2013-10-19

ComposerでCakePHPをインストールしたときの、bootstrap.phpについての勘違い

CakePHP PHP Composer

Composerを使った通常のインストール方法は公式ドキュメントに解説が載っているのですが
http://book.cakephp.org/2.0/ja/installation/advanced-installation.html

ここでComposerでインストールをした他のライブラリを、webroot/index.phpで読み込みましょう、という解説がされていると勘違いしていて無駄な時間を過ごしてしまいました。

普通に考えて、Config/bootstrap.phpですよね。

Config/bootstrap.php ファイルに次の行を追加します:

ちゃんと書いてありますね。まあ、そんだけです。自分のアホさ加減にため息が出ます。

こういうミスが今後起こらないよう、bootsrap.phpのコメントのDescriptionを翻訳してみます。
内容はbootstrapファイルの読み込まれる順番と、どういった設定やファイルが読み込まれるべきか、についてです。

本文

This file is loaded automatically by the app/webroot/index.php file after core.php
This file should load/create any application wide configuration settings, such as
Caching, Logging, loading additional configuration files.
You should also use this file to include any files that provide global functions/constants
that your application uses.

訳文

このファイルはapp/webroot/index.phpファイルによってcore.phpのあとに自動的に読み込まれます。
どのアプリケーションにおいても広範な構造に関わる設定、キャッシュ、ログ、追加した設定ファイルなどを、このファイルは読込／作成するべきです。
また、あなたはあなたのアプリケーションが使うグローバル関数/定数を提供するファイルをこのファイルにインクルードすべきだ。

直訳的に訳したのでわかりにくいので、以下にまとめます。

core.phpのあとに読み込まれる
CakePHPのフレームワーク構成の一部に組み込まれ動作する設定をこのファイルに書き込もう
グローバル関数/定数を定義したファイルもこのファイルで読み込もう

こんな感じでしょうか？間違ってたら指摘してください。

追記：
ググったら良記事を見つけたので紹介。bootstrap.phpとcore.phpのコメントを全部訳してあります。2012のPHP アドベントカレンダーで投稿されたみたいですね。
bootstrap.php と core.php を詳しく見てみる。（bootstrap.php編）(ソースコードと翻訳が大好き)

2013-10-06

Chefのメモ

chef mac vagrant

chefはrubyで書かれたサーバー設定や更新を自動化するツールです。
rubyのバージョンが古いとエラーが出たりするので、1.9以上のものを入れておきましょう。
準備ができたら、chefのインストール。

$ curl -L https://www.opscode.com/chef/install.sh | sudo bash

続けてgemでknife-soloをインストール。

$ gem install knife-solo

gem listでインストール状況を確認。chefとknife-soloのインストールを確認する。
初期設定knife configureを行う。設定はデフォルトで進めていくので、全てEnterを押していく。Enter, Enter, Enter...

$ knife configure

Vagrantで進めていくので、VagrantでaddしておいたCentOSの64bit版を使って仮想マシンを立ち上げる。

mkdir vagrant
vagrant init centos64

Vagrantfileの設定
ワークステーション側からブラウザでアクセスしたいので、ネットワーク周りの設定を行って、vagrant up。

vagrant up

sshの設定も。このあたりはドットインストールのレッスンで使った設定を使い回し。

vagrant ssh-config --host harmony
vagrant ssh-config --host harmony >> ~/.ssh/config

初期化

knife solo init chef-repo

rubyのバージョンが低いとここでエラー

ERROR: knife encountered an unexpected error

ruby1.8.7ではダメらしいので、自分はmacportsでruby2.0.0を入れた。
こちらを参考にした。
http://hotwebtopics.seesaa.net/article/363130711.html

リポジトリを作成する。リポジトリは、クックブック群を含む、Chefの実行に必要な一連のファイルをまとめる入れ物。キッチンともいう。特定のプロジェクトに一つのリポジトリといった粒度。

cd chef-repo
knife solo prepare harmony

クックブックを作成する。クックブックは、ファイルに対するディレクト、あるいはクラスに対する名前空間のように、特定のレシピに必要なデータやファイルをまとめる入れ物。

knife cookbook create hello -o site-cookbooks/

oオプションでパスを指定してcookbookをcreateできる。

レシピを作る。レシピとは「コード化された手順書」であり「サーバーの状態」。
recipes/default.rbの編集し、内容を記述。rbという拡張子からも分かる通り、rubyで書かれている。
nodes/harmony.jsonの編集して読み込むレシピを記述。
レシピの実行。

knife solo cook harmony

2013-10-06

sudo xcodebuild -licenseで、何をすればいいのか

mac xcode

gemでちょっとインストールしたいものがあったのですが、エラーが出ました。Xcodeライセンスに同意していない、というようなメッセージです。Macの方はMoutainLionでXcodeのバージョンは5.0でした。
そこでメッセージ中の指示通り

$ sudo xcodebuild -license

を実行して、spaceを連打してライセンスを読んでいたのですが特に何も起こらないし、これでいいのかな？とgem installを再度試しても同じエラーが出る。

結論からいうと、適切なタイミングで

agree

と入力してライセンスに同意しないといけない。
適切なタイミングというのは、ライセンス文の終端。そこで、連打しすぎるとagreeと入力すべきところでspaceを入力してしまい、agreeしなかったと判断される様子。

なので、そろそろ終わりかな？と思ったタイミングでspaceからEnterに切り替えて、文章の終わりまで行を送りましょう。まあ、ライセンス文ちゃんと読めよ、ってことだと思います。

2013-10-05

Vagrantメモ

vagrant

boxをVagrantbox.esなどで用意
http://www.vagrantbox.es/

 $ vagrant box add {title} {url}

HTTP経由で指定したurlからboxファイルをダウンロードして、{title}で指定した名前で保存されます。{url}はローカルパスでも可。

addしたboxはホームディレクトリ下の.vagrantディレクトに追加される。
boxとVMは対の関係ではないので、どんどん作って削除していい。

プロジェクトのルートディレクトリを作成。ディレクトリ名がVMの名前になる。
ルートディレクトリへ移動後、VMを初期化

 $ vagrant init {title}

{title}はaddしたboxの名前として指定したもの。プロジェクトディレクトリにVagrantfileが作られる

boxからVMをの稼働と起動

$ vagrant up

オプションでプロバイダ（VmwareFusion, AWSなど）を指定して起動できる。

$ vagrant up --provider=vmware_fusion
$ vagrant up --provider=aws

http://lab.raqda.com/vagrant/getting-started/up.html
Vagrant日本語ドキュメント内では以下のようにVagrantfileを編集せよとあるけど、特に設定の必要は無さげ。
日本語ドキュメント

Vagrant.configure(“2”) do |config|
	config.vm.box = “precise32”
end

これが、upしてデフォルトの状態だと。

VAGRANTFILE_API_VERSION = "2"
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
	config.vm.box = "precise32"
end

となってる。

本家のドキュメントを読む限り、バージョンを2か1にを設定する必用があるのだけど、
「1.1+ leading up to 2.0.x」の場合は2に設定せよとある。
現在の最新版が1.3.4なのでこのまま2でOK、となる。
http://docs.vagrantup.com/v2/vagrantfile/version.html

/vagrantディレクトリはプロジェクトのルートディレクトリ、つまりVagrantfileを含むホスト側ディレクトと同期している。そのため、ホスト側のファイルを編集すれば、VM側でそのまま変更が反映される。

プロビジョニング
英和辞典的に言えば「設備の事前準備」みたいな意味。

config.vm.provision :shell; :path => “bootstrap.sh”

みたいに設定を加えれば、shellが走って設定ファイルbootstrap.shの内容が実行される。パスはプロジェクトのルートディレクトリからの相対パス。
shefなんかを使えば、もっと複雑で便利なことができる。

コマンド
vagrant box add {title} {url} boxの追加
vagrant box list　追加されているboxのリストを表示
vagrant box remove {title} {provider}
vagrant box repachage {title} {provider}
vagrant status　　VMの状態を確認
vagrant suspend　VMのサスペンド
vagrant resume　サスペンドしたVMのレジューム
vagrant destroy　VMの削除
vagrant ssh　　　VMにvagrantユーザーとしてssh接続

2013-10-02

Composerを使ってCakePHP2.4.1とDebugKitをインストールするまで

CakePHP PHP

CakePHPの最新安定版である、バージョン2.4.1をComposerを使用してインストールし、プラグインのDebugKitをインストールするまでを公式ドキュメントをもとに解説します。

追記(2013/10/2)
このディレクトリ構成だとCakePHP本体側とプロジェクト側とで定数に違いが出てしまいBakeコマンドが使えなくなることが判明しました。なので、ディレクトリ構成を公式ドキュメントに近づける形でちょっと変えます。

http://book.cakephp.org/2.0/ja/installation/advanced-installation.html

まず、プロジェクトのルートディレクトリになるフォルダを作ります。今回の例ではホームディレクトリに今回のプロジェクトルートになる「example-app」という名前でディレクトリを作成します。

mkdir ~/example-app

次にexample-appへ移動して用意したディレクトリにcomposerをインストールします。

cd ~/example-app
curl -sS https://getcomposer.org/installer | php

ここまでのディレクトリの構成はこんな感じです。

~/example-app/
    composer.phar

次にインストールするソフトを記述する「composer.json」というファイルを新規に作成します。

vim ~/example-app/composer.json

内容は以下のとおりに記述します。

{
    "name": "example-app",
    "repositories": [
        {
            "type": "pear",
            "url": "http://pear.cakephp.org"
        }
    ],
    "require": {
        "pear-cakephp/cakephp": ">=2.4.1"
    },
    "config": {
        "vendor-dir": "Vendor/"
    }
}

ここまでのディレクトリの構成はこんな感じです。

~/example-app/
    composer.phar
    composer.json

次にいよいよ、composerでCakePHPをインストールします。
以下のコマンドを実行します。

php composer.phar install

これだけでインストール完了。
ここまでのディレクトリの構成はこんな感じです。

example-app/
    composer.phar
    composer.json
    Vendor/
        bin/
        autoload.php
        composer/
        pear-pear.cakephp.org/

次にCakePHPプロジェクトを作成します。
bakeコマンドを使えば簡単にコマンドラインからプロジェクトを作成できます。

Vendor/bin/cake bake project ~/example-app

これで、example-appフォルダ以下にプロジェクトが作られました。
次にwebroot/index.phpにパスに関する定数が定義されているので、それを編集して CAKE_CORE_INCLUDE_PATHの定数を絶対パスから相対パスに変更します。変更する理由は、デプロイした時に困るからです。
CAKE_CORE_INCLUDE_PATHを定義している箇所を探して、コメントアウトしてから以下の記述を追加します。

define(
'CAKE_CORE_INCLUDE_PATH',
    ROOT . DS . APP_DIR . '/Vendor/pear-pear.cakephp.org/CakePHP'
);

公式のドキュメントと定義内容に違いがあるのは、ディレクトリ構造の違いのためです。今回の例では、APP_DIRがexample-appになるので公式ドキュメント通りに行うと、example-app/app/Vendorが定数として定義されてしまいます。
公式ドキュメントどおりに設定。

次にプラグインであるDebugKitをインストールします。

最初に作ったcomposer.jsonに以下の記述を追加します。

vim ~/example-app/composer.json

{
    "require": {
        "cakephp/debug_kit": "2.2.*"
    }
}

composer.jsonの全文を載せます。

{
    "name": "example-app",
    "repositories": [
        {
            "type": "pear",
            "url": "http://pear.cakephp.org"
        }
    ],
    "require": {
       	"pear-cakephp/cakephp": ">=2.4.1",
	"cakephp/debug_kit": "2.2.*"
    },
    "config": {
        "vendor-dir": "Vendor/"
    }
}

インストールをします。

php composer.phar update

これでインストールされます。

ここまでのディレクトリの構成はこんな感じです。

example-app/
    composer.phar
    composer.json
    ...
    生成されたプロジェクトのフォルダ
    ...
    Plugin/
        DebugKit/
    Vendor/
        bin/
        autoload.php
        composer/
        pear-pear.cakephp.org/

最後にapp/Config/bootstrap.phpを編集して以下の記述を追加します。

// composerのautoloadを読み込み
require APP . '/Vendor/autoload.php';

// CakePHPのオートローダーをいったん削除し、composerより先に評価されるように先頭に追加する
// https://github.com/composer/composer/commit/c80cb76b9b5082ecc3e5b53b1050f76bb27b127b を参照
spl_autoload_unregister(array('App', 'load'));
spl_autoload_register(array('App', 'load'), true, true);

CakePlugin::loadAll();

Vendor/autoload.phpを一度読み込めば良い状態になるので、Composer経由でインストールするだけです。

CakePlugin::loadAll()でプラグインを読み込みます。

これで完了。あとは、databaseの設定だけ。
f:id:higan_n:20131002183119p:plain

公式ドキュメントのやり方~~とは結構違います。~~に近づけました。

2013-09-07

bnqaを作った理由その２

Webサービス開発 bnqa

f:id:higan_n:20130907175237p:plain
http://bnqa.jp
bnqaを作った理由として、以前のエントリでは「本に関わる質問サイトが無かったから作った」という説明をしたと思います。それは確かに理由の一つなのですが、もう一つ大きな理由があったので、考えを整理するためにもちょっと書いておこうかなと思います。

自分の読書メモを共有したかった

僕の独学のスタイルは、一般的だと思うのですが、書籍を使って行いました。本を読みながら勉強をすすめる中で、自分の考えや理解の筋道などを、あとで見て思い出せるようにメモとして残しておきます。本のなかで、ある技術が紹介されているとき、その技術がいかに効率的かの解説を付け加えたり、あるいは自分がこれまで採用していた技術との違いや採用した場合のメリット・デメリットなど、思いついたことをメモし自分だけの本にアップデートするようにしていました。しだいに貯まるこれらのメモが、結構な文量になったとき、これって見せ方次第で他の人にも価値があるんじゃないかな？と思うようになりました。

このメモ、誰か読むかも？

特に価値があるんじゃないか？と思えたのが、バージョンが更新されたオープンソースソフトウェアの技術書です。技術は常に進歩し、ある時点で最新の情報を載せていた技術書が数年で陳腐化する、という状況は多く見かけます。

自分の場合も、あるフレームワークに関する技術書を購入したタイミングで、そのフレームワークがアップデートされてしまい、その技術書で勉強しても一つ前の「古い知識」を身につけるだけ、という状況になりました。それなら、新しいバージョンで勉強したほうが学習効果高いだろ、と思い、新しいバージョンのほうで勉強を始めました。そのアップデート内容は、マイナーアップデートの割に変更点が多く、その技術書どうりでは動かず、はまりまくりました。そのため、技術書に書き込まれるメモの量も多くなり、たまったメモを見返すと、自分と同じようにこの技術書でフレームワークを勉強する人がいたら、このメモ絶対に役に立つよなと、思えるものになっていきました。せっかくこんなに書いたのに自分が持ってるだけなんて勿体ないよな、とも。

ブログじゃだめなの？

ブログに載せるより、本に紐付けられる形で情報が整理されたほうが、有用ではないかな、とは直感的に思っていた。また、本の内容に関する情報が価値を持つのは、その文脈が共有された人たちの中でだけ、ということも考えたため。ある本の記述について、「こうすればいい」「こう考えれば理解が進む」といった情報は、たとえそれが広く世界中で普及したOSSであっても、その本を読んでいる人にとってしか価値を持たない。その本を読んだこと無い大多数の人には「へぇ」と思われておしまいです。さらに、その「へぇ」の人たちにも同時に価値ある情報を伝えたいと考えたら、その情報が価値をもつように、そのブログの筆者は前提となる本の内容を文脈から取り出して、より一般的な形に加工しなければならない。それは大きな手間だ。

bnqaを使うメリット

ここでbnqaを使うメリットです。
　まず、bnqaでは本に情報が紐付けられる形で整理されます。ホーム画面を眺めていればフォローした書籍のノート、質問、アドバイスが流れてきます。これによってユーザーは、その本をフォローさえすればよく、情報を集めるためのコストは小さなものになります。
　つぎに、前提の説明が必要なくなります。例えば、ある技術書を読み進めていて、疑問がわいたとする。そのとき、質問サイトやコミュニティで質問すれば良いのですが、その時に回答者がその本を読んでいるとは限りません。質問をするなら、「何が問題なのか」を本から切り出して、こういう状況でエラーが出る、といった具合に、聞きたかったこと以外の「問題の前提」を説明する必要が出てきます。これがbnqaだったら、「○○ページで××というエラーメッセージが出る、なぜ？」といったようにページ数を指定して質問するだけで、あっという間に問題の前提が共有されます。なぜなら回答者もその本を読んでいるからです。

まとめ

もともとは、自分の本に書かれたメモを効果的に共有するための仕組みとして作り始めました。その過程で「こうしたら良くなるんじゃないか？」を繰り返したら今のような形になりました。

http://bnqa.jp

higan96技術メモ

https://github.com/higan96

Amazon S3 + お名前.comでサクッとWebサイトを作った

作った経緯

参考資料（どちらもslideshareから）

前提

手順

1.Webサイト用にS3のバケットを設定

2.公開のためにバケットを設定

3.バケットポリシーの追加

4.HTMLファイルのアップロード

5.Route53の設定

HostedZonesを作成

Aレコードを作成

CNAMEレコードを作成

6.お名前.comでDNSプロバイダ設定

ComposerでCakePHPをインストールしたときの、bootstrap.phpについての勘違い

本文

訳文

Chefのメモ

sudo xcodebuild -licenseで、何をすればいいのか

Vagrantメモ

Composerを使ってCakePHP2.4.1とDebugKitをインストールするまで

bnqaを作った理由その２

自分の読書メモを共有したかった

このメモ、誰か読むかも？

ブログじゃだめなの？

bnqaを使うメリット

まとめ