1. 程式人生 > >window下使用Docker部署前端開發環境

window下使用Docker部署前端開發環境

背景

很早之前就關注過docker,看過有關的資料,但是那時候docker並不支援window,使用需要使用 docker toolbox 採用VirtualBox虛擬機器的方式來安裝,覺得很麻煩,就一直沒有嘗試。

最近無意中發現docker for window釋出了,可以在win10上使用,趁著最近不忙,倒騰一下。

docker安裝

docker for windowdocker toolbox 不同,docker for window 依賴與微軟的虛擬化技術Hyper V。所以我們首先要開啟win10的Hyper V:
通過控制面板的程式和功能 -> 啟用和關閉Windows功能檢視 Hyper V 狀態:

image

安裝完成以後執行 docker version 檢視安裝結果

$ docker version
Client:
 Version:           18.06.1-ce
 API version:       1.38
 Go version:        go1.10.3
 Git commit:        e68fc7a
 Built:             Tue Aug 21 17:21:34 2018
 OS/Arch:           windows/amd64
 Experimental:      false

Server:
 Engine:
  Version:          18.06.1-ce
  API version:      1.38 (minimum version 1.12)
  Go version:       go1.10.3
  Git commit:       e68fc7a
  Built:            Tue Aug 21 17:29:02 2018
  OS/Arch:          linux/amd64
  Experimental:     false

常用命令

記錄一些常用命令,其他的可以執行 docker --help 檢視

// 下載image
docker pull ubuntu 

//檢視已下載image
docker image ls 

// 刪除image
docker image rm <imageName>  

// 執行
docker run ubuntu --name ubuntu 
// 使用ubuntu image 建立一個container 並設定名字為 ubuntu
// 執行時會檢測系統中有沒有該image如果沒有會自動呼叫`docker pull unbutu`下載

// 檢視run引數
docker run --help

// 停止ubuntu
docker stop ubuntu  

// 進入容器
docker attach ubuntu

配置vue開發環境

1. 首先開啟 Docker Hub 查詢看有沒有可以用的image

![ebiven/vue-cli](//ohm2ny54m.qnssl.com/blog/20180928165947.jpg)

這裡我們採用 [ebiven/vue-cli](https://hub.docker.com/r/ebiven/vue-cli/)  

> 如果沒有滿足自己需求的image,也可以自己製作,這個下次再說

2. 下載 image

```
docker pull ebiven/vue-cli
```

3. 配置命令

眾所周知,window下的命令列工具不太好用,為了便於操作,我這裡使用 [cmder](http://cmder.net/) 作為命令列工具  

image說明檔案中的命令是linux下的命令,在window下執行會出錯:
```
$ docker run -it --rm -v "$PWD":"$PWD" -w "$PWD"  -u "$(id -u)" ebiven/vue-cli vue
docker: Error response from daemon: the working directory '$PWD' is invalid, it needs to be an absolute path.
See 'docker run --help'.
```

在window下需要使用 `%cd%` 輸出當前目錄,如下:
```
docker run -it --rm -v "%cd%":/code -w /code -p 8080:8080 ebiven/vue-cli vue
// -it: 進行互動式操作
// --rm:關閉該 container 後刪除檔案
// -v %cd%:/code: 將執行命令的目錄對映到container的/code目錄
// -w /code: 設定命令執行目錄為/code
// -p 8080:8080:將本機的8080埠對映為container的8080埠
```

測試一下:
```
$ docker run -it --rm -v "%cd%":/code -w /code ebiven/vue-cli vue --version
3.0.1
```
執行成功!

新建一個專案試試:
```
$ docker run -it --rm -v "%cd%":/code -w /code ebiven/vue-cli vue create test

Vue CLI v3.0.1
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn


Vue CLI v3.0.1
✨  Creating project in /code/test.
⚙  Installing CLI plugins. This might take a while...

yarn install v1.9.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[--------------------------------------------------------------------------------------------------------------------------] 0/1041(node:23) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 162.74s.