Windowsユーザーがドットインストールのローカル開発環境の構築 [Windows編]で自分なりのローカル開発環境を構築する方法

【この記事を読むのに必要な時間は約 10 分です。】

ドットインストールのローカル開発環境の構築 [Windows編]のレッスンが終わり、さて、自分用にカスタマイズしようとすると仲々思うようにできすに困る。．．．と思う。
今回は、レッスンしながら最終的に自分用にカスタマイズ出来るように説明したいと思う。
カスタマイズ時のつまづきポイントについても説明する。

事前準備

必要なもののインストール場所

ドットインストールのレッスン環境と全く同じようにしようとするとCドライブを使用することになる。
最近はCドライブは高速なSSDやeMMCを使用しOSのみインストールして、アプリケーションやデータ等はその他のドライブで利用している人も多いと思う。
Cドライブにインストールしなければならないものはひとつもないので、Cドライブ以外にわかりやすくフォルダを作成してインストール場所とすることをオススメする。
私は、Eドライブをローカル開発環境専用ドライブにしていて、以下のように必要なものはインストールしている。
また、今回のレッスン用には、極力、Cドライブと同じような環境にするために、E:/Users/jumpup[ユーザー名]/MyVagrant/ForStudyのようにしている。

VirtualBoxとVagrantインストール

VirtualBoxとVagrantのインストールは、レッスンどおりに進めれば良い。

CyberduckとAtomのインストール

レッスンでは、仮想マシーンにログインするツールとして、「PuTTY」と「Cyberduck」を使用するが、「PuTTY」についてはPowerShellでvagrant sshを利用できるようにするのでインストールしてもしなくても良い。
以下を参考に予めCyberduckとAtomをインストールしておこう。

PowerShellの設定

1. Linuxコマンドが利用できるようにする。
   　Cygwinをインストールする。
2. vagrant sshを利用できるようにする。
   　レッスンではPuTTYを利用するが、vagrant sshが利用できたほうが便利だ。
   　OpenSSHをインストールする。
3. viが利用できるようにする。
   　vimをインストールする。

WindowsユーザーがドットインストールのVagrant入門でつまずかない方法の2 Windows PowerShellでコマンド作業が出来るようにするで詳しく説明しているので確認しながら設定して欲しい。

Tips:設定なしでPowerShellを起動したいフォルダから起動する方法

エクスプローラーでPowerShellを起動したいフォルダの中を表示した状態でAlt+Dで表示されるアドレスバーにpowershellと入力すると良い。
詳しくは以下のサイトを参考に。

レッスンでわかりにくい部分とカスタマイズ用のポイント

レッスンでわかりにくい部分とカスタマイズ用のポイント部分を説明する。

共有フォルダ

①レッスンではデフォルトの共有フォルダ/vagrantをそのままに利用している。
またsshのログインユーザーのルートディレクトリである/home/vagrantにドットインストールのレッスン用フォルダphp_lessonsを作成する前提で話をススメている。
②共有フォルダはデフォルトの/vagrantだと使いにくので、vagrant sshのログインユーザーのルートディレクトリになる/home/vagrantに/sharedフォルダを作成し、/home/vagrant/sharedを共有フォルダにする。
補足 共有フォルダの設定は、パーミッションの設定も含め、全てvagrantfileで行う。

ドキュメントルートのシンボリックリンクの設定

①レッスンでは、apacheのドキュメントルート/var/www/htmlに対して、/vagrant/public_htmlにシンボリックリンクを設定している。
②共有フォルダを/vagrantから/home/vagrant/sharedに変更するので、/home/vagrant/shared/public_htmlにシンボリックリンクを設定する。

補足 後述するが、ブラウザで表示できるようにするために/home/vagrantのパーミッションの設定も必要。

実際の設定手順

１．構築したいフォルダを作成 PowerShell
　　PowerShellを起動したら、作成したいフォルダヘ移動。

# 例）E:/Users/jumpupから
mkdir MyVagrant
cd MyVagrant
mkdir ForStudy
cd ForStudy

２．プラグインのインストール PowerShell

vagrant plugin install vagrant-vbguest

３．Vagrantの初期化-Vagrantfileの作成 PowerShell

vagrant init bento/centos-6.8

４．vagrantfileの編集-IPアドレスの指定 Atom

# config.vm.network "private_network", ip: "192.168.33.10"
　　　　　　　　⇓パウンド記号を外す
config.vm.network "private_network", ip: "192.168.33.10"

５．仮想マシーンを起動する PowerShell

vagrant up

６．仮想マシンの状態を確認する PowerShell

vagrant status

７．仮想マシーンにログイン PowerShell

vagrant ssh

８．仮想マシーンの設定-ドットインストールが用意したスクリプトを利用 PowerShell

