xamppでポータブル開発環境を作る

はじめに

 XAMPPはローカル環境にWebserverを設置するためのパッケージソフトです。前々回、AWSLAMP環境を構築するために手動でコマンドラインからミドルウェアをインストールしましたが、XAMPPをインストールするだけでApache,MariaDB*1,PHP,phpMyadmin等の開発に必要なものは一通り利用できるようになります
 XAMPPにはポータブル用パッケージのXAMPP Portableが用意されており、こちらはインストール不要となりますので、USBメモリに入れて持ち運ぶことも可能です。出先で開発したいときやPC環境を変更するときに便利ですね
 
 それでは早速導入の方へ移っていきましょう

XAMPPをUSBメモリに配置&動作確認

 以下のリンクからXAMPP Portableをダウンロードし、解凍してください。解凍したらxamppフォルダをUSBメモリのルートディレクトリ(一番上位のディレクトリです)に移します

 xamppフォルダ内のxampp-control.exeを起動します。言語選択画面が表示されたら、英語かドイツ語を選択します
 コントロールパネルが表示されたら、ApacheMysql(実際はMariaDBです)の欄のstartボタンをクリックしましょう。警告が表示された場合は「アクセスを許可する」を選択してください。ApacheMysqlの欄に緑のラベルが表示されたらOKです*2
 Webブラウザを立ち上げ、URLバーに「localhost」と入力してEnterキーを押してください。「XAMPP Apache+MariaDB+PHPH+Perl」というページが表示されれば成功です。ページ上部のphpMyAdminやPHPinfoもクリックして正常に表示されるか確かめてみてください

MariaDBのrootパスワードを設定

 MariaDBのrootパスワードを設定します(デフォルトはpass無し)。作業はコマンドプロンプトから行いますので、起動してください。Gitbushからでもできます。
 まずはrootでログインし、それからパスワードを設定します

mysql -u root
Welcome to the MariaDB monitor...

MariaDB[(none)]> update mysql.user set password = '設定するパスワード'
-> where user = 'root';
Query OK...

MariaDB[(none)]> flash privileges;
Query OK...

MariaDB[(none)]> quit
Bye

 もしmysqlコマンドが使えない場合は、PATHが通っているか確認してください。PATHはコマンドからecho $PATHと打てば確認できます。あるいは、xampp/mysql/binディレクトリまで移動し直接mysqlを起動してください

phpMyAdminにrootパスワードを設定する

 Mysqlでrootパスワードを設定した後でphpMyAdminのページに移ると、エラーが表示されてログインができなくなっていると思います。Mysqlの設定変更が自動的にphpMyAdminに反映されるわけではないので、phpMyAdmin側の設定も変える必要があります
 xampp/phpMyAdmin/confing.inc.phpを開き、以下の行にMysqlで設定したパスワードを入力してください

$cfg['Servers'][$i]['password'] = 'Mysqlで設定したパスワード';

 

