docker 應用系列（一）--- 一步步搭建虛擬機 docker 環境 附有 vue-cli + nginx 應用

時間  2019-12-09
標籤 docker 應用 系列 步步 搭建 虛擬機 環境 附有 vue cli nginx 欄目 Docker 简体版
原文   原文鏈接

f703738da977391281957edbf0198618377ae2dd.jpg

小劇場

測試：褲襠你這頁面刷新就白屏啊，怎麼了啊，並且你看這 network，怎麼這些 js 這麼大啊，很耗流量並且加載速度還很慢誒。html

我：嗯，大佬說的是，頁面刷新白屏是由於沒有服務器沒有配置找不到資源重定向，js 能夠用 CDN 或者啓動一下 gzip，這個讓後端或者運維小妹妹配一下就行了。前端

後端：啥，你說啥，我不會，話說，上次那個接口返回 null 的問題我還想找你，爲啥我返回 null 就不行，數據庫就是 null 啊，你前端作一下判斷不就行了！vue

docker

我：。。。幹，我本身來！node

前言

以上的小劇場你們當成個段子看看就行了，我相信大部分的前端後端都是挺和諧的，通常來講協力懟產品纔是程序員的第一要務（PM 別打我），關於劇場裏提到的是否要返回 null 的問題，建議你們之後直接反手一個連接給後端 一千個不用 null 的理由，深藏功與名。linux

17年畢業到如今算算也有一年多了，前端的工做愈來愈駕輕就熟，完成平常業務已經沒有大問題，前端方面對於一些比較前沿的工具也有了很多心得體會，前段時間手寫了一個 webpack 4.x 結合 vue-loader 的腳手架替換掉了公司項目裏比較老舊的腳手架，本身寫的插件也在項目裏面吭哧吭哧的跑的不亦樂乎，也能夠帶領公司新入職的前端學習更多的姿式了。webpack

可是，總感受還缺乏了什麼，之前寫過 PHP，對於接口如何實現的也沒有那麼好奇，無非就是鏈接數據庫寫寫 sql，再大不了就是建建視圖查詢，用用 redis 之類的，再深刻一點就是消息隊列 MQTT 結合 websocket 的應用了，那還缺乏了什麼，沒錯，就是服務器部署，關於這個，我很好奇！nginx

我很好奇

關於工做初期，個人想法是先要有技術廣度的瞭解，再要技術深度的瞭解。曾經也有過寫腳手架寫上癮的時候，連續一個星期回家寫代碼寫到兩三點（大城市的大佬就不要吐槽我了 =3=），各類跑測試，最後出了成果成功運行在線上項目的成就感我至今還記得，可是期間碰到了很多的問題，不少問題在其餘領域的人看來甚至都不是問題，只是由於本身知道的太少了，因此被本身限制住了。git

想象一下，若是本身可以掌握整個項目從零開始，從第一行代碼開始，到發佈上線的整個流程，無論是前端後端服務端，本身都可以瞭解到每一個細節，那和後端理論起來，底氣都要足很多，不是麼？=3=程序員

廢話太多，開始正題，本篇文章能夠幫助任何對 docker 有興趣的人有一個基礎的認識，最後會有一個簡單的基於 vue-cli 搭建的 nginx 服務器的實戰應用。github

環境安裝

題主的系統環境是 windows win7 64位 系統，因此須要個 linux 系統的虛擬機，而且出於裝逼的目的，將不使用桌面版的 linux 系統，全部的操做均在命令行完成。

安裝 virtualBox

virtualBox 是一個開源的虛擬機軟件，相比較 VMware 他更小，且開源免費，對於本篇文章想要實現的功能，已是很是足夠。

首先是安裝 virtualBox 虛擬機，屬於一直下一步到天亮的操做，但也附上安裝操做教程。

virtualBox 下載地址

virtualBox 安裝教程

安裝 ubuntu-server

ubuntu 是一款 Linux 系統，記住 Debian 這個單詞單詞能夠在某些時候起到提示做用。另外，就我越發深刻了解服務器端，發現公司搭建更多用的是 centos，不過沒事兒，說來講去都是 linux 系統，對於用戶而言就是文件目錄或者下載工具不太同樣而已。