# OSを最新状態にアップデート（多少時間かかります）
sudo yum -y update

# スクリプトを入手するためのgitをインストール
sudo yum -y install git

# gitを使ってアプリケーション設定用のスクリプトをダウンロード
git clone https://github.com/dotinstallres/centos6.git

# centos6フォルダができるのでそちらに移動
cd centos6

# スクリプトを実行（２０分から１時間くらい時間かかります）
./run.sh

# もろもろの設定を反映
exec $SHELL -l

９．共有フォルダの設定 Cyberduck/Atom/PowerShell

①デフォルトではローカル（パソコン）のvagrantfileがあるフォルダ（この例ではForStudy）と仮想マシーンの/vagrantが共有フォルダになっている。
②共有フォルダを作成 Cyberduck
Cyberduckでssh接続して/home/vagrant（sshのルートディレクトリ）にsharedフォルダを作成する。

/home/vagrant/shared

注意 Cyberduckでssh接続するときは、vagrant sshからはログアウトしておく。
③vagrantfileに以下を追記する Atom

# config.vm.synced_folder "../data", "/vagrant_data"
　　　⇓の下に
config.vm.synced_folder ".", "/home/vagrant/shared", owner:'vagrant', group:'apache', mount_options:['dmode=775', 'fmode=755']
# デフォルトがいらない場合は以下も追記
config.vm.synced_folder ".", "/vagrant", disabled: true

10．vagrantfileの変更を反映させる Powershell

vagrant reload

11．Cyberduckでssh接続してフォルダとファイルを作成する Cyberduck/Atom

①フォルダとファイルを２つづつ作成する。Cyberduck

# apacheのドキュメントルート用とドットインストールの勉強用個別フォルダ
/home/vagrant/shared/public_html
/home/vagrant/shared/php_lessons

# ブラウザ表示テスト用にファイルを作成
/home/vagrant/shared/public_html/index.html
/home/vagrant/shared/php_lessons/index.php

②ローカルフォルダに作成したフォルダとファイルがあるか確認。
③index.htmlとindex.phpの内容 Atom

# index.html 表示テストなのでテキストだけ適当に打ち込めば良い
テスト用ブラウザ表示

# index.php　こちらもなんでも良いので適当に
<?php
   echo "ビルトインサーバーテスト表示";

12．apacheのドキュメントルートのシンボリックリンク PowerShell

ドキュメントルートのシンボリックリンクを/home/vagrant/shared/public_htmlに設定する。

# ssh接続
vagrant ssh

# /var/www/htmlフォルダを削除
sudo rm -rf /var/www/html

# 新たに/home/vagrant/shared/public_htmlにドキュメントルート/var/www/htmlをシンボリックリンク
# このとき/var/www/htmlフォルダは再度シンボリックリンクとして作成されている
sudo ln -fs /home/vagrant/shared/public_html /var/www/html

#/home/vagrantのパーミッションも変更していないとブラウザからアクセス出来ない
sudo chmod -R 755 /home/vagrant

13．apacheの動作確認 ブラウザ

ブラウザで192.168.33.10と打ち込み表示されればOK。

14．ビルトインサーバーの動作確認 PowerShell/ブラウザ

①ビルトインサーバーが起動するか確認する。index.phpのあるフォルダまで移動して確認。

# ssh接続
vagrant ssh

#index.phpのあるフォルダまで移動
cd shared/php_lessons

#ビルトインサーバーを起動
php -S 192.168.33.10:8000

②ブラウザで192.168.33.10：8000と打ち込み表示されればOK。

15．hostsファイルの編集 Windows

設定したIPアドレス192.168.33.10に自分のわかりやすい名前でアクセス出来るようにする。
例）「dev.jump-up.com」
仮想マシーン起動中であれば、ブラウザにdev.jump-up.comと打ち込むと先程作成したindex.htmlが表示される。
また、ビルトインサーバーを立ち上げた場合もブラウザにdev.jump-up.com:8000と打ち込むと先程作成したindex.phpが表示される。
hostsファイルの編集方法は、レッスンにある。

16．Boxとして保存しておく PowerShell

設定が全部終わったらvagrantは自分用のBoxで保存しておくと再利用が便利。
Boxの作成方法は別のレッスンにある。

最後に

これでレッスンを進めながら自分用にカスタマイズもできるようになると思う。ローカル開発観葉を構築したいPCのフォルダの位置、共有フォルダの設定、ドキュメントルートの変更、パーミッションの設定が自分で出来ると思うので、自由度は高まったのではないだろうか。
また、ドットインストールが用意したスクリプトを利用せずに、自分で全部インストールする場合は、provisionを作成しながら一歩づつ進めれば良いと思う。
porvison等については、ドットインストールのVagrant入門を勉強してから作成すれば良いと思う。

以上