MariaDB文字コードを変更する

 文字コードを変更するにはxampp/mysql/bin/my.iniを編集します。直接編集することもできますし、xamppコントロールパネルのmysqlの欄にある「config」ボタンから開くこともできます
 my.iniを開いたら[mysql]項目内の以下の行のコメントアウトを削除し、設定を有効化します(行の先頭にある#を削除すれば有効化されます)

変更前

## UTF 8 Settings
#init-connect=\'SET NAMES utf8\'
#collation_server=utf8_unicode_ci
#character_set_server=utf8
#skip-character-set-client-handshake
#character_sets-dir="C:/xampp/mysql/share/charsets"

変更後

## UTF 8 Settings
init-connect='SET NAMES utf8'
collation_server=utf8_unicode_ci
character_set_server=utf8
skip-character-set-client-handshake
character_sets-dir="C:/xampp/mysql/share/charsets"

※2行目のSET NAMES utf8の前後の「\」も削除されている点にご注意ください

 さらに、[client],[mysqldump],[mysql]の各項目の最終行に、以下の内容を追加してください

default-character-set=utf8

 変更を保存したら、xamppのコントロールパネルからmysqlを再起動してください

PHPのopensslを有効化する

 xampp/php/php.iniを開き、「Dynamic Extensions」に含まれる以下の行のコメントアウトを削除し、設定を有効化します(行の先頭にある「;」を削除すれば有効化されます)

;extension=php_openssl.dll

 ついでに時間の設定も合わせておきましょう。「Module Settings」に含まれる[Date]項目内の以下の行を変更します

変更前

date.timezone=Europe/Berlin

変更後

date.timezone=Asia/Tokyo


 以上でXAMPP Portableの設定は完了となります。お疲れさまでした
 
 

*1:MariaDBMysqlから派生したDB管理システムです。Mysqlを作った方が開発されており、Mysqlとの互換性を保持しています。古いバージョンのXAMPPだとMysqlが同梱されていますが、新しいものはMariaDBが採用されています。どうしてもMysqlが使いたい方はMariaDBから差し替えることも可能ですが、少々設定を弄ることになります。この記事ではMariaDBのまま扱う前提で紹介しますので、その点ご了承ください

*2:他のアプリケーション(skype等)が80番ポートを使用している場合、Apacheが起動せずエラーとなります。その場合は競合しているアプリケーションを終了させるか、Apacheのポート番号を変更する必要があります。ポート変更はxampp/apache/conf/httpd.confファイルを編集して行います。詳細は別途お調べください。参考リンク:XAMPPでインストールしたApacheが起動しないとき | PHPプログラミングの教科書 [php1st.com]

バージョン管理システムを導入する(git+Bitbucket)

はじめに

 gitはプログラムなどのソースファイルの変更履歴を、リポジトリ(貯蔵庫)という単位で管理するシステムです。複数の開発者が一つのリポジトリを共有するのではなく、一人一人が分散的にリポジトリ保有することで変更点の競合を減らし、円滑なアプリケーション開発を支援してくれます
 以下のドキュメントにわかりやすい説明が記載されているので、まずは是非ご一読ください

 また、利用のチュートリアルに関しては以下のリンクをお勧めします 

 もう一方のBitbucketは何かというと、gitの利用を前提としたwebサービスです。開発者が個別の端末に保有するリポジトリをローカルリポジトリというのですが、それをweb上に置いておいて、いつでもどこでもリポジトリを取得,変更したり、開発チームの人が閲覧できたりしたら便利ですよね?それを実現するのがBitbucketです。最も利用されている同種のサービスがGithubで、こちらはとても有名ですね。

 Githubの場合リポジトリを非公開に設定するのは有料となりますが、Bitbucketは非公開でも無料で利用できます。公開することで不利益を被る可能性がある場合や個人でリポジトリ管理をする場合などは、Bitbucketを利用してみてもいいかもしれません(実際の利用はコスト面だけでなく使用感や環境に合致しているか等、ご考慮ください)


 リンクのドキュメントは読んで頂けましたか?
 では、導入の方へ移っていきましょう

ローカル環境にgitをインストールする(Windows

 ローカル環境へのインストールで特に躓くことはないと思います。インストーラーをダウンロードして実行するだけです。下記のリンクからダウンロードできます

 インストーラーは英語表記なので、細かい設定項目が何を意味しているかわからないという方は、下記のリンク等をご参照ください

 

デプロイ環境にgitをインストールする(Linux

 こちらも簡単にインストールできます。SSHでログインし、yumコマンドでインストールします

$ sudo yum install git

 

Bitbucketアカウントを作成をする

 https://bitbucket.org/へアクセスしてアカウントを作成してください。作成手順などは以下のリンクが参考になるかと思います

 上記のサイト様ではSourcetreeへの登録手順もご紹介なさっています。SourcetreeはBitbucketを提供しているAtlassian社の別のサービスです。Gitは通常コマンドライン上から操作するのですが、SourcetreeはGitをグラフィカルなインターフェースから操作することができます。コマンドを覚えるのが面倒な方や直感的な操作性を求める方は、Sourcetreeも合わせて利用されるといいでしょう

ローカルリポジトリを作成し、Bitbucketにpushする

 ローカル環境の適当な場所にリポジトリを収納するフォルダを作成し、そこにリポジトリを作成してみましょう
 Gitbushを起動してコマンドラインから操作します。最初に紹介したチュートリアルを既にご覧いただいた方は理解されていると思いますが、一応記述しておくと以下のようになります

$ git init
$ git config  user.name "ユーザ名"
$ git config  user.email ユーザ名@example.com

 続いて、同フォルダ内に適当なファイルを作成します。任意の内容のテキストファイルで構いません。コマンドから作成してもいいですし、ローカル環境がWindowsであれば右クリックから新規作成→テキストファイルでも構いません
 ファイルを作成したら、リポジトリの変更をステージングしてコミットしましょう

$ git add 作成したファイル名
$ git commit

 テキストエリアが表示されたら、コミットメッセージを記述し保存してください。テキストエディタ(vi)の使い方がわからない方は別途お調べください。簡単に説明すると、「i」キーで挿入モード(一般的なキーボード入力)に切り替わり、「Esc」キーでコマンドモードに切り替わります。コマンドモードから「:wq」と入力してEnterキーを押せば保存して終了です。単に終了する場合は「:q」を押してください。保存せずに強制終了する場合は「:q!」です

 さて、これでリポジトリの変更内容がコミットされました。git logコマンドでコミットメッセージを確認してみてください
 次はこのリポジトリをBitbucketへpushします。ちなみに、ローカルリポジトリに対してBitbucketのようにネットワーク上に配置されたリポジトリはリモートリポジトリと呼ばれます。つまり、これからやることはローカルでの変更内容をリモートへ反映させる作業ということです
 まずはBitbucketのアカウントページからリポジトリを作成してください。作成できたらローカルのGitbushに戻り、リモートリポジトリの設定を行います

$ git add remote origin リモートリポジトリのURL

 これでリモートリポジトリにoriginという名前とそのアドレスが登録されました。リモートにあるリポジトリを基点にして作業するので、リモートリポジトリがorigin(原本)というわけです。リモートリポジトリのURLはbitbucketのアカウントページからリポジトリを選択→Cloneボタンをクリックすれば確認できます。また、設定したリモート先をGitbushから確認したいときはgit remote -vで見られます。
 リモートリポジトリの設定が完了したので、ローカルリポジトリをリモートへpushしてみましょう

$ git push origin master

 masterというのはリポジトリを作成した際にデフォルトで用意されるbranch(枝)です
 branchを簡単に説明すると、リポジトリをある時点から分岐させた際に、枝分かれした方のリポジトリを指し示すためのポインタです。ある変更点に遡ってリポジトリを復元させたり、枝分かれしたリポジトリをmerge(結合)させるときなどに指定します
 branchを切るときはどこから切るか指定する必要があるわけですが、既に用意されているmasterから切っていくことになるので、masterが最初の親ブランチとなります。この辺りの詳細はリンクのチュートリアルに譲りますので、ご一読いただければ幸いです

 無事pushできたら、bitbucketの方で内容が更新されているかどうか確認しましょう。作成したテキストファイルがリポジトリに追加され、コミットメッセージが表示されていればOKです

 ところで、git cloneコマンドで複製されたリポジトリにはクローン元(origin)のコミットとブランチを示すリモートブランチというものが存在します。リモートリポジトリがどこまで更新されているのか分かるようになっているのですが、今回はローカルからリモートにpushしただけなので、originのコミットやブランチの状態を示すデータがありません。これをリモートから取って来ましょう

$ git fetch origin

 取得できたら、以下のコマンドで確認してみてください

$ git log --graph --pretty=format:'%s %d'

 origin/masterやorigin/HEADが表示されていればOKです。他に誰も変更を加えていなければ、master,origin/master,origin/HEADが横並びになっているかと思います

デプロイ環境からBitbucketへssh接続する

 Bitbucketとデプロイ環境を接続するために、SSH認証の公開鍵と秘密鍵を作成します。まずはsshクライアントからデプロイ環境にログインしてください。前回の記事で作成したAWSのAmason Linuxインスタンスであれば、ec2-userのホームディレクトリ内に.sshディレクトリがあるので、そこに鍵を保存します

$ cd ~/.ssh
$ ssh-keygen -t rsa -C Bitbucketに登録したメールアドレス 

 作成したらcatコマンド等でid_rsa.pubの内容をコピーしてください
 次にBitbucketのアカウントページに移動し、左下のユーザアイコンから「Bitbucket Settings」を選択してください。続いてセキュリティの項目内の「SSH鍵」を選択し、「鍵を追加」をクリックします。「key」のテキストボックスにコピーした内容を貼り付け、「保存」をクリックすればsshキーの設定は完了です。「label」の項目は自由に設定してください
 再びsshクライアントに戻り、今度はssh接続の設定を行います。.sshディレクトリ内にconfigファイルを作成しましょう

$ vi config
Host bitbucket.org
 HostName altssh.bitbucket.org
 User git
 Port 443
 IdentityFile ~/.ssh/id_rsa
 TCPKeepAlive yes
 IdentitiesOnly yes

 ※22番ポートだと接続できないので注意してください

 秘密鍵パーミッションを変更します。変更しないと警告が表示されて繋いでくれません

$ chmod 600 ~/.ssh/id_rsa

 Bitbucketに接続してみます。「logged in as ユーザ名」と表示されれば成功です

$ ssh -T bitbucket.org


 今回はここまでです。お疲れさまでした
 実際にリモートからデプロイ環境へpullする工程は、また後日説明いたします
 

 

AWS EC2で開発環境を作る(LAMP+laravel5.5)

はじめに

 こういう便利なものが世の中にはあるそうですよ。
 
aws.amazon.com

 アマゾンに限らず色々なとこがクラウド開発環境を提供しているので、がっつり開発に専念したい人は調べてみてはいかがでしょうか?「クラウドIDE」とかで検索するといっぱい出てくると思います。とりあえずAWSも触ってみたいなって方はお付き合いください
 ところで、これから書くことはAWSの公式ガイドに詳細が記載されています。それをまとめているだけなので、細かい点は以下のリンクを確認してください。というか、むしろそっちを見ながら進めた方が早いと思います

  

EC2をセットアップする

1. AWSアカウントの作成
 まずはここから
2. IAMユーザを作成し、管理者グループに登録
 コンソールの管理権限を付与します
3. キーペアを作成
 SSHで接続するときに使用します。アクセス可能な場所に秘密鍵を保存してください
4. VPCの作成
 デフォルトで用意されていればスキップ可。ご自身の構成に従って作成してください
5. セキュリティグループの作成
 Webserverなのでssh,http,httpsは開けてください
6. インスタンスを起動
 コンソールから選択します
7. インスタンスに接続
 ec2-userでログインします。好みのSSHクライアントからどうぞ。ブラウザからも可能です
8. CloudWatchアラートの設定
 無料利用枠の使用状況を通知させます

  

Amazon Linux AMI でLAMP環境を作る

1. インスタンスに接続
2. 更新をインストール

[ec2-user ~]$ sudo yum update -y

3. Apache,MySQL,PHPとその依存関係をインストールする

[ec2-user ~]$ sudo yum install -y httpd24 php70 mysql56-server php70-mysqlnd

4. Apachを起動する

[ec2-user ~]$ sudo service httpd start
Starting httpd:                                            [  OK  ]

5. システムがブートするたびにApacheが起動するように設定

[ec2-user ~]$ sudo chkconfig httpd on

6. ブラウザで確認
 URLバーにパブリックDNSアドレスまたはパブリックIPアドレスを入力します。Amazon Linux AMI Test Pageが表示されればOKです
7. 所有権と許可の変更
 ec2-userが/var/www以下のファイルを操作できるようにします。デフォルトの所有者はrootです。公式ガイドではapacheグループに所有権を与え、ec2-userをapacheグループに加えるという方法を採用しています
 まず、ec2-userをApacheグループに追加します

[ec2-user ~]$ sudo usermod -a -G apache ec2-user

 /var/www以下のユーザ所有権をec2-userに、グループ所有権をApacheグループに変更します

[ec2-user ~]$ sudo chown -R ec2-user:apache /var/www

 /var/www以下のディレクトリにSGIDを設定します

[ec2-user ~]$ sudo chmod 2775 /var/www
[ec2-user ~]$ find /var/www -type d -exec sudo chmod 2775 {} \;

 ファイルについても同様にパーミッションを設定します

[ec2-user ~]$ find /var/www -type f -exec sudo chmod 0664 {} \;

8. SSL/TLSを有効にする
 まずセキュリティグループでhttps(TCP:443)が接続可能になっているか確認してください。問題なければApachモジュールのmod_ssl をインストールし、Apacheを再起動します

[ec2-user ~]$ sudo yum install -y mod24_ssl
[ec2-user ~]$ sudo systemctl restart httpd

 ブラウザのURLバーにhttps://と記入してからドメインまたはIPを入力してください。普通は警告画面が表示されますが、とりあえずSSL通信はできています
 自己署名でないCA署名証明書を適用する場合は、以下のガイドを参照してください。この記事ではこのまま先に進みます

  

LAMP環境のテスト&Mysqlの設定変更

1. ApacheのドキュメントルートにPHPファイルを作成します

[ec2-user ~]$ echo "<?php phpinfo(); ?>" > /var/www/html/phpinfo.php

2. ブラウザのURLバーにパブリックDNSアドレスかIPアドレスを入力し、続けて/phpinfo.phpと入力します。PHPの情報が記載されているページが表示されればOKです
3. phpinfo.phpを削除します(セキュリティ上よろしくないようです)

[ec2-user ~]$ rm /var/www/html/phpinfo.php

4. Mysqlのrootパスを設定する。途中の質問はYで回答してください

[ec2-user ~]$ sudo mysql_secure_installation
//匿名ユーザを削除する
Remove anonymous users? [Y/n] Y
//リモートrootログインを無効にする
Disallow root login remotely? [Y/n] Y
//テストDBを削除する
Remove test database and access to it? [Y/n] Y
//権限テーブルをリロードし、更新を反映する
Reload privilege tables now? [Y/n] Y

 これで無事LAMPサーバーを構築できました。さっそくLaravelも入れたいところですが、ついでにDBをブラウザから操作できるphpMyAdminを導入したいと思います。
 phpMyAdminは使わないよって人は読み飛ばしてください

  

phpMyAdminのインストール

 Amazon LinuxではphpMyAdminの自動インストールをサポートしてないそうなので、手動で行います
1. yumコマンドで依存ファイルをインストールします

[ec2-user ~]$ sudo yum install php70-mbstring.x86_64 php70-zip.x86_64 -y

2. Apacheを再起動します

[ec2-user ~]$ sudo systemctl restart httpd

3. Apacheのドキュメントルートに移動します

[ec2-user ~]$ cd /var/www/html

4. https://www.phpmyadmin.net/downloadsから最新のパッケージのリンクをコピーし、ダウンロードします

[ec2-user html]$ wget https://www.phpmyadmin.net/downloads/phpMyAdmin-latest-all-languages.tar.gz

5. パッケージを解凍し、ディレクトリ名を管理しやすい名前に変更します

[ec2-user html]$ tar -xvzf phpMyAdmin-latest-all-languages.tar.gz
[ec2-user html]$ mv phpMyAdmin-4.x.y-all-languages phpMyAdmin

6. ブラウザのURLバーにパブリックDNSかIPを入力し、続けて/phpMyAdminと入力します。ログインページが表示されればOKです。Mysqlで設定したパスを元に、rootでログインしてください

  

Composerの導入とLaravelのインストール

 Laravelをインストールする前に、ライブラリ管理ツールのComposerをインストールします。Composerって何?という方は以下のリンク等をご参照ください

[ec2-user ~]$ curl -sS https://getcomposer.org/installer | sudo php
[ec2-user ~]$ mv composer.phar /usr/local/bin/composer
[ec2-user ~]$ sudo ln -s /usr/local/bin/composer /usr/bin/composer

 /var/wwwの下にLaravelプロジェクトを作成します

[ec2-user ~]$ cd /var/www
[ec2-user www]$ composer create-project --prefer-dist laravel/laravel

 ところで、t2.microインスタンス(無料枠のデフォルトインスタンス)はメモリが1GBとかなり低いため、メモリ不足でインストールできないことがあります
 Cannot allocate memory等とエラーが吐き出されますが、この場合、Swap領域を作成することで解決できる可能性があります

 以下、スワップファイルの作成(swapfile1に空データを1Mブロック毎に512回出力)→パーミッション変更→スワップ領域を作成→スワップサイズの確認を行います

[ec2-user ~]$ sudo dd if=/dev/zero of=/swapfile1 bs=1M count=512
[ec2-user ~]$ sudo chmod 600 /swapfile1
[ec2-user ~]$ sudo mkswap /swapfile1
[ec2-user ~]$ swapon -s

 メモリ不足だった方は、再度Laravelのインストールを試みてください
 無事Laravelがインストールされたら、Apacheのドキュメントルートを変更します(/var/www/laravel/publicがlaravelのホームです)
 httpd.confを直接変更することも可能ですが、変更箇所を明確にし管理しやすくするために、別に*.confファイルを用意します
 /etc/httpd/conf.d下に配置された*.confの設定をApacheは認識してくれます。今回は仮にcustom.confとします

[ec2-user ~]$ sudo vi /etc/httpd/conf.d/custom.conf

 viはlinuxの標準のテキストエディタを起動するコマンドです。操作方法などは別途お調べください

DocumentRoot "/var/www/laravel/public"

 Apacheを再起動します

[ec2-user ~]$ sudo service httpd restart

 ブラウザからアクセスしてみてください。Laravelのトップ画面が表示されれば完了です 

 ただ、ここで一つ問題があります。ブラウザからphpMyAdminにアクセスするときはURLバーに「http://パブリックDNSまたはIP/phpMyAdmin」と入力しました
 しかし、今のドキュメントルートは/var/www/laravel/publicなので、public直下にphpMyAdminがインストールされていないと上記のURLでは見れません
 そこで、custom.confにAlias設定を追記して/phpMyAdminでアクセスできるようにマッピングします

[ec2-user ~]$ sudo vi /etc/httpd/conf.d/custom.conf
Alias /phpMyAdmin "/var/www/html/phpMyAdmin"

 Apacheを再起動し、ブラウザから~/phpMyAdminでアクセスできればOKです
 ただし、セキュリティ上/phpMyAdminでアクセス可能にしておくことは好ましくありませんので、/dbmanager等、任意の名前に変更しておきます
 また、通常のhttp通信では送信フォームの内容(ユーザ名、パス)がそのまま送信されてしまいますので、phpMyAdminへのアクセスはhttps必須にします

[ec2-user ~]$ sudo vi /etc/httpd/conf.d/custom.conf
<Directory "/var/www/html/phpMyAdmin">
 SSLRequireSSL
</Directory>

 Apacheを再起動し、まずはブラウザから普通にhttpでphpMyAdminにアクセスしてみてください。Forbidden(閲覧禁止)が表示されるはずです
 次に、httpsでアクセスしてみてください。自己署名証明書の場合は警告が出ますが、警告を無視して進めばphpMyAdminのページが表示されます

  

データベースへの接続設定

 viで/var/www/laravel/.envを開きます

[ec2-user ~]$ vi /var/www/laravel/.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=作成したデータベースの名前
DB_USERNAME=設定したユーザー名
DB_PASSWORD=設定したパスワード

 上記の部分を設定してください。まだデータベースを作ってない方は、phpMyAdminから作成してみてください。
 次に、/var/www/laravel/config/database.phpを編集します

 [ec2-user ~]$ vi /var/www/laravel/config/database.php
 'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', '作成したデータベースの名前'),
            'username' => env('DB_USERNAME', '設定したユーザー名'),
            'password' => env('DB_PASSWORD', '設定したパスワード'),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,

  
 これでひとまず、AWSのテスト開発環境(LAMP+Laravel)の構築は完了です
 お疲れさまでした