[angular]Windows上でVagrant+VirtualBox+共有フォルダで動かす方法

2021-08-13T09:54:00+09:00 2021-08-14T07:44:56Z

AngularをWindows上でVirtualBoxの共有フォルダで実行すると動作できない件の対処方法について記載します。

この記事の実行環境は以下です。
・Windows10 (10.0.19043.1052)
・VirtualBox 6.1.26
・vagrant 2.2.18
・node.js 14.17.5
・Angular CLI 12.2.1
・yarn 1.22.11
・ubuntu 20.04 (仮想環境のOS)

Windows上でVirtualBoxの共有フォルダにAngularのプロジェクトを作成しようとすると以下のエラーが発生し、作成に失敗します。

npm ERR! code EIO
npm ERR! syscall symlink
npm ERR! path ../uuid/dist/bin/uuid
npm ERR! dest /vagrant/my-app/node_modules/@angular/cli/node_modules/.bin/u
npm ERR! errno -5
npm ERR! EIO: i/o error, symlink '../uuid/dist/bin/uuid' -> '/vagrant/my-ape_modules/@angular/cli/node_modules/.bin/uuid'

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2021-08-13T02_17_56_657Z-debug.log

この原因は、以下の2点になります。

1.VirtualBox標準の共有フォルダは使用できるファイル名が短い
2.共有フォルダではシンボリックリックを作れない

それぞれの対策は以下となります。

1.nfsを使う
2.npmの代わりyarnを使う

この記事では、上記を考慮したVagrantでのAngular開発環境の構築方法を記載します。

Windows用のnfsプラグインをインストールする

コマンドプロンプトで以下を実行します。

vagrant plugin install vagrant-winnfsd

vagrant-winnfsdは、オープンソースのプラグインです。

Vagrantファイルの作成

任意のフォルダで以下を実行します。

vagrant init

作成されたvagrantファイルに以下を追記します。

#共有フォルダの場所を指定。typeをnfsにする。
config.vm.synced_folder "./", "/vagrant", type: "nfs"

node.jsをインストールする

aptを使って最新のnode.jsをインストールできないので以下を実行します。

sudo apt-get update
sudo apt install -y nodejs npm
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm

angularをインストールする

sudo npm install -g @angular/cli

yarnをインストールし設定する

#yarnをインストールする
sudo npm install -g yarn
     
#パッケージマネージャをyarnに変更する
ng config -g cli.packageManager yarn

#angularでyarnを使うようにする
yarn global add @angular/cli

#シンボリックリンクを作らないようにする
yarn config set link-duplicates true --global
yarn config set no-bin-links true --global
yarn config set bin-links false --globa

angularのプロジェクトを作成する

共通フォルダに移動し、以下のコマンドでプロジェクトを作成します。

ng new my-app

以下のエラーが出た場合は、

error An unexpected error occurred: "EIO: i/o error, symlink '../../../build-optimizer/ld-optimizer/cli.js' -> '/vagrant/my-app/node_modules/@angular-devkit/build-angular/nodes/.bin/build-optimizer'".

プロジェクトフォルダに移動し以下を実行します。

 yarn install --no-bin-links

ファイルのコピーに失敗したなどがあった場合は適宜コピーしてください。

Vagrantファイルをすべて書くと以下になります。
githubにも同じファイルを置いておきます。

# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

  # Every Vagrant development environment requires a box. You can search for
  # boxes at https://vagrantcloud.com/search.
  config.vm.box = "ubuntu/focal64"

  # Disable automatic box update checking. If you disable this, then
  # boxes will only be checked for updates when the user runs
  # `vagrant box outdated`. This is not recommended.
  # config.vm.box_check_update = false

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # NOTE: This will enable public access to the opened port
  # config.vm.network "forwarded_port", guest: 80, host: 8080

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine and only allow access
  # via 127.0.0.1 to disable public access
  # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  config.vm.network "private_network", ip: "192.168.56.10"

  # Create a public network, which generally matched to bridged network.
  # Bridged networks make the machine appear as another physical device on
  # your network.
  # config.vm.network "public_network"

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  #config.vm.synced_folder "./", "/vagrant"
  config.vm.synced_folder "./", "/vagrant", type: "nfs"

  # Provider-specific configuration so you can fine-tune various
  # backing providers for Vagrant. These expose provider-specific options.
  # Example for VirtualBox:
  #
  config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
     vb.memory = "2048"
  end
  #
  # View the documentation for the provider you are using for more
  # information on available options.

  # Enable provisioning with a shell script. Additional provisioners such as
  # Ansible, Chef, Docker, Puppet and Salt are also available. Please see the
  # documentation for more information about their specific syntax and use.
  config.vm.provision "shell", inline: <<-SHELL
     sudo apt-get update
     sudo apt-get install -y unzip curl
     
     #install nodejs
     sudo apt install -y nodejs npm
     sudo npm install n -g
     sudo n stable
     sudo apt purge -y nodejs npm
     
     #angularをインストールする
     sudo npm install -g @angular/cli

     #yarnをインストールする
     sudo npm install -g yarn
     
  SHELL
  
  config.vm.provision :vagrant_user, type: "shell", inline: "echo $(whoami)", privileged: false, inline: <<-SHELL
     #パッケージマネージャをyarnに変更する
     ng config -g cli.packageManager yarn

     #シンボリックリンクを作らないようにする
     yarn config set link-duplicates true --global
     yarn config set no-bin-links true --globa  
     yarn config set bin-links false --globa  
  SHELL
end

追記

この環境でreactも動作しますが、実行時に以下のエラーがでます。

vagrant@ubuntu-focal:/vagrant/hello2$ yarn start
yarn run v1.22.11
$ react-scripts start
/bin/sh: 1: react-scripts: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

react-scriptsを以下のようにして直接起動すれば動作します。

node ./node_modules/react-scripts/bin/react-scripts.js start

[angular]Windows上でVagrant+VirtualBox+共有フォルダで動かす方法

0 件のコメント :

コメントを投稿

自己紹介

人気記事

ラベル