Vagrant+VirtualBox+CentOS7でVue.jsの環境構築の際に遭遇した問題と解決策

# はじめに
 
 　Windows11環境において、私がVagrantを使用してVirtualBoxでCentOSのVMを起動してssh接続しVue.jsの環境構築をする過程で遭遇した問題とその解決策をまとめました。
　同じように困っている方の助けになれば幸いです。

基本的にVagrantでのVirtualBox起動は以下の記事を参考にしました。
[【Linux環境構築】VagrantとVirtualBoxとは？使い方を初心者向けに解説！](https://kitsune.blog/linux-environment)

Vue.jsの環境構築は以下の記事を参考にしました。
[CentOs8に Vue.jsの環境を構築してHello Worldしてみる](https://mebee.info/2019/10/31/post-3170/#google_vignette)

# 生じた問題一覧
 [**1.`vagrant init`できない**](#1-vagrant_initできない)
 [**2. `vagrant up`できない**](#2-vagrant_upできない)
 [**3. 共有フォルダで共有できない**](#3-共有フォルダで共有できない)
 [**4. ホストOSで作成したVue.jsのサイトにアクセスできない**](#4-ホストosで作成したvuejsのサイトにアクセスできない)

# 1. `vagrant_init`できない
## 生じた問題
　`vagrant init`する際に
```terminal
Vagrant failed to initialize at a very early stage: 
Failed to locate the powershell executable on the available PATH. 
Please ensure powershell is installed and available on the local PATH, 
then run the command again.
```
という文が出て、Vagrantfileが生成できない事象が発生しました。

## 解決策
ホストOSの`環境変数を編集`からPathに
```terminal
%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\
```
を追加で解決。
初期設定のままだとパワーシェルのパスが通ってなかったみたいです。


**参考:**
[vagrant up時にエラーが出た時の対処法（Windows10）Failed to locate the powershell…](https://alllearnhobby.com/archives/2353.html)

# 2. `vagrant_up`できない
## 生じた問題
`vagrant up`で
```terminal
`private_key_path` file must exist: 
c:/Users/user_name/.vagrant.d/insecure_private_key
```
という文が出てVMの起動ができない。
## 解決策
Vagrantfile内の
```terminal
config.ssh.private_key_path = "C:/Users/user_name/.vagrant.d/insecure_private_key"
```
のパスが正しいか確認する。
　ユーザ名に空白文字や日本語が入っていると問題が生じる可能性があるとのことで、Cドライブ直下などに`.vagrant.d`ディレクトリを移動した場合は特に注意。

```terminal
The VM is running.
```
という文が出たら起動成功。`vagrant ssh`でゲストOSに接続する。

 # 3. 共有フォルダで共有できない
 ## 生じた問題
 　`vagrant up`が成功し、`vagrant ssh`でゲストOSに接続した後、ホストOSの`./`とゲストOSの`./vagrant`が共有フォルダになっていない。

 ## 解決策
 この問題は3つの問題が組み合わさっていた。（苦戦した。）
 ### 1. `Vagrantfile`の修正
　私の場合は参考記事のVagrantfileの内容をコピペして変更を加えていたので、共有フォルダの設定の文が抜けていた。
　私の場合は一度`vagrant init`し直し
 ```ruby:Vagrantfile
config.vm.box = "centos/7"
config.vm.network "private_network", ip: "192.168.33.10"
 ```
 のみ加えたのち
 ```ruby:Vagrantfile
 config.vm.synced_folder "./", "/vagrant", type: "virtualbox"
 ```
 以上をVagrantfileに加える。しかしこの時点では`vagrant up`をしても
 ```terminal
rsync: connection unexpectedly closed (0 bytes received so far) [sender]
rsync error: error in rsync protocol data stream (code 12) at io.c(226) [sender=
3.1.1]
 ```
のようなエラーが発生しました。
 ### 2. プラグインの追加
　pluginの`vagrant-vbguest`をインストールする。
 ```terminal
 vagrant plugin install vagrant-vbguest
 ```
 `vagrant-vbguest`はホストOSとゲストOSの`GuestAdditions`のバージョンを合わせるプラグインだそうです。
 　バージョンの違いから`rcync`にエラーが出ることがあるようです。
 しかし、この時点で`vagrant up`をしても更新の過程で`nothing to do`のような文言とともにエラーが出てしまいました。
 

 ### 3. カーネルの更新
 `vagrant ssh`でゲストOSに接続後
 ```terminal
sudo yum -y update kernel
sudo yum -y install kernel-devel kernel-headers dkms gcc gcc-c++
 ```
 でkernel moduleを更新する。その後、もう一度`vagrant-vbguest`を
 インストールし直し、`exit`でホストOSに戻ってvagrantを再起動する。
（`vagrant halt`&`vagrant up`か`vagrant reload`）

`vagrant up`の途中で
```terminal
default: Rsyncing folder: 'ホストOSのパス' => 'ゲストOSのパス'
```
の文が表示されたら共有フォルダの反映が成功している。

　1.で`Vagrantfile`に
```ruby:Vagrantfile
config.vm.synced_folder "./", "/vagrant", type: "virtualbox"
```
 を追加した場合は、ホストOSの`Vagrantfile`があるディレクトリとゲストOSの`/vagrant`が共有されている。
 
:::note 
 ゲストOSの`/vagrant`は`vagrant ssh`後のディレクトリではなく
 `root`直下のパスであることに注意
:::

**参考:**
[vagrant up 時の共有フォルダのマウントエラー解消方法](https://qiita.com/tockey/items/33cf1230e032931f9adc#:~:text=This%20is%20usually%20because%20the%20filesystem%20%22vboxsf%22%20is,is%20usually%20caused%20by%20a%20faulty%20Vagrant%20box.)
[rsync error on Vagrant up with Centos 7](https://stackoverflow.com/questions/34416570/rsync-error-on-vagrant-up-with-centos-7)
[「vagrant vboxsf is not available」の対処法](https://pocketcode.net/vagrant-vboxsf)

# 4. ホストosで作成したvuejsのサイトにアクセスできない
## 生じた問題
Vue.jsの環境構築（NodeJSのインストール＋Vue.jsのインストール）
```
curl -sL https://rpm.nodesource.com/setup_11.x | bash -
sudo yum install nodejs -y
npm i -D @vue/cli
```
の後、プロジェクトを作成し、
```terminal
npm install
npm run dev
```
をして、
```haml
http://localhost:8080
```
に接続しようとしても接続が拒否される。

## 解決策
### 1. ポートの解放
`vagrant ssh`後にゲストOSでファイアウォールの設定をする。
```terminal
systemctl status firewalld.service
```
でファイアウォールが起動しているか確認し、していなかったら
```terminal
systemctl status firewalld.service
```
で起動する。その後

```terminal
firewall-cmd --add-service=http --zone=public --permanent
firewall-cmd --add-port=8080/tcp --zone=public --permanent
firewall-cmd --reload
```
上記のコマンドで8080番ポートでtcp通信が許可されるようになる。
```terminal
firewall-cmd --list-all
```
で以下のような表示が出るが、
```terminal
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: eth0 eth1
  sources:
  services: dhcpv6-client http ssh
  ports: 8080/tcp
  protocols:
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:
```
`services:`に`http`、`ports:`に`8080/tcp`があればOK。

### 2. Vue.jsの接続先の変更
```terminal
npm run dev
```
でサーバーを起動すると、通常
```terminal
Your application is running here: http://localhost:8080
```
のように表示されるが、VM上のlocalhostとなっているためここにアクセスすることはできない。
　そのため、この`localhost`の部分の設定をいじる。
 ゲストOSでVueプロジェクトディレクトリの`./config/index.js`を`vi`などで編集する。
```javascript
host: 'localhost', // can be overwritten by process.env.HOST
```
という部分を
```javascript
host: '192.168.33.10', // can be overwritten by process.env.HOST
```
のように、`Vagrantfile`に書き込んだIPアドレスに置き換える。
この操作の後
```terminal
npm run dev
```
でサーバーを起動すると、
```terminal
Your application is running here: http://192.168.33.10:8080
```
となり、アクセスができるようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620655/9c0f7232-d3c2-2e29-1009-560531b4152d.png)

**参考:**
[centos7でwebサーバー構築1-基礎的なシステムの構築](https://qiita.com/saru_cololado/items/b506208b93903741783d)
[CentOSにyumでNodeJS最新版をインストール(NodeSource)](https://qiita.com/kitahara_/items/f6530da1fc1aeefd39ff#:~:text=%E6%8E%A5%E7%B6%9A%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E5%A4%A7%E3%81%8D%E3%81%AA%E5%8E%9F%E5%9B%A0%E3%81%A8%E3%81%97%E3%81%A6%20%E2%91%A0%E3%82%B2%E3%82%B9%E3%83%88OS%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%82%A2%E3%82%A6%E3%82%A9%E3%83%BC%E3%83%AB%E3%81%8C80%E7%95%AA%E3%83%9D%E3%83%BC%E3%83%88%E3%81%8C%E9%96%8B%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B,%E2%91%A1%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AF%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%ABhttp%E9%80%9A%E4%BF%A1%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%20%E2%91%A2%E3%82%B2%E3%82%B9%E3%83%88OS%E3%81%AEIP%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%81%8C%E6%AD%A3%E3%81%97%E3%81%84%E3%81%8B)
[CentOS 7 に Node.js をインストールする手順](https://qiita.com/ousaan/items/881db6ce8cacb2614f5d)
[CentOS7でfirewalld（ファイアウォール）の設定。firewall-cmd –list-allでports（ポート番号）の指定をお忘れなく！](https://e-yota.com/webservice/post-2563/)
[localhost にアクセスできない【docker toolbox】](https://qiita.com/hidao/items/cf4a3ed0d2a753a405a4)

# まとめ
　Linuxの勉強がてらVMの環境構築をした際の試行錯誤の末の解決策の共有です。
 同様のエラーに苦しんでいる方へ解決策を提示できたなら幸いです。
 ご指摘アドバイス等ありましたらお願いいたします。