EC2でEBSをマウントして使う

1. AWSにログインして、EC2のダッシュボードを開く。

2. 左のナビゲーションの ELASTIC BOOK STORE → Volumes を開く。

3. Create Volume して、右クリックして、インスタンスにAttachする。

4. /dev/sdf/ にマウントされる。

ここからデータのコピーと、シンボリックリンクで参照する作業
(すでにMySQL、Apacheがインストール済みで、新しくマウントしたEBSにデータを移動する)

# Setup EBS and FS
sudo mkfs.ext4 /dev/sdf
echo "/dev/sdf /mnt ext4 defaults,noatime 0 0" | sudo tee -a /etc/fstab
sudo mount /mnt
sudo mkdir -p /mnt/www/
sudo cp -r /var/www/html /mnt/www
sudo mv /var/www/html /var/www/html.bak
sudo ln -s /mnt/www/html /var/www/html
sudo mkdir -p /mnt/lib/
sudo cp -r /var/lib/mysql/ /mnt/lib
sudo mv /var/lib/mysql/ /var/lib/mysql.bak
sudo ln -s /mnt/lib/mysql/ /var/lib/mysql
sudo chown mysql:mysql -R /mnt/lib/mysql

# damon start
sudo /etc/init.d/httpd start
sudo /etc/init.d/mysqld start