下一步，下載 ubuntu-server 的鏡像文件，我用的是 18.04.1 LTS 版本的，過個幾年若是這文章還會被人翻出來的話，那時候還請下載本身喜歡的版本。

ubuntu-server 下載地址

ubuntu-server 安裝教程

配置

  • virtualBox
    • 新建
      • 這個基本上也是一直下一步到天亮的操做，值得一提的就是關於不能安裝 64位 系統的 ubuntu 的處理，有的電腦會發現新建的時候沒有 ubuntu 64位 的選項，能夠的話請參考這篇文章。
    • 設置
      • 存儲
        • 存儲設置
        • 如上圖，點擊那個位置將你下載的 ubuntu-server 鏡像載入便可。
      • 網絡
        • 網絡設置
        • 如上圖，使用橋接網卡選項，能夠設置該虛擬機網絡環境爲同一局域網下的另外一臺設備，方便咱們後續經過主機訪問虛擬機搭建的網絡。

系統裝填成功，開始系統內配置

在此，默認各位已經在虛擬機中安裝好了 ubuntu 系統，而且也成功進入了系統，在咱們開始瞭解 docker 以前，有必要對咱們所處環境的牆作一些處理，你知道的，這牆就是那牆。

ubuntu 默認安裝的下載、更新用的軟件是 apt，軟件安裝更新的時候都是從一個存放了大量軟件的地方下載的，至於從哪裏下載，默認的以下。

$ cat /etc/apt/sources.list
複製代碼

從新設置下載源，這裏還備份了一份以防不時之需。sed 指令是替換一個文件中的指定字符串爲另外一個字符串，注意中間的豎線分隔符號，前面是被替換的字符串，咱們將地址替換爲國內的源地址。

$ sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
$ sudo sed -i 's|deb.debian.org|mirrors.ustc.edu.cn|g' /etc/apt/sources.list
$ sudo sed -i 's|security.debian.org|mirrors.ustc.edu.cn/debian-security|g' /etc/apt/sources.list
複製代碼

更新一下 apt-get 的源的地址，這個操做咱們之後會常常作。

$ sudo apt-get update
複製代碼

安裝咱們後續須要的包，裏面包括了對 https 地址的解析所用的工具包等。

$ sudo apt-get install apt-transport-https ca-certificates software-properties-common curl
複製代碼

爲確保系統裏面沒有自帶的 docker 軟件的殘留，咱們要清除一下舊版本的 docker，雖然新系統通常都不會有就是了。

$ sudo apt-get remove docker docker-engine docker.io
複製代碼

添加 docker 的 GPG 密鑰，並添加 docker-ce 的軟件源，這告訴了 apt 去哪裏下載 docker-ce。

$ curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
複製代碼

更新軟件包緩存。

$ sudo apt-get update
複製代碼

下載 docker。

$ sudo apt-get install docker-ce
複製代碼

設置開機的時候啓動 docker，並啓動 docker。

$ sudo systemctl enable docker
$ sudo systemctl start docker
複製代碼

添加當前用戶到 docker 的用戶組，之後能夠不用輸入 sudo 直接使用 docker。

$ sudo groupadd docker
$ sudo usermod -aG docker $USER
複製代碼

更改 docker-ce 內部使用的下載鏡像的地址源，對於 ubuntu 16.04 + 的系統，咱們只要在 /etc/docker/daemon.json 更改便可，注意，你可能須要 root 的權限才能夠對該文件作更改。

# 使用 root 權限
$ sudo -i
$ vim /etc/docker/daemon.json
# 修改 daemon.json 爲以下
{"registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"]}
# 重啓 docker 服務
$ sudo systemctl restart docker
# 記得退出當前的 root 環境
$ exit or ctrl + d
複製代碼

