Win10+Vagrant+CentOS7でAngularの環境構築に躓いた…

４月から仕事でAngularに触れる機会があり、自宅PCでも環境構築してみようと思ったのですが…。

結論から言うとVagrant上のCentOS7でのAngular環境の構築は断念しました。

Vagrantとは

さっくり説明しておくと、インスタントな仮想環境です。

クリーンな環境で０から開発環境を構築したい、という場合などに便利です。

仮想環境の構成内容はVagrantFileというファイルで管理できるので、構築にあたって必要なパッケージのインストールシェルなども組み込んでおくと、かなり楽に環境構築出来ちゃいます。

色々な書式の知識が必要になる点では初回の学習ハードルが少しお高めですが。

Vagrantでの環境構築で躓いたコト

今回は仕事で使っているのと同じ、「cenos/7（1905.1）」というBoxを使用しました。

Boxの説明に関しては…Vagrantに乗せるOSと捉えておけば問題ないでしょう。

「centos/7」の利用にあたって

Vagrantのページから飛べますが、以下のページを参考にしておくといいでしょう。

ただし、後述しますが４番目の記載は私の環境では不要でした。

起動に時間がかかる

以下のサイトを参考にVagrantFileを変更しました。

SSH認証でタイムアウト

「vagrant up」時に「SSH Auth」というログが吐かれると思いますが、それがタイムアウトする問題。

タイムアウトしても仮想環境自体は立ち上がっていることがあったりもするのですが、基本的にSSH接続が出来なくなってしまうこともあり、開発環境としては未完の状態です。

この場合、「vagrant halt」で仮想環境を終了させると解決できることがあります。

なんでもVirtualBoxがその辺の情報をキャッシュしてしまっているのだとか。

「vagrant halt」⇒「vagrant up」でも起動しない場合は、VirtualBoxのコンソールを開いてタスクマネージャーからタスクキルも行ったりしてました。

Angular CLIのインストールに失敗

仮想環境が起動したら、以下の手順でAngularの環境を作っていきます。

文章にすればたったこれだけなのですが、Angular CLIのインストール（npm install -g @angular/cli）に躓きました…。

エラー内容としては「Unexpected token in json」みたいなやつ。

調べてみると「npm cache clean –force」とかで解消できるみたいなのですが、３０分くらいキャッシュクリーンとインストールを繰り返してみても解決せず…。

コチラですが、以下のサイトを参考にnpmのレジストリ変更でうまくいくことがありました。

しかしうまくいったとは言ってもログには警告が沢山…。

そのままAngularプロジェクトを作成してみても、ビルドが通らない。

パッケージが不足していることは分かったのですが、npmでもyarnでもインストール失敗…。

WindowsでのAngular環境構築

Vagrant上で１週間程度苦労したのですが、結局諦めてWindows環境で構築することに。

構築手順は省略。サクッと構築出来ました。

このWindowsで構築した環境（パッケージのバージョン情報）をVagrant上のCentOS7にも構築し、Windows環境で作成したプロジェクトをクローンしてみました。

が、これもビルド（パッケージインストール）失敗。

少し調べてみた感じだと、Vagrant上で大量のパッケージをインストールしようとすると無理といった記事も見つけました。

もしかするとVagrantに割り当てるメモリを確保すれば行けるのかもしれませんが、本体8GBしかないのでこれ以上は断念。

今更ですが、Node.jsとnpmのバージョンは以下の通りです。

ちょっとホストOSをCentOS7にしたPCで再度試してみたいところですね。ひとまずはWindowsでいじってみることにします。

Macが欲しくなってきました。

以上です。

スポンサーリンク