参考: EC2: Amazon LinuxにWordPressを急ぎで入れる (その２） – was memo

– その他メモ

ルートユーザーに切り替える

# sudo su

MySQLにパスワードを入力して入る

# mysql -u root -p

これでマイクロのインスタンスの8GBの他に、
EBSによる40GB(とりあえずhetemlと同じ程度の容量)を確保。

Windows 8 + IE10

Win8のIE10を使うと、開発者ツールでIE9〜7の表示モードを切り替えてデバッグできて、
インスペクタも動作する。変なエラーも出ないのでIE Testerを使うよりもだいぶ良さそう。

ただし、Windows8は超使い慣れないので、
Classic Shellというアプリをインストールして、スタートボタンを復活。
(スタートボタンのグラフィックをWindows純正風にすることも出来るようですが、省略。)

参考: Windows 8にClassic Shellをインストールしてみました。 – Microsoft Officeのリボンのカスタマイズ情報が満載 – 初心者備忘録

それと、MacのUSキーボードをうまく使うために、
いつも通り、AppkeK ProのVMWare ver (v 3.1.5b1)をインストールして、
最低限、LhaplusとAvastとEmeditorを入れて、セットアップ完了。

MAMPでバーチャルホストの設定 (2種類)

よく忘れるので整理。

・ポート番号を割り当てて使う方法

/Applications/MAMP/conf/apache/httpd.conf
を編集する。例えば8001番を割り当てる場合、

40-50行目付近に # Listen: から始まるブロックがあって、

Listen 8888

という記述があるので、その下に、

Listen 8001

と追記。

もう少し下に、# ‘Main’ server configuration から始まるブロックがあるので、そこに続けて

<virtualhost *:8001>
DocumentRoot    "/Users/sohei_kitada/Dropbox/works/project/ルートにしたフォルダへのパス"
</virtualhost>

を記述する。

MAMPのポート設定は初期値の、Apache: 8888, MySQL: 8889 を使用する。

・ドメインを割り当てて使う方法:

/Applications/MAMP/conf/apache/httpd.conf
の中の

# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

の2行目 Include の行のコメントアウトを外す

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

<VirtualHost *:80>
ServerName    local.○○.com
DocumentRoot    "/Users/sohei_kitada/Dropbox/works/project/ルートにしたフォルダへのパス"
</VirtualHost>

という風に記述。

MAMPのポート設定は「標準ポートに設定」して、Apache: 80, MySQL: 3306 を使用する。

最後にhostsを開いて、

127.0.0.1    local.○○.com

と書き足す。hosterというアプリが便利です。

#
それと、VMWare上のWindowsから、MacのMAMPへアクセスは、

Windowsでipconfigをして、DefaultGatewayを調べて、
hostsファイル(C:\WINDOWS\system32\drivers\etc\hosts)に

12.34.56.78 local.○○.com

という感じに設定すれば、アクセス出来るようになる。

参考にしたサイト
・MAMPを使ってローカルで複数サイトのバーチャルホストを設定＆イントラ環境や仮想環境からもそのサイトを確認する設定方法 | THE HAM MEDIA BLOG
・MAMPに複数のドメイン「バーチャルホスト」を設定する方法 | ネットを便利に活用するTips ネットビジネスラボ
・VMware Fusion上のWindowsブラウザからMacのMAMPを参照しブラウザチェックする方法 | [k]id

Sublime Text 導入メモ 3

今週新たに追加したプラグイン

・SFTP
ファイルを保存時に自動的にFTPでサーバーにアップロードできるようになる。
サーバーで動作検証したいプログラムを書く時に役立った。

~~・Browser Refresh~~
Command + Shift + R でブラウザをリロードできる。
何かのプラグインとショートカットキーがぶつかっていたので、
Command + Option + Rに変更した。

(続きがあります)

Sublime Text 導入メモ 4

hetemlでpjax

定例mtgをしていても、バスに乗っていても、話題はpjaxなので、
pjaxを勉強し直したまとめ。

クライアントサイド

・pjaxをするには、jQueryと、jQueryのpjaxライブラリを使う。

サーバーサイド

・環境はhetemlサーバー
・hetemlのサーバーはApacheなので、PHP (5.3.16)を使う。
・PHP5.4未満なので、getallheaders関数が使えない。

最初に読み込むページ (open)

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>pjax test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
    <script src="jquery.pjax.js"></script>
    <script type="text/javascript">
            $(function($){
                //時刻を出力
                $('#time').text(new Date().getTime());
                //pjaxのサポート状況を出力
                $('#pjax-support').text($.support.pjax ? 'true' : 'false');
                //リンクの動作
                $('a.pjax').click(function(e){
                    e.preventDefault();
                    $.pjax({
                        url: $(this).attr('href'),
                        container: '#content'
                    })
                });
            });
        </script>
</head>
<body>
    <div id="main">
        <h1>
            pjax test
        </h1>
        <p>
            time: <span id="time"></span><br/>
            pjax-support: <span id="pjax-support"></span>
        </p>
        <div>
            <ul>
                <li><a href="./index.php" class="pjax">top</a></li>
                <li><a href="./page1.php" class="pjax">page 1</a></li>
                <li><a href="./page2.php" class="pjax">page 2</a></li>
                <li><a href="./page3.php" class="pjax">page 3</a></li>
            </ul>
        </div>
        <div id="content">
            hello world.
        </div>
    </div>
</body>
</html>

あとから読み込むページ

<?php
$pjax = $_GET['_pjax'];
if (!$pjax) { ?>

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>page 1</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
        <script src="jquery.pjax.js"></script>
        <script type="text/javascript">
            $(function($){
                //時刻を出力
                $('#time').text(new Date().getTime());
                //pjaxのサポート状況を出力
                $('#pjax-support').text($.support.pjax ? 'true' : 'false');
                //リンクの動作
                $('a.pjax').click(function(e){
                    e.preventDefault();
                    $.pjax({
                        url: $(this).attr('href'),
                        container: '#content'
                    })
                });
            });
        </script>
    </head>
    <body>
        <div id="main">
            <h1>
                page 1
            </h1>
            <p>
                time: <span id="time"></span><br/>
                pjax-support: <span id="pjax-support"></span>
            </p>
            <div>
                <ul>
                    <li><a href="./index.php" class="pjax">top</a></li>
                    <li><a href="./page1.php" class="pjax">page 1</a></li>
                    <li><a href="./page2.php" class="pjax">page 2</a></li>
                    <li><a href="./page3.php" class="pjax">page 3</a></li>
                </ul>
            </div>
<?php } ?>

            <div id="content">

                this is page 1.

            </div>

<?php if (!$pjax) { ?>
        </div>
    </body>
</html>
<?php } ?>

2行目の処理は、
getallheaders() が使える環境では

$header = getallheaders();
$pjax = !empty($header['X-PJAX']) && ($header['X-PJAX'] == "true");

としたい。

$pjaxがtrueの時は、if分で色々除外されて、
49-53行目だけがレスポンスとして返る。
受け取った側は、 #content を、新しい #content に置き換える。

参考: PHPでpjaxる – 私の昆布

ソース一式ダウンロード

Sublime Text 導入メモ 2

Sublime Text の設定をDropbox経由で複数のマシンで同期する方法。
これで家と会社で同じ環境をつくれる。

(Sublime Textが起動していない状態で作業する)

1. ~/Library/Application Support/Sublime Text 2 へ移動する

$ cd ~/Library/Application\ Support/Sublime\ Text\ 2/

2. Installed Packages, Packages, Pristine Packages をDropboxの管理下に移動。
（例: appdata/sublime/ に置く）

$ mv Installed\ Packages ~/Dropbox/appdata/sublime/
$ mv Packages ~/Dropbox/appdata/sublime/
$ mv Pristine\ Packages ~/Dropbox/appdata/sublime/</blockquote>
<strong>3. Dropbox内へ移動したフォルダへのシンボリックリンクをつくる</strong>
<blockquote>$ ln -s ~/Dropbox/appdata/sublime/Installed\ Packages ./Installed\ Packages
$ ln -s ~/Dropbox/appdata/sublime/Packages ./Packages
$ ln -s ~/Dropbox/appdata/sublime/Pristine\ Packages ./Pristine\ Packages

おわり。

参考: misfoc.us • Syncing Sublime Text 2 Settings via Dropbox に書いてあるのと同じ内容です。

—

(続きがあります)

Sublime Text 導入メモ 3
Sublime Text 導入メモ 4

Sublime Text 導入メモ 1

Sublime Text が身の回りに流行り始めたので
Flasherあがりのフロント実装野郎としての設定項目をメモ。
弊社メンバーは真似してください。

1. Sumlime Text 2 > Setting – User の内容:

{
"auto_indent": true,
"color_scheme": "Packages/Color Scheme - Default/Cobalt.tmTheme",
"font_face": "Menlo",
"font_size": 12,
"ignored_packages":
[
"Vintage"
],
"line_padding_top": 2,
"smart_indent": true,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true
}

説明: フォントの指定と、タブは半角スペ×4に変換です。

2. プラグイン:

(1) View > Show Console (control + `) して、

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20′)).read()); print ‘Please restart Sublime Text to finish installation’

を入力して、Package Controllをインストール。

(2) command + shift + P → 「install」と打つ → Package Controll: Install Package と補完される → Enter

(3) 以下のプラグインをインストール。

~~HTML5~~
HTML5サポート

Tag
選択したHTMLを「control + option + f」でフォーマット

AutoFileName
ファイル名、パス補完

~~Bracket Highlighter~~
閉じタグハイライト

~~CSS Snippets~~
CSSのスニペット

LESS
LESSのコードをハイライト

jQuery
jQuery補完

CoffeeScript
CoffeeScript補完

WordPress
Wordpressのコード補完

~~ZenCoding~~
Espresso時代からおなじみのZenCoding

Prefixr
「control + command + x」でベンダープレフィックスを追加してくれる

SublimeCodeIntel
何かが賢くなる

Side Bar Enhancements
サイドバーが強化されるらしい

Trailing Spaces
行頭、行末の不要なスペース、タブをハイライト。
ファイル保存時に勝手に消してくれる（几帳面）

3. 細かい設定

Sublime Text 2で、rubyのインデントだけ変更する #SublimeText2 – Qiita

を参考に、
JS, CSSのインデントを2文字にしてみる。

(1) .jsのファイルを開く

(2) Sumlime Text 2 > Preferences > Settings – More > Syntax Specific – User を選択

(3) 開いた javaScript.sublime-settings に以下を記入

{
"tab_size": 2,
"translate_tabs_to_spaces": true
}

(4) .cssのファイルを開く

(5) Sumlime Text 2 > Preferences > Settings – More > Syntax Specific – User を選択

(6) 開いた CSS.sublime-settings に以下を記入

{
"tab_size": 2,
"translate_tabs_to_spaces": true
}

*
「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN
と
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳
を読むと、2文字が良いんだとか。

4. 手に馴染ませる

ショートカットキーは

爆速エディタSublime Text 2ショートカット一覧 | DECONCEPTER
を参考に。

zen-codingのショートカットキーは
Post-that: sublime text 2 で zen-codingを使う際のコマンド一覧
を参考に。

EspressoとFlex Builderで出来たことはだいたい出来そう。

さいごに、

あたりを読みながら導入しました。

—

(続きがあります)

Sublime Text 導入メモ 2
Sublime Text 導入メモ 3
Sublime Text 導入メモ 4

update

会社のWorksをアップデートしました。

– cakes
– band

EC2の環境に、PHP MongoDB Driverをインストール

▽ ローカルの開発環境

PHP MongoDB Driver をインストール。

参考: https://github.com/mongodb/mongo-php-driver/blob/master/README.md

まずzipをダウンロードして、解凍。
解凍したディレクトリにターミナルでcdして、

$ phpize
$ ./configure
$ make
$ sudo make install

出来たmodules/mongo.soを、
/Applications/MAMP/bin/php/php5.3.6/lib/php/extensions/no-debug-non-zts-20090626 へ移動。

/Applications/MAMP/bin/php/php5.3.6/conf/php.ini を編集。
extension= が沢山書かれている場所に、 extension=mongo.so を追記

phpinfo して、mongoDBが入っていれば完了！
(要Apacheの再起動)

※ MAMP 2.0.5で作業。2.1系でトラブル発生中。(12/7/10頃)

▽ EC2でMongo

参考: http://blog.genies-ag.jp/2011/08/amazon-ec2-amazon-linux-apachephp.html
参考: http://web.j-q.co.jp/?p=124
参考: http://www.if-not-true-then-false.com/2010/install-php-mongodb-mongo-driver-on-linux-mac-os-x-windows-unix-bsd/

# sudo vi /etc/yum.repos.d/10gen.repo

[10gen]
name=10gen Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64
gpgcheck=0

を記入

# yum search mongo
# yum install mongo-10gen.x86_64

PEARインストール
参考: http://stackoverflow.com/questions/8636538/does-aws-provides-pear-package-manager-installation-from-repository

# wget http://pear.php.net/go-pear.phar
# php go-pear.phar

PECLインストール (ローカルとほぼ同じ手順)
参考: https://groups.google.com/forum/?fromgroups#!topic/mongodb-user/9be1bpaNvVU

# wget http://pecl.php.net/get/mongo-1.2.10.tgz
# tar xvf mongo-1.2.10.tgz
# ./configure (エラー出た)
# sudo yum install gcc (参考: http://www.linuxforums.org/forum/applications/41118-how-install-gcc.html)
# ./configure (出来た)
# make (エラー出た)
# sudo yum install make
# make (出来た)
# sudo make install
Installing shared extensions: /usr/lib64/php/modules/

MONGOのドライバーをインストール
http://www.if-not-true-then-false.com/2010/install-php-mongodb-mongo-driver-on-linux-mac-os-x-windows-unix-bsd/

# sudo pecl install mongo

「You should add “extension=mongo.so” to php.ini」って出た！

/etc/php.ini のそれっぽい場所に、

extension_dir = "/usr/lib64/php/modules/"
extension=mongo.so

を記入。

phpinfo してmongoDBが無事に入っていれば完了！

AWSのSecurity Groupの設定で、27017を開けたら、
PHPからも無事に書き込み出来ました。PHPの書き方はまた次回。

[追記]
さらに、http://d.hatena.ne.jp/akuwano/20120130/1327884845
を見てデータベースにパスワードをかけておいた方が良いかも。

こう書くとサーバー起動時にmongodを実行できるはず

# sudo chkconfig --add mongod
# sudo chkconfig mongod on

さくらのVPSを借りてgitのレポジトリを置いて、EC2からgit pull。

▽ EC2サーバー上で公開鍵を作成

# cd ~/.ssh
# scp id_rsa.pub さくらのユーザー名@さくらのアドレス: (←コロン重要)

▽ さくらのVPSサーバーで、authorized_keysに追記

# cat id_rsa.pub >> ~/.ssh/authorized_keys

※ authorized_keysに内容を直接書き足しても良い。

▽ EC2サーバーからさくらのVPSサーバーへ接続テスト

# ssh td-inc@49.212.170.189

▽ EC2上から、git cloneして、データを落とす

# sudo git clone ssh://さくらのユーザー名@さくらのアドレス/var/git/レポジトリ名

▽ httpd.confにバーチャルホストの設定を追加

# sudo vi /etc/httpd/conf/httpd.conf
ServerName fes.mu
DocumentRoot /var/www/fes.mu

apache再起動

sudo service httpd restart

▽ 次回以降、差分をダウンロードする時は、

# sudo git pull ssh://さくらのユーザー名@さくらのアドレス/var/git/レポジトリ名

[追記]
↑ パーミッションを775とかにして、”ec2-user”をownerのグループに追加しておけば、
sudo は不要になる。

グループに追加

# usermod -G wheel ec2-user

パーミッション、所有者の変更

# sudo chmod 775 ○○○
# sudo chown root:wheel ○○○