DockertoolboxのインストールからVue-cli設定まで

4723 ワード
Vue.js docker-for-windows Vue.js テキストリンク

1 この記事は

Windows10にDocker環境を構築するときの個人的メモです。具体的には、Raspberrypi環境をwindows上に構築したい。

2 Imageのpullからコンテナの作成まで

2-1 docker toolboxのインストール

Window10 homeでは、Docker for windowsはインストールできない。代わりにDocker toolboxをインストールする。
Docker toolboxのインストール手順

2-2 Imageを取得する

(1) まずは、Raspi上で構築したDocker環境のImageファイルを生成し、Docker Hubにアップロードします。やり方はこちら
(2) アップロードしたDocker ImageファイルをDocker Hubよりダウンロードします。やり方はこちら
(3) Raspberry Piで生成したImageファイルをWindows Docker上でも動作できるように必要なライブラリをインストールします。やり方はこちら
$ docker run --rm --privileged multiarch/qemu-user-static --reset -p yes

2-3 Host(Windows)とコンテナでフォルダを共有する。

(1) Oracle VM VirtualBoxマネージャーを立ち上げ、仮想マシンを電源OFFにします。

(2) Oracle VM VirtualBoxにて、設定→共有フォルダー→C:\Usersになっていることを確認します。

(3) Docker toolbox上でImageからコンテナを作成時に共有ディレクトリの設定も同時に行います。

ホストをファイル共有を行うコンテナを作る。複数ポートを空けたい時は、--publish 91:91 --publish 3000:3000とする。

[ホーム] /c/Users と[コンテナ内] /homeでファイルを共有する方法
構文
docker run -v [共有を行うホームのディレクトリ]:[共有を行うコンテナのディレクトリ] -it --public xx:yy [イメージ] bash

「-m 4g」はコンテナにメモリ4Gを割り当てる

例文
docker run -m 4g -v /c/Users:/home -it --publish 91:91 --publish 3000:3000 resin/rpi-raspbian:latest bash

3 Vue-Cli環境の構築

3-1 Vue-Cliのインストール

Raspberry Pi上でVue-Cli環境をインストールしていた場合でも、WindowDocker上ではすでにVueCli環境は用意できていますが、正しく動かないこともあるので再度インストールしたほうがいいです。

・こちらの記事に従いVue-Cli環境をインストールします。
→　12-vue-cliのインストール
→ 7-vue-cliでローカルサーバーを立ち上げ

Error: Cannot find module 'webpack'と表示される場合、下記を実施するとOK(グローバルインストールを行う)

Dockertoolbox
npm install -g webpack

3-2 サーバー立ち上げ確認

・Docker toolbox上でdocker-machine ipを入力し、コンテナが動作しているIPアドレスを入力する。解説はこちら

Dockertoolbox
$ docker-machine ip
xxx.xxx.xxx.xxx

・Docker toolbox上でコンテナを起動させ、Vue-Cli上にてnpm run devを実行しWebサーバーを起動させます。
・ブラウザを立ち上げ、http://xxx.xxx.xxx.xxx:yy (xxx.xxx.xxx.xxxはdocker-machine ipで調べたIPアドレス、yyはVue-Cli用にオープンしたport番号)と入力するとVue-Cliのフォーマットページが閲覧できます。