【初心者支援】Windows使いのプログラマーへ [Vagrant + VirtualBox + VSCodeでまるっと全部載せ！！] 

# 対象者
WindowsPCを選択せざるを得ない、初心者なあなた。
プロの方はもっといい環境をコメントに書いてシェアしてください。
**Windowsのプロの方は特に！！**

# Windows使いな君へ
こんにちは。突然だけどあなたは何を使って開発してますか？きっといろいろな開発環境があるでしょう。
1. Mac
2. Linux (Vimとか)
3. Linux Desktop(UbuntuでEmacsとか)
4. Android(まじで！？スゲーよあんた)

そんな中で圧倒的シェア率を誇るOS、**Windows!!**日本のようなドキュメント国家ではWordやExcelのやり取りに追われWindowsを選択する他ないエンジニアの方もおられるのではないでしょうか。WindowsPCを選択したあなたはこのような方かもしれません。

1. ドキュメントのやり取りが多い（Word/Excelの使用率高）
2. 会社の設備投資能力が低い（安物PCとしてのWindows）
3. C++/C#などWindowsForm開発者からの転身
4. ただWindowsが好き

あなたは何番でしょうか。（まさかMac使いの方でここまで読んでいる方はいませんよね？（冗談です。））
**僕は3番でした。**

**WEB開発環境はMacの方が優秀。これはもはや自明の理ですが、Windowsができないというわけではありません。
どうしてもWindowsしか使用できない。そんな状況で回ってきたWEB系の仕事！！
そんな初心者なあなたに開発環境構築のいろはをお教えできたらと思います。**

# 今回作成する環境
- Apache (WEBサーバー)
- PHP (サーバープログラミング言語)

が動作する環境を作ってみましょう。
またそれにあたってMacのような見た目にしてちょっとカッコつけちゃいましょう！
ついでに便利なツールも入れちゃいましょう！

- Vagrant
- VirtualBox
- VisualStudioCode(Microsoft製！Windowsとの相性悪かったら笑ってやる)
- xdebug(ブレークポイントとか置けるようになるよ！)

# 概論はすっ飛ばす！
この記事は

- 仮想環境が・・・
- Dockerというものもあってだね・・・
- Atom使わねーの？

これ論ずる場にしません。あくまできっかけとして**素早く**環境を実装するために書きました。
さっさと作っていじってみて何かつかめたら、そこから自分好みにカスタマイズしちゃってください。
僕のおすすめってだけです。

