初めてWindowsローカルに開発環境を構築する人の為の記事【構築編】

##はじめに
Windowsローカルに開発環境を構築したいが、どう構築すれば良いかわからない、という人に向けて、[ドットインストールのローカル開発環境[Windows編]](https://dotinstall.com/lessons/basic_localdev_win_v2) を参考にしながら、開発環境（以下サーバーOS[^1]）を構築するために書いた記事です。
<b><font color="DeepPink">※インフラ周りの知識が豊富にある、または、インフラエンジニアなどの方にとっては物足りない内容となっております。</font></b>

##なぜ開発環境を構築する必要があるのか？
Web開発をする上で、開発環境(以下サーバーOS[^1])の構築が必要である理由は、
HTML/CSSなどのマークアップ言語、PHPなどのプログラミング言語を使用し、HTTP通信[^2]というルールのもとブラウザにWebサイトを表示することになります。
そこでHTML/CSS/PHPなどのファイルをサーバーOS（Webサーバー）に事前に配置することが必要になるためサーバーOS（Webサーバー）は必要となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379725/4390f83e-9bc2-c4ce-56b0-5d65d15f38f6.png)


##この記事を読むことで得られる効果
1.サーバーOSを構築することが可能となり、サーバーOSを用いてWebページを表示することが可能となる。

2.ドットインストールの動画を元に、ハンズオン形式で学ぶ+動画だけでは足りない情報をこの記事に盛り込む為、構築に必要な情報が得られる。

3.サーバーOSを構築するために必要な基礎知識として、わかりやすく解説されているサイトのリンクを貼りました。
そのサイトを予め読むことで、
➡基礎知識のインプット
➡インプットした内容を構築作業でアウトプットをすることにより、知識を定着することができる


##対象
- OS Windows(2020.04時点：私の場合は8.1で構築しました。)
- Web知識が乏しい方
- Linuxとは？という方
- VirtualBoxとは？という方
- Vagrantとは？という方
- CentOSとは？という方

上記に該当する方は、以下をまずは参照していただいてから取り組むことで、環境構築していく上で<b>仕組み</b>を理解する手助けとなります。

