【初心者支援】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

スポンサーリンク

ViatualBoxのインストール

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

スポンサーリンク

VisualStudioCodeのインストール

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

スポンサーリンク

Windowsを再起動

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

スポンサーリンク

起動確認

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

vagrant02.JPG
バージョン情報が出たらここまで成功です。

スポンサーリンク

WEB環境構築

Cドライブ上にフォルダを作成しよう

わかりやすい名前の方がいいですよ。
後からいくらでも追加することになると思うので判別しやすい名前がいいかと。
ここでは「ApplicationName」とします。

そのフォルダに移動しよう

vagrant.JPG

Boxを追加しよう

Boxって???「Vagrant VirtualBox」で検索して色々調べてみよう。
いいかここは素早く実装までもっていく場だ。考える前に手を動かせ。
vagrant box add [仮想マシン名] [BOXのあるURL]

めっちゃ時間かかります。放っておきましょう。
仕事してる感を出す練習をこのためにしておきましょう。
vagrant03.JPG
(やべ!アップデートしろって怒られてる!特に問題ありません。)

初期化しよう

フォルダに移動してからじゃないとだめです。

vagrant04.JPG

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

folder.JPG

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

vagrantfile.JPG

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

起動しよう

vagrant056.JPG

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

ログインしよう

vagrantssh.JPG
CentOS7にVagrantユーザーでログインできましたね!これでCentOS7と同じように環境構築すればOKです。
ものはついでなので、このまま設定を進めてしまいましょう。

おまじないをしておこう

CentOS7内のアプリを更新しています。
時間がかかるので仕事してるふりをしておきましょう。

Apacheを起動しよう

http://192.168.33.10/
にアクセスしてみよう。Apacheの起動画面が出てきたら成功です。
キャプチャ.JPG

ローカルのフォルダと同期をとれるようにしよう

便利にするためにこれまで面倒なことをしてきたのです!これをやらなければ!!

ソースコードを保存するフォルダを決めよう

おすすめはドキュメントフォルダです。Windowsは特にパーミッションが変わることがありますので、それに注意しましょう。(ProgramFilesパーミッション事件には驚いた……まぁ当然なのだが。

自分のわかりやすい名前でフォルダを作成しちゃいましょう。

C:\Users\NOZOMI_HOSAKA\Documents\SourceCode\ApplicationName
こんな感じですかね?(本名隠す気はないのでお気になさらず)

Vagrantfileを編集しよう

aaaaaaaaaa.JPG

¥マークに注意!\にしてください

ついでにhttp://localhost で接続できるようにしよう

WindowsのVagrantにはなぜか80ポートエラーが発生しません。
これをいいことに80番ポートで接続しちゃいましょう。
注意:これは将来しようできなくなるかもしれません。バージョンアップ後にトラブルがあった場合はこれを疑いましょう!
bbb.JPG

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

ccc.JPG

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

ddd.JPG
こんなのが出てきたらOK
fff.JPG

index.htmlを作成しよう

VisualStudioCodeを起動し、フォルダを選択を選ぼう

wwwww.JPG
C:\Users\NOZOMI_HOSAKA\Documents\SourceCode\ApplicationNameを選択してください。

vvvv.JPG
C:\Users\NOZOMI_HOSAKA\Documents\SourceCode\ApplicationNameにindex.htmlを作成して編集してください。

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

http://localhost/
にアクセス。きっとこうなっているはず。
aaaaaa.JPG

PHPを起動しよう

CentOS 7 の基本搭載PHPは5.4。バージョンは古いのでお好みでバージョン変えてください。
とりあえずここはこのまま進行します。

index.htmlを編集

phpinfo.phpを作成

qqq.JPG

http://localhost/
http://localhost/phpinfo.php
にアクセス。リンクをクリックするとこうなるはず。
phpinfo.JPG

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

スポンサーリンク

もっと便利にしよう[ブレークポイント]

xdebugのインストール

PHP5.4に合うxdebugのバージョンは2.4.1です。

php.iniを編集してxdebugを有効にします。

ひとまずこの設定で大丈夫でしょう。
(10.0.2.2の部分は$_SERVER[‘REMOTE_ADDR’]で確認できるIPです。)

xdebug.JPG
phpinfoでxdebugが有効になっていればOKです。

では止めてみましょう。

VSCodeの拡張機能であるPHPDebugをインストール
phpdebug.JPG
VSCodeにてF5を押下。
設定内容を聞かれたらこんな感じで設定

すると
debug.JPG
こんな感じで止まります。

これだけできれば大変デバッグがしやすくなると思います。
お好みでこの辺を入れたらいいと思いますが、場合によってはPHPをWindowsにインストールする必要があるかも。
phpsample.JPG
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
3. VSCodeの設定からフォントを「Source Han Code JP」にしてください。
font.JPG

Windowsにしてはきれい
sample.JPG

最後に

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

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

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

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

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

めちゃくちゃ参考にした

Vagrant + VirtualBoxでWindows上に開発環境をサクッと構築する - Qiita
最近、Vagrant(ベイグラント)を使い始めてすごい便利だなあと感じたので、Vagrantに関する記事を色々と読んで整理してみました。Windows環境でのセットアップ手順も書いています。 **(※Windows向けの手順を書いてい...

boxはここから

https://www.vagrantbox.es/
https://app.vagrantup.com/boxes/search

環境
スポンサーリンク
シェアする
スポンサーリンク
ライダープログラマー入門

コメント