至此，對於前期環境的配置已經完成的差很少了，咱們已經替換了 apt-get 下載新的軟件的源地址爲國內地址，也替換了 docker-ce 下載新的鏡像時候使用的源地址爲國內地址，如今讓咱們來測一發 docker。

docker run 爲運行一個鏡像文件，若是本地沒有找到該鏡像，會去鏡像地址地址下載拉取。若是提示 permission 之類的錯誤，但你已經作了添加當前用戶到 docker 用戶組的操做，重啓一下虛擬機便可，這是權限不夠的意思。

$ docker run hello-world
複製代碼

由於咱們後期會用到 git 到個人 github 上拉取 vue-cli-base 的代碼，因此這裏能夠提早安裝一個 git。

$ sudo apt-get install git
# 配置用戶名和伊妹兒
$ git config –global user.name "你的用戶名"
$ git config –global user.email "你的伊妹兒"
複製代碼

而後既然是用了 vue-cli 那 nodeJs 天然是不能少的，由於咱們會用 webpack 進行打包，那就順便安裝個 nodeJs，我這裏選擇的 nodeJs 官方長期支持的版本 8.x，須要安裝 10.x 版本的把 setup_8.x 改成 setup_10.x 便可。

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs
複製代碼

下載了 nodeJs 那天然是須要對 nodeJs 切換一下國內的源。

$ npm config set registry https://registry.npm.taobao.org
複製代碼

至此，前期準備已經告一段落，接下來就是開始實戰部分。

docker 實戰

docker 是個啥，我就近期在 linux 系統中使用以後的使用感覺來簡單介紹一下。 首先來幾個英文單詞的解釋。

  • image
    • 鏡像
    • 能夠理解成操做系統的鏡像，但又不是全部的鏡像都是操做系統。
  • container
    • 容器
    • docker 跑起來的時候會新建一個容器，該容器裏面會運行鏡像。
  • registry
    • 鏡像源；倉庫
      • 能夠理解成 docker 須要拉取鏡像的時候所訪問的地方。

有一些比較特殊的概念，能夠看着留個印象，docker 裏面的鏡像是分層的，打個比方，一個操做系統的鏡像，裏面可能分別安裝了 git node，而後加上系統的基礎鏡像，一共三層，咱們稱他爲 A鏡像，若是這時候還有個 B鏡像，他裏面有 git node docker，而後加上系統的基礎鏡像，那 git node 層 AB鏡像 就能夠共用。

docker nginx 基礎操做

相信做爲前端，「nginx 作個反代理就行了」，這種話應該看到很多過，實戰咱們就直接用 nginx 作個主要例子，期間會對對經常使用的一些 docker 語法作解釋。

首先，咱們先拉取 nginx 的鏡像文件。

$ docker pull nginx
複製代碼

新建一個用於測試 docker 的文件夾，方便管理。

$ mkdir /home/$USER/docker-demo
$ cd /home/$USER/docker-demo
$ mkdir html
複製代碼

新建一個用於 nginx 的默認展現頁，咱們的第一步就是要讓這個代碼跑在頁面上。

$ cd html
$ echo "<html><h1>Hello World</h1></html>" > index.html
$ cd ..
複製代碼

將 docker 跑起來吧，固然在跑起來以前，仍是須要解釋一下參數。

  • docker run
    • 這將新建一個容器，並在裏面跑一個鏡像。
  • -d
    • 將該容器運行在後臺，咱們使用 nginx 那確定是須要持續跑在後臺的，又叫守護進程。
  • -p
    • 將容器對外曝露的端口映射到宿主機的端口（也就是咱們上面花了半天功夫裝的虛擬機）。
    • 說白了就是訪問宿主機的 8888 端口就好像訪問容器的 80 端口同樣。
  • --name
    • 給咱們新建的容器起一個名字。
  • -v
    • 這是 docker 裏面比較特殊的東西，volume，能夠這麼理解，冒號前面的爲宿主機的路徑，後面爲容器內的路徑，這個參數能夠將宿主機路徑下的東西同步到容器內，由於 /usr/share/nginx/html 這個目錄就是 nginx 中默認的對外展現的目錄，因此咱們將剛纔新建的 html 文件夾同步到默認目錄裏面，咱們就能夠訪問該頁面了。
  • nginx
    • 這裏是指向咱們新建容器所須要用到的鏡像文件，若是你上面沒有作 docker pull 的操做，docker 也會自動到倉庫去拉取過來。