- [Linuxの仕組み](https://kitsune.blog/linux-summary)
- [Linux環境構築](https://kitsune.blog/linux-environment)
- [Vagrant入門から実践まで](https://qiita.com/daichi87gi/items/d5da33c76295ee32a735)
- [Vagrantとは](https://tech.furyu.jp/p2317/)
- [Webサーバーとは？](https://eng-entrance.com/java-servlet-server)

##目次
[1. VirtualBoxのインストール](#virtualboxのインストール)
[2. vagrantのインストール](#vagrantのインストール)
[3. vagrant upを実行する](#vagrant-upを実行する)
[4. 補足](#補足)
[5. Puttyのインストール](#puttyのインストール)
[6. 仮想マシンにログイン](#仮想マシンにログイン)
[7. 仮想マシンの設定](#仮想マシンの設定)
[8. cyberduckのインストールおよび設定](#cyberduckのインストールおよび設定)
[9. cyberduckの外部エディタ設定](#cyberduckの外部エディタ設定)

##VirtualBoxのインストール
では早速始めていきます。
VirtualBoxのインストールを実施します。
versionは-5.1.8を使用します。
[VirtualBox 過去Versionはこちら](https://www.virtualbox.org/wiki/Download_Old_Builds)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379725/e39081c3-c1ee-57c6-0f57-d88bcb6b1497.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379725/37147fb9-0110-8fa8-b4b0-7ceac26361f0.png)


対象のversionを選択し、インストールしましょう。
##vagrantのインストール
vagrantのインストールを実施します。
versionは-1.9.6を使用します。

- 64bit版：<b>vagrant_1.9.6_i686.msi</b>
- 32bit版：<b>vagrant_1.9.6_x86_64.msi</b>

適宜自分の環境に合わせてインストールしましょう。
こちらから👉[vagrant 過去version](https://releases.hashicorp.com/vagrant/)

インストールが完了したら以下の手順でサーバーOS構築の準備をします。
ドットインストールの補足情報から引用しております。
>今後複数の仮想マシンを作ることを想定して、それらをまとめるフォルダ（MyVagrant）を作る

>- mkdir MyVagrant
- MyVagrantに移動する
- cd MyVagrant
- 仮想マシンを作るフォルダを作る（MyCentOS）
- mkdir MyCentOS
- MyCentOSに移動する
- cd MyCentOS
- 仮想マシン設定用のVagrantfileを作る

まずは上記手順まで実施し、サーバーOSを作るフォルダを準備します。
私はPHP学習していることもあって、MyCentOSのフォルダ名をMyProject_PHPに変えています。
以下の解説ではMyProject_PHPと表記しますが、適宜置き換えてご覧ください。

コマンドプロンプトまたはPowerShellを起動し、cd(change directory)で
C:\Users\username(自分のPCusername)\MyVagrant\MyProject_PHP まで移動したら、

```sh

$vagrant init bento/centos-6.8
```
を実施します。
以下のように<b>vagrantfile</b>が作成されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379725/0ebd253e-5aee-1f1a-96c7-1623a6583d44.png)

次の手順は動画の通りに実施すれば問題ありません。
> - Vagrantfileを編集して仮想マシンのIPアドレスを192.168.33.10にする

##vagrant upを実行する
次に、以下のコマンドvagrant upでサーバーOSの起動を行うと

```sh
$vagrant up
```
以下のように起動が始まり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379725/675711af-cffe-ba44-29eb-6f7c80c58ce5.png)

以下のコマンドで

```sh
$vagrant status 
```

サーバーOSの起動状態を確認します。

```sh
Current machine states:

default                   running (virtualbox)

The VM is running. To stop this VM, you can run `vagrant halt` to
shut it down forcefully, or you can run `vagrant suspend` to simply
suspend the virtual machine. In either case, to restart it again,
simply run `vagrant up`.
```
上記のように<b>running</b>になっていれば<b>VirtualBox</b>が無事に起動されている状態です。

##補足
vagrant upを実施して、以下のようなエラーが発生している場合は

```sh
URL: ["https://atlas.hashicorp.com/bento/centos-6.8"]
Error: The requested URL returned error: 404 Not Found
```
対応していないversionによるエラーが考えられますので、
以下の方法でエラーの対処を行ってください
👉<b>[Windowsローカルに開発環境を構築中に【vagrant up】でエラーが発生【エラー解決】](https://qiita.com/triple321jhango/items/a14a3d25d244f5cea2f8)</b>


次に、以下のコマンドでBoxファイルの存在確認を行います。

```sh
$vagrant box list

bento/centos-6.8 (virtualbox, 2.3.4)
```

コマンド実行後、Boxファイルが出来上がっていることが確認できればOKです。
ここまでの流れでドットインストールの<b>#05 仮想マシンを立ち上げよう</b>まで完了したことになります。

## Puttyのインストール
では次にPuttyをインストールしていきましょう。
ドットインストールでいう<b>「#06 Puttyをインストールしていこう」</b>の部分になります。

そもそもPuttyとは？という方は以下を参照してください。

- <b>[オープンソースのPuttyとは](https://www.ossnews.jp/oss_info/PuTTY)</b>
- <b>[Puttyとはなんですか？](http://we-girls.hatenablog.com/entry/2015/08/08/Putty%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F)</b>

Puttyのインストールには以下を使用します。
<b>[Download PuTTY](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html)</b>

日本語版をダウンロードしたい場合は、
こちらを採用しても良いかと思います👉 <b>[ICE IV + putty](https://ice.hotmint.com/putty/index.html)</b>
私は日本語版をインストールしました。
ちなみに<b>versionは0.73</b>です。

おそらくここはスムーズに出来るかと思います。
##仮想マシンにログイン
特に問題なければ以下のid,passwordでログインできますが、
<b>login as: vagrant</b>
<b>password: vagrant</b>

Puttyの接続で<b>timed out</b>のエラーになってしまう場合には、仮想化支援機能(VT-x/AMD-V)が無効になっていることが考えられますので、その場合には以下の記事からエラーの対処を行ってください
👉<b>[Windowsローカルに開発環境を構築中に【Putty timed out】になった【エラー解決】](https://qiita.com/triple321jhango/items/470b0b03e15975533e1e)</b>


##仮想マシンの設定
仮想マシンの設定については私自身とくにエラー無く実行できた為、その他エラー等が発生した場合には、ドットインストール内の補足情報を参照いただければと思います。
<b>[#08ドットインストール](https://dotinstall.com/lessons/basic_localdev_win_v2/38608)</b>

##cyberduckのインストールおよび設定
cybercuckのインストールについては
こちらのサイトから<b>[Release notes and previous releases](https://cyberduck.io/changelog/)</b>
versionは動画の補足情報でも解説されていた7.0.2をインストールしました。
また、外部エディタの設定についてはVScodeを採用したかったため後述の手順でVScodeに設定しています。

- <b>cyberduckって何？</b>
- <b>FTPって何？</b>

という方は以下のサイトを見てもらうと分かりやすく解説されています。
👉<b>[FTPクライアントとは](https://tab-log.com/netshop-ftpclient)</b>@yusuke_tanaka34さん
私の方でも簡単に説明させていただきますと、
今回苦労して構築したサーバーOSとの橋渡しをしてくれる役目が
このcyberduck➡︎FTPクライアントです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379725/409d9851-fa10-de66-4afa-3881b3439c9f.png)



FTPとは(File Transfer Protocol)「ファイル転送プロトコル」➡︎ファイルを転送する為のルールみたいなものがあって、そのルールに則ってcyberduckを使ってサーバーにPHPファイルなどをアップします。

##cyberduckの外部エディタ設定
1.cyberduckを起動したら編集➡環境設定➡外部エディタ➡選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379725/5b8332bd-7273-a53c-d5c0-2bc4312ccc6b.png)
<b>C:\Users\username\AppData\Local\Programs\Microsoft VS Code\bin</b>
から<b>code.cmd</b>を選択
(インストール時にVScodeの場所を設定している場合には、そちらから選択してください。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379725/e6a94d4c-3017-c78f-1c30-86c55e7cbf1c.png)
上記を実施したら変更を反映させる為、一度cyberduck閉じて終了させましょう。

ここまで実施できれば、ホストOS⇒サーバーOSへcyberduckを通じて、サーバーへのアップロードが出来るかと思います。

以上で構築手順の説明は終わりです。
無事に環境構築が完了出来たら、作成中のHTMLやPHPファイルなどをアップロードしてクライアントに表示してみましょう。

まだまだ、完璧な記事が書けてるとは思わないので、追加があれば随時追記していく予定です。

ここまで読んでいただきありがとうございます。

##この記事を作成する上で参考にしたサイトまとめ
- [ドットインストールのローカル開発環境[Windows編]](https://dotinstall.com/lessons/basic_localdev_win_v2)
- [Linuxの仕組み](https://kitsune.blog/linux-summary)
- [Linux環境構築](https://kitsune.blog/linux-environment)
- [HTTP通信の仕組み](https://kitsune.blog/web-communication-structure)
- [Vagrantとは](https://tech.furyu.jp/p2317/)
- [Vagrant入門から実践まで](https://qiita.com/daichi87gi/items/d5da33c76295ee32a735)
- [オープンソースのPuttyとは](https://www.ossnews.jp/oss_info/PuTTY)
- [Puttyとはなんですか？](http://we-girls.hatenablog.com/entry/2015/08/08/Putty%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F)
- [FTPクライアントとは](https://tab-log.com/netshop-ftpclient)

##修正履歴
- Vagrantとはの参照リンク先を変更(2020.04.17)
- 内部リンク切れを修正(2020.04.18)
- Windowsローカルに開発環境を構築中に【vagrant up】でエラーが発生【エラー解決】内部リンクを追加(2020.04.20)
- Windowsローカルに開発環境を構築中に【Putty timed out】になった【エラー解決】を追加(2020.05.02)

[^1]: サーバーOSとは今自分が使用しているマシンとは別に仮想のマシンを構築したマシンのことを言います
[^2]: HTTP通信とは、Webクライアント（普段我々が使用しているクライアントPC:ホストOS）⇔Webサーバー（今回構築するサーバーOSのこと）間で通信するためのルールのようなものです。詳しくはこちらを参照:[HTTP通信の仕組み](https://kitsune.blog/web-communication-structure)