# 環境構築
## Vagrantインストール
https://www.vagrantup.com/downloads.html
ここからインストーラーをダウンロードしてインストールしてください。当然クリックするのは「Windows」ですよ！
インストーラーが起動したらとにかくデフォルトでいいのでインストールしちゃいましょう。
![vagrant01.png](https://qiita-image-store.s3.amazonaws.com/0/192516/3812e23f-b57c-78e2-7f80-d0fb2d150844.png)

## ViatualBoxのインストール
https://www.virtualbox.org/wiki/Downloads
ここからインストーラーをダウンロードしてインストールしてください。当然クリックするのは「Windows」ですよ！
インストーラーが起動したらとにかくデフォルトでいいのでインストールしちゃいましょう。
![virtualbox.png](https://qiita-image-store.s3.amazonaws.com/0/192516/c4a4a599-687d-f161-5f99-0ee8c4ee1c4b.png)

## VisualStudioCodeのインストール
https://code.visualstudio.com/
ここからインストーラーをダウンロードしてインストールしてください。当然クリックするのは「Windows」ですよ！
インストーラーが起動したらとにかくデフォルトでいいのでインストールしちゃいましょう。


## Windowsを再起動
この二つが終わればWindowsを再起動してください。
**必ず再起動してください。**

## 起動確認
コマンドプロンプトを起動して

```bash
vagrant -v
```
![vagrant02.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/af68324a-301a-8b05-b86a-546706704bff.jpeg)
バージョン情報が出たらここまで成功です。

## WEB環境構築
### Cドライブ上にフォルダを作成しよう
わかりやすい名前の方がいいですよ。
後からいくらでも追加することになると思うので判別しやすい名前がいいかと。
ここでは「ApplicationName」とします。
### そのフォルダに移動しよう
```bash
cd C:\ApplicationName\
```
![vagrant.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/d7c7c778-f001-5d90-1ca1-40f8eb96a04d.jpeg)
### Boxを追加しよう
Boxって？？？「Vagrant VirtualBox」で検索して色々調べてみよう。
いいかここは素早く実装までもっていく場だ。考える前に手を動かせ。
vagrant box add [仮想マシン名] [BOXのあるURL]

```bash
vagrant box add ApplicationName https://github.com/CommanderK5/packer-centos-template/releases/do
wnload/0.7.2/vagrant-centos-7.2.box
```
めっちゃ時間かかります。放っておきましょう。
仕事してる感を出す練習をこのためにしておきましょう。
![vagrant03.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/0761f393-e265-3f67-f864-0e48724e01bc.jpeg)
（やべ！アップデートしろって怒られてる！特に問題ありません。）
### 初期化しよう
フォルダに移動してからじゃないとだめです。

```bash
vagrant init ApplicationName
```
![vagrant04.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/aec611a9-6fe6-8b2d-36dc-a08442ab98ae.jpeg)

するとVagrantfileが作成されています。

![folder.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/a04e5b5d-17c9-e84e-78b8-d11daef9fe16.jpeg)

中身を編集しちゃいましょう

![vagrantfile.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/cb1a0a8f-8d29-4feb-8a0e-9558dc6975ca.jpeg)

バージョンによって内容が異なるかもしれません。それっぽいところを編集しましょう。コメントアウト解除するだけですから簡単ですよね！

### 起動しよう
```bash
vagrant up
```
![vagrant056.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/6eafbd1c-8445-e754-414a-c5fc60da12a8.jpeg)

何か色々出てきます。
Errorなく終了していれば問題ありません。
起動完了です。

### ログインしよう
```bash
vagrant ssh
```
![vagrantssh.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/ff5b6af5-3b54-4c01-caaf-59fc07fc5c81.jpeg)
CentOS7にVagrantユーザーでログインできましたね！これでCentOS7と同じように環境構築すればOKです。
ものはついでなので、このまま設定を進めてしまいましょう。

### おまじないをしておこう
```bash
sudo yum update
```
CentOS7内のアプリを更新しています。
時間がかかるので仕事してるふりをしておきましょう。

### Apacheを起動しよう

```bash
sudo yum -y install httpd
sudo systemctl start httpd
sudo firewall-cmd --add-service=http
```
http://192.168.33.10/
にアクセスしてみよう。Apacheの起動画面が出てきたら成功です。
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/1755b296-eb3f-248c-cc22-0e1e153f3cf2.jpeg)

### ローカルのフォルダと同期をとれるようにしよう
便利にするためにこれまで面倒なことをしてきたのです！これをやらなければ！！
#### ソースコードを保存するフォルダを決めよう
**おすすめはドキュメントフォルダです。**Windowsは特にパーミッションが変わることがありますので、それに注意しましょう。（ProgramFilesパーミッション事件には驚いた……まぁ当然なのだが。
#### 自分のわかりやすい名前でフォルダを作成しちゃいましょう。
**C:\Users\NOZOMI_HOSAKA\Documents\SourceCode\ApplicationName**
こんな感じですかね？（本名隠す気はないのでお気になさらず）
#### Vagrantfileを編集しよう
![aaaaaaaaaa.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/5f6b12d4-1469-2433-e859-6d83de088015.jpeg)

**￥マークに注意！\\にしてください**

```bash
config.vm.synced_folder "C:\\Users\\NOZOMI_HOSAKA\\Documents\\SourceCode\\ApplicationName", "/var/www/html/"
```
#### ついでにhttp://localhost で接続できるようにしよう
WindowsのVagrantにはなぜか80ポートエラーが発生しません。
これをいいことに80番ポートで接続しちゃいましょう。
**注意：これは将来しようできなくなるかもしれません。バージョンアップ後にトラブルがあった場合はこれを疑いましょう！**
![bbb.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/baf9dcef-0390-bc00-2d4a-953d1c472f7f.jpeg)

```bash
[-]config.vm.network "forwarded_port", guest: 80, host: 8080
　　　　　　　　　　　　　　　　↓
[+]config.vm.network "forwarded_port", guest: 80, host: 80
```

編集を終えたら一度コマンドプロンプトに戻ります。

```bash
exit
```
![ccc.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/6fd919b3-0d1d-0879-e83b-5203563bfde7.jpeg)

#### Vagrantfileの設定を読み込みなおそう

```bash
vagrant reload
```
![ddd.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/97380279-7382-90d8-13a9-79fb8f2b97a1.jpeg)
こんなのが出てきたらOK
![fff.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/0c3a48bb-8415-0d48-1656-bb705ef41975.jpeg)

#### index.htmlを作成しよう
VisualStudioCodeを起動し、フォルダを選択を選ぼう

![wwwww.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/d0635c9c-1ca4-39ee-471c-19acb5c8b18a.jpeg)
C:\Users\NOZOMI_HOSAKA\Documents\SourceCode\ApplicationNameを選択してください。

![vvvv.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/d37820a9-cd3a-7339-6a2b-accb196967fe.jpeg)
C:\Users\NOZOMI_HOSAKA\Documents\SourceCode\ApplicationNameにindex.htmlを作成して編集してください。

```html
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>HelloWorld</h1>
    </body>
</html>
```

#### もう一度CentOS7にログインして現状を把握しよう

```bash
vagrant ssh
```
```bash
sudo systemctl start httpd
```
http://localhost/
にアクセス。きっとこうなっているはず。
![aaaaaa.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/bd25d8b3-e00e-0dc4-532d-4d44d97fdf77.jpeg)

### PHPを起動しよう
```bash
sudo systemctl stop httpd
sudo yum -y install php
sudo systemctl start httpd
```
CentOS 7 の基本搭載PHPは5.4。バージョンは古いのでお好みでバージョン変えてください。
とりあえずここはこのまま進行します。

#### index.htmlを編集
```html
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>HelloWorld</h1>
        <a href="phpinfo.php">phpinfo.php</a>
    </body>
</html>
```
#### phpinfo.phpを作成
![qqq.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/583dd070-f555-cb10-660b-52388c8625e3.jpeg)

```php
<?php
    phpinfo();
```
http://localhost/
http://localhost/phpinfo.php
にアクセス。リンクをクリックするとこうなるはず。
![phpinfo.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/8cc7139a-b827-6a67-048f-92c77371a75b.jpeg)

これでPHP起動完了。
あとは好きに開発してください。
長かった？でも実はこれMacでも同じことをしなければなりません。

## もっと便利にしよう[ブレークポイント]
### xdebugのインストール
```bash
sudo yum -y install php-pear php-devel
sudo pecl install xdebug-2.4.1
```
PHP5.4に合うxdebugのバージョンは2.4.1です。

```bash
sudo sudo vi /etc/php.ini
```
php.iniを編集してxdebugを有効にします。

```ini
[XDebug]
zend_extension="/usr/lib64/php/modules/xdebug.so"
xdebug.default_enable=1
xdebug.remote_enable=on
xdebug.remote_port=9000
xdebug.remote_autostart=1
xdebug.remote_host=10.0.2.2
```
ひとまずこの設定で大丈夫でしょう。
（10.0.2.2の部分は$_SERVER['REMOTE_ADDR']で確認できるIPです。）

```bash
sudo systemctl restart httpd
```
![xdebug.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/119b3151-9d23-6ecf-3a7f-273001674c5a.jpeg)
phpinfoでxdebugが有効になっていればOKです。

では止めてみましょう。

VSCodeの拡張機能であるPHPDebugをインストール
![phpdebug.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/bcc2c7cc-9cef-06d8-e433-130fb048ddb4.jpeg)
VSCodeにてF5を押下。
設定内容を聞かれたらこんな感じで設定

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/html": "${workspaceRoot}",
              },
            },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}