$ docker run -d -p 8888:80 --name my-first-nginx -v $PWD/html:/usr/share/nginx/html nginx
複製代碼

ok，不出意外會輸出一串字符串，這個就表明了你新建容器的 id，咱們新建的全部的容器都會有一個用做標識的 id，不過咱們不須要記住它，之後能夠用 docker ps 來查詢。

查看一下咱們新建的容器是否有在好好工做。

$ docker ps
複製代碼

若見到相似以下，那表明咱們的容器有在好好工做，驗證一下吧。

docker ps

在命令行中看看效果。

$ curl localhost:8888
複製代碼

看到以下，那就成功了。

curl

命令行看着不過癮，咱們到真機上看看效果，不過在這以前，咱們須要知道咱們宿主機的 ip 地址，在上面的步驟中咱們已經將網絡改爲了橋接網卡，因此如今咱們的虛擬機用是和主機存在同一個局域網下的另外一個 ip。

查看網絡接口上分配的 ip 地址，再加個篩選 IPv4 的參數。

$ ip -4 a
複製代碼

找到以下，192.168 開頭的，這就是虛擬機的 ip 地址了。

ip -4 a

接着，咱們只須要打開主機，訪問 192.168.0.200:8888 不要忘記帶上端口號便可。

主機訪問

nginx 實際應用

上面那些都是基操，接下來咱們來點不同的，咱們會找一個基於 vue-cli 的 webpack 腳手架，而後依舊是跑在 nginx 容器裏面的應用，會有 shell 腳本的書寫，方便運維朋友們進行項目一鍵更新發布。這更加適用於平常咱們的項目發佈流程。

在準備階段咱們安裝了 nodeJs，我也準備了一個基礎的 vue-cli 項目，用於打包生產項目。

在開始以前，咱們要先中止剛纔咱們跑的容器。

# 這是中止容器的指令
# 由於 nginx 是運行在後臺的，因此要先中止他才能夠移除
# 還記得上面生成的容器惟一 id 麼，這裏只須要輸入前幾位便可中止該容器
$ docker stop 5af87
複製代碼

固然，光光中止還不夠，出於潔癖的心理，還要把容器移除，減小佔用空間。

$ bash rm 5af87
複製代碼

接下來建立一個新的文件夾，用於演示接下來的項目。

$ mkdir /home/$USER/docker-demo-two
$ cd /home/$USER/docker-demo-two
複製代碼

複製 github 上的項目到該文件夾，這是基於最新版的 vue-cli 生成的例子，固然官方尚未用上 webpack 4.x，不過問題不大，演示足矣。

$ git clone https://github.com/jsjzh/vue-cli-base.git
複製代碼

進入 vue-cli-base 以後就是前端基操了，使用 npm 包管理工具安裝項目依賴包，因爲咱們這裏是要獲得生產環境的代碼，因此直接執行 npm run build 將項目進行打包。

$ cd vue-cli-base
$ npm install
$ npm run build
複製代碼

項目打包好以後查看一下是否有相關的文件生成。

$ cd dist
$ ls
複製代碼

看到以下目錄就沒問題了。

webpack 打包生成 dist

完成以後進入到開始新建的目錄，進行容器的 volume 掛載操做。

$ cd /home/$USER/docker-demo-two
$ docker run -d -p 8889:80 -v $PWD/vue-cli-base/dist:/usr/share/nginx/html nginx
複製代碼

仍是老樣子，命令行會輸出該容器的 id，但咱們仍是須要查看一下 nginx 有沒有好好的運行在後臺。

$ docker ps
複製代碼

查看到容器以後，在主機打開 192.168.0.200:8889 便可看到熟悉的 vue-cli 的界面了。

