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

はじめに

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

基本的にVagrantでのVirtualBox起動は以下の記事を参考にしました。
【Linux環境構築】VagrantとVirtualBoxとは？使い方を初心者向けに解説！

Vue.jsの環境構築は以下の記事を参考にしました。
CentOs8に Vue.jsの環境を構築してHello Worldしてみる

生じた問題一覧

1.vagrant initできない
2. vagrant upできない
3. 共有フォルダで共有できない
4. ホストOSで作成したVue.jsのサイトにアクセスできない

1. vagrant_initできない

生じた問題

　vagrant initする際に

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に

%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\

を追加で解決。
初期設定のままだとパワーシェルのパスが通ってなかったみたいです。

参考:
vagrant up時にエラーが出た時の対処法（Windows10）Failed to locate the powershell…

2. vagrant_upできない

生じた問題

vagrant upで

`private_key_path` file must exist: 
c:/Users/user_name/.vagrant.d/insecure_private_key

という文が出てVMの起動ができない。

解決策

Vagrantfile内の

config.ssh.private_key_path = "C:/Users/user_name/.vagrant.d/insecure_private_key"

のパスが正しいか確認する。
　ユーザ名に空白文字や日本語が入っていると問題が生じる可能性があるとのことで、Cドライブ直下などに.vagrant.dディレクトリを移動した場合は特に注意。

The VM is running.

という文が出たら起動成功。vagrant sshでゲストOSに接続する。

3. 共有フォルダで共有できない

生じた問題

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

解決策

この問題は3つの問題が組み合わさっていた。（苦戦した。）

1. Vagrantfileの修正

　私の場合は参考記事のVagrantfileの内容をコピペして変更を加えていたので、共有フォルダの設定の文が抜けていた。
　私の場合は一度vagrant initし直し

Vagrantfile

config.vm.box = "centos/7"
config.vm.network "private_network", ip: "192.168.33.10"

のみ加えたのち

Vagrantfile

config.vm.synced_folder "./", "/vagrant", type: "virtualbox"

以上をVagrantfileに加える。しかしこの時点ではvagrant upをしても

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をインストールする。

vagrant plugin install vagrant-vbguest

vagrant-vbguestはホストOSとゲストOSのGuestAdditionsのバージョンを合わせるプラグインだそうです。
　バージョンの違いからrcyncにエラーが出ることがあるようです。
しかし、この時点でvagrant upをしても更新の過程でnothing to doのような文言とともにエラーが出てしまいました。

3. カーネルの更新

vagrant sshでゲストOSに接続後

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の途中で

default: Rsyncing folder: 'ホストOSのパス' => 'ゲストOSのパス'

の文が表示されたら共有フォルダの反映が成功している。

　1.でVagrantfileに

Vagrantfile

config.vm.synced_folder "./", "/vagrant", type: "virtualbox"

を追加した場合は、ホストOSのVagrantfileがあるディレクトリとゲストOSの/vagrantが共有されている。

ゲストOSの/vagrantはvagrant ssh後のディレクトリではなく
root直下のパスであることに注意

参考:
vagrant up 時の共有フォルダのマウントエラー解消方法
rsync error on Vagrant up with Centos 7
「vagrant vboxsf is not available」の対処法

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

の後、プロジェクトを作成し、

npm install
npm run dev

をして、

http://localhost:8080

に接続しようとしても接続が拒否される。

解決策

1. ポートの解放

vagrant ssh後にゲストOSでファイアウォールの設定をする。

systemctl status firewalld.service

でファイアウォールが起動しているか確認し、していなかったら

systemctl status firewalld.service

で起動する。その後

firewall-cmd --add-service=http --zone=public --permanent
firewall-cmd --add-port=8080/tcp --zone=public --permanent
firewall-cmd --reload

上記のコマンドで8080番ポートでtcp通信が許可されるようになる。

firewall-cmd --list-all

で以下のような表示が出るが、

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の接続先の変更

npm run dev

でサーバーを起動すると、通常

Your application is running here: http://localhost:8080

のように表示されるが、VM上のlocalhostとなっているためここにアクセスすることはできない。
　そのため、このlocalhostの部分の設定をいじる。
ゲストOSでVueプロジェクトディレクトリの./config/index.jsをviなどで編集する。

host: 'localhost', // can be overwritten by process.env.HOST

という部分を

host: '192.168.33.10', // can be overwritten by process.env.HOST

のように、Vagrantfileに書き込んだIPアドレスに置き換える。
この操作の後

npm run dev

でサーバーを起動すると、

Your application is running here: http://192.168.33.10:8080

となり、アクセスができるようになる。

参考:
centos7でwebサーバー構築1-基礎的なシステムの構築
CentOSにyumでNodeJS最新版をインストール(NodeSource)
CentOS 7 に Node.js をインストールする手順
CentOS7でfirewalld（ファイアウォール）の設定。firewall-cmd –list-allでports（ポート番号）の指定をお忘れなく！
localhost にアクセスできない【docker toolbox】

まとめ

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