はじめに

タイトルにもある通り、リモートのVueプロジェクトをローカルの仮想環境で動かそうとした際に二転三転とエラーが重なって解決に時間がかかったので、解決方法及び内容理解のための内容です。

環境

ローカル
Vagrant 2.2.7
Virtualbox 6.1.6
Vue 2.6.11

仮想環境
centos 7.2

共有フォルダの設定

vagrantfile

  config.vm.synced_folder "..", "/home/vagrant/vue_project",
    create: true, owner: "vagrant", group: "vagrant"

内容

まずはgit cloneでリモートリポジトリからソースをクローン

git clone [リポジトリURL]

今回はソースコードの中にvagrantファイルを入れてあるので、vagrantfileのあるディレクトリまで移動。

cd vue_project/vagrant

仮想環境立ち上げて、ssh接続

vagrant up
vagrant ssh

共有フォルダに指定したプロジェクト直下に移動して、プロジェクト起動！

$ npm run serve
sh: vue-cli-service: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! vue_project@0.1.0 serve: `vue-cli-service serve`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the vue_project@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2020-06-09T14_01_46_634Z-debug.log

エラーが発生しましたが、このエラーはnpmの再ビルドを行っていなかったので起きたのが原因のようです。
なので再度jsモジュールを全部入れ直して、実行する。

$ rm -rf node_modules package-lock.json && npm install
npm ERR! code EPROTO
npm ERR! syscall symlink
npm ERR! path ../acorn/bin/acorn
npm ERR! dest /home/vagrant/vue_project/node_modules/@vue/cli-service/node_modules/.bin/acorn
npm ERR! errno -71
npm ERR! EPROTO: protocol error, symlink '../acorn/bin/acorn' -> '/home/vagrant/vue_project/node_modules/@vue/cli-service/node_modules/.bin/acorn'

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2020-06-09T14_07_28_990Z-debug.log

また、別のエラーが、、、
色々調べてみましたが、今回ここで解決せず詰まってしいました。

原因・解決策

原因は↓の記事に書いてある通り、
参考記事:https://qiita.com/tuttieee/items/ab9b198cd2aaccb446ff

VirtualBoxの共有フォルダではシンボリックリンクの作成が禁止されている事
また
シンボリックリンクの作成を回避しても，パスの長さがホストOS(Windows)の制限に引っかかってファイルを作成できない事
が原因のようです。

はじめはピンときていませんでしたが、とにかくそのまま仮想環境上でビルドできないよ、と言われているのであれば解決の手段は色々考えられました。

WindowsにVueプロジェクトクローン→vagrant up→ssh接続→npm再ビルド(npm install)→npm run serve
でエラーになるので

①WindowsにVueプロジェクトクローン→npm再ビルド(npm install)→vagrant up→ssh接続→npm run serve

の順で実行すれば、問題ありませんでした。

個人の環境に依存する方法が嫌であれば

②vagrant up→ssh接続→仮想環境にVueプロジェクトクローン→npm再ビルド(npm install)→npm run serve

みたいに仮想環境に直接クローンする事でもビルドと起動が成功します。

チームで行う場合は参考記事みたいに、パスの制限設定をいじったりする方法もありだと思いました。