可是這還沒完，總不能讓運維小妹妹每次都跑一遍 npm 吧，做爲貼心的開發哥哥，天然是要準備腳本供小妹妹使用，新建一個 shell 腳本，並保存內容以下。

提示：vim 編輯器編輯的操做是按 i，編輯完成以後 Esc ---> :x 便可。

$ cd /home/$USER/docker-demo-two
$ vim update-project.sh

# 腳本內容
cd vue-base-cli
git pull
npm install
npm run build
複製代碼

保存好以後，之後項目須要更新的時候，只須要跑一跑腳本就能夠完成。

$ cd /home/$USER/docker-demo-two
$ /bin/bash update-project.sh
複製代碼

爲看到效果，咱們直接試着更改一下項目內容。

$ cd vue-cli-base/src
$ vim main.js

# 加入如下內容
console.log("file is change!");
複製代碼

退回到上層，執行咱們的腳本。

$ /bin/bash update-project.sh
複製代碼

等運行完以後，在主機打開 192.168.0.200:8889，按 F12 打開控制檯，就看到了咱們輸入的內容，至此，項目更新已成功。

主機訪問

不過既然說 docker 跑的都是容器，那天然是能夠進到容器裏面去一探究竟的，咱們進入 nginx 的容器裏面看看。

  • docker exec
    • 在運行中的容器中執行命令。
  • -it
    • 保持終端打開狀態。
  • /bin/bash
    • 這裏就是須要被執行的命令，這個命令是提供一個 bash 環境。
$ docker exec -it 26e52b8c6ffd9 /bin/bash
複製代碼

若是你在命令行看到 root@26e52b8c6ffd9:~# 就表明你進入了這個容器，咱們再去看看 /usr/share/nginx/html 文件夾下有沒有 dist 中的文件。

$ cd /usr/share/nginx/html
$ ls
複製代碼

這裏能夠看到 index.html 文件和 static 文件夾，咱們再去看看剛纔的 file is change 在哪裏。

$ cd static/js
# 注意 這裏的名字是都不同的，你能夠先敲個 app 再按 tab 鍵，會進行自動補全
$ cat app.86602636cb9e13f553fb.js
複製代碼

在底部的小角落咱們看到了剛纔輸入的代碼。

static 中的 app.js

別忘了從容器裏面退出來，依然是 $ exit 或者 ctrl + d 退出容器。

docker 一些便捷的指令

# 批量刪除容器
$ docker rm `docker ps -a -q`

# 批量刪除鏡像
$ docker rmi `docker images -q`

#卸載 docker
$ sudo apt-get purge docker-ce
$ sudo rm -rf /var/lib/docker
複製代碼

後語

至此，docker 簡單的應用已經結束了，後續還會有關於 docker 的應用教程，想想，若是咱們能夠把 static 目錄下的文件都傳到雲空間，利用 CDN 加速，或者再配置一下 nginx 的 gzip 壓縮，再來一下反代理，而後瞭解一下容器新建數據庫，跑一個 nodeJs 的接口服務，再用 docker-compose 把前端後端數據庫鏈接起來，實現環境的一鍵部署，那不是本身一我的就是一個軍隊？

想一想還有點小興奮，不過飯要一口口吃，代碼天然也是要一行行敲，在日益稀疏的頭髮中找到代碼的真諦，不求聞達於諸侯，只求一方天地寧靜。

代碼如人生，我甘之如飴。

我在這裏 gayhub@jsjzh 歡迎你們來找我玩兒。

大綱

  • 環境配置（DONE）
    • virtualBox 下載安裝
    • ubuntu-server 下載安裝
    • 虛擬機相關配置
  • 系統裝填成功，開始系統內配置（DONE）
    • 配置 apt-get 下載源
    • 配置 docker 鏡像源
    • 下載 git 和 nodeJs
  • docker 實戰（DONE）
    • 簡單的 nginx 應用
    • 結合 vue-cli 的 nginx 應用
  • TODO（TODO）[分篇]
    • Dockerfile
    • docker-compose
    • nginx
    • 上傳 app.js 等至雲空間
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程