```

すると
![debug.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/43e1f659-e132-fe67-cf30-efaf78fb4a21.jpeg)
こんな感じで止まります。

これだけできれば大変デバッグがしやすくなると思います。
お好みでこの辺を入れたらいいと思いますが、場合によってはPHPをWindowsにインストールする必要があるかも。
![phpsample.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/fe2e5fa1-13d0-5ea0-7901-38b851f1946e.jpeg)
PHPのインストールをもとめられた時は面倒なのでXamppでもインストールしてPHPの実行パスにXamppのものを設定してください。
（自宅PCは求められずに職場PCは求められました。多分設定の問題ですね。）

## 外見をカッコよくしよう
https://github.com/adobe-fonts/source-han-code-jp
1. このページの「Download the fonts」の「Latest release」の「Source code(zip)」をダウンロードし解凍してください。
2. 「OTF」フォルダの中身全てのファイルをコントロールパネルのインストール済みのフォントにドラッグしてください。
![sasa.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/09e5769f-91e8-6001-86b8-d4e24fa258dd.jpeg)
3. VSCodeの設定からフォントを「Source Han Code JP」にしてください。
![font.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/90fd6e3d-b914-a021-fb55-70d76234eff1.jpeg)

Windowsにしてはきれい
![sample.JPG](https://qiita-image-store.s3.amazonaws.com/0/192516/6d8b5b9d-1b0a-9692-76be-6805f0e6a16f.jpeg)

# 最後に
散々既出のものをまとめた感じになってしまった。
ただ、この環境を作るときにもいろんなマニュアルといろんなバージョンとかケースが違いすぎて一貫性のない構築になってしまった経緯があります。
この記事は最後の最後まで一貫性をもって作成できているはずなので、1~10までということで勘弁してください。
こんな長い記事書いたのは新人のころにマニュアル作成しまくってた時以来です。

スクショもたくさん撮っておきました
コマンドなどの文字以外の情報もスクショから読み取れるようになっているはずです。自分の環境との違いを見比べて参考にできたら幸いです。

**何かわからないことがあれば質問受け付けます。**
レスはできるだけ早くするつもりですが、場合によっては返さないこともあると思います。

当然こうした方がいい。ああした方がいい。というのも受け付けますが、初心者向けにしてあげてください。コメントするときもできるだけ初心者の方が情報を拾えるようにしてください。

またWindowsの環境構築ベストプラクティスも応募中です。
コメントなどに記載願います。

# めちゃくちゃ参考にした
https://qiita.com/ozawan/items/160728f7c6b10c73b97e

# boxはここから
https://www.vagrantbox.es/
https://app.vagrantup.com/boxes/search

# 良かったら見てください。
個人ブログです。
https://labo.nozomi.bike