VagrantとVSCodeでプロジェクト毎に仮想マシンを使い分けて開発する

プライベート、インターン先の企業、プロジェクト毎に別の仮想マシンを使い分ける方法について解説しますが、自分自身Vagrant初心者なので間違っている事があるかもしれません。

# 必要なものをインストールする
はじめに、必要なソフトをインストールします。

### [VS Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

### [VirtualBox](https://www.virtualbox.org)

### [Vagrant](https://www.vagrantup.com/downloads)


## 拡張機能の追加
VS Codeのインストール後に追加してください。
### [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)

# 仮想マシンの作成

```
$ mkdir Vagrant
```
などでフォルダを作成しておきます。


作成したフォルダに移動して

```
$ cd Vagrant
```

プロジェクトのフォルダを作成します。

```
$ mkdir Project-qiita
```

作成したらそのフォルダに移動します。

```
$ cd Project-qiita
```

Vagrantファイルの作成

```
$ vagrant init
```

# Vagrantfile の編集

VS Code を開く

```
$ code .
```

VS Codeが起動したら``Vagrantfile``を選択します。

## OSの選択

[Vagrant Boxes](https://app.vagrantup.com/boxes/search)でインストールしたいOSを探します。ここでは``bento/ubuntu-20.04``にします。

決まったら``VSCode``に戻って、15行目を

```
config.vm.box = "bento/ubuntu-20.04"
```

のように書き換えます。

## その他の設定
``config.vm.box = "bento/ubuntu-20.04"``の下に

```
  config.vm.box = "bento/ubuntu-20.04"

  config.vm.hostname = "project-qiita"
  config.vm.network "private_network", ip: "192.168.33.12"
  config.vm.provider "virtualbox" do |vb|
  
    config.vm.hostname = "project-qiita"

   vb.memory = "6000"
 end
```

- ``config.vm.network "private_network" ip:"192.168.33.12``は一代目の仮想マシンなら``192.168.33.10``二代目なら``192.168.33.11``のようにします
- ``vb.memory`` で使用するメモリ量を指定します。

## sshの設定
その他の設定の下に

```
  config.vm.network "forwarded_port", guest: 22, host: 2222, host_ip: "127.0.0.2"
```
を設定します。ココのipも同じように一代目なら``127.0.0.1``二代目なら``127.0.0.2``のようにします。

設定できたら上書き保存します。

# 起動する
コンソールに戻って

```
$ vagrant up
```
で起動します。

# VSCodeから接続する

VS Codeの

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/38a1026c-476c-27ea-f54b-3f9d657fdf81.png)
アイコンをクリックして

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/f1b06deb-923b-d260-66b1-e2069dfb4802.png)

ここから``SSH Targets``を選択します。

SSH Targetsが選択できたら

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/44dd75ef-14ba-8ed1-a8ab-f854d4c6cbc6.png)

``+``ボタンをクリックして


```
ssh vagrant@127.0.0.1 -p 2222
```
のように入力します。
<span style="color:red;">@の後ろは``Vagrantfile``で設定したipを設定します。</span>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/5395c7ff-6099-1ac2-11f1-c47de6af8934.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/10d5e82e-1fda-db1e-7305-2d2d0fbf4f12.png)

設定から

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/5395c7ff-6099-1ac2-11f1-c47de6af8934.png)

をクリックして

``Host``を分かりやすい名前に変更します。

```
Host Project-qiita
  HostName 127.0.0.4
  User vagrant
  Port 2222
```

一度コンソールに戻り

```
$ vagrant ssh-config
```
を実行し、

```
IdentityFile C:******
```
の行をコピーし、
VSCodeに貼り付けます。

```
Host Project-qiita
  HostName 127.0.0.4
  User vagrant
  Port 2222
  IdentityFile C:/Users/****/vagrant/Project-qiita/.vagrant/machines/default/virtualbox/private_key
```
のようになったら、保存して

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/f3afb8a1-4108-c69b-4027-24d98e48a4a1.png)
をクリックします。

# 二回目以降の起動

二回目以降は作成したプロジェクトのディレクトリに移動して``vagrat up``したら、VSCodeで同じくファイルアイコンをクリックします。

# localhostへのアクセス
ホストのブラウザからゲストのwebページなどを確認するには、``VSCode``上で``Ctrl + @``を入力し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/0cd8477e-27e7-9b94-77c6-95b6493fba49.png)
``ポート``をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/363ce246-b2bd-d737-b0fd-58d3c800effe.png)

ポートの追加からゲストOS側のポートを入力します。するとホストOS側のブラウザ等から

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/5c83a5b1-9d60-5467-adde-ba11c0271408.png)

``ローカルアドレス``列にあるURLでアクセスできるようになります。