Docker部署前端vue+node（入門篇）

ps: 鄙人第一次在掘金寫文，還望各大佬口下留情（請忽略排版）。

自我介紹：本人，男，92年，蘇州，已婚（哈哈哈），前端入行3年多。好，收~

沒錯，我是切圖仔，平時愛倒騰倒騰而已。docker先後倒騰了我10天，頭髮掉了無數，諮詢了一些大佬，過程較艱辛，故決定分享下這篇文章，技術較接近運維（修電腦的）的平常。但誰讓咱們前端處在最底層呢，除了切圖就沒其餘事了，搞它！

前言

大多數公司項目部署可能讓前端動手的不多，如今不少都是走jenkins自動化部署了。以致於前端也就成爲了別人眼中的切圖仔。本文將帶你打通任督二脈，遨遊在docker部署的世界裏。（啊呸，醒醒，測試喊你回去改bugssssss）。

簡單說下技術，前端vue打包的dist直接扔到服務器(此文應用nginx)裏，後端node（此文應用了express）造好接口而且開啓服務，nginx配置下接口轉發便可。固然也要啓一個mysql數據庫（我還特地看了一天的mysql，無奈）。簡單實現前端輸入內容，調接口，存數據庫這麼一個流程。因爲本人較窮，買不起服務器，故用了vmvare+ubuntu耍耍（請自行安裝

vmvare：www.vmware.com/cn/products…

18.04LTS desktop ubuntu：ubuntu.com/#download

）。

總體技術：docker、vue、express+sequelize、mysql

環境介紹

Docker 是一個開源的應用容器引擎,可讓開發者打包他們的應用以及依賴包到一個輕量級、可移植的容器中，而後發佈到任何流行的 Linux 機器上，也能夠實現虛擬化。容器是徹底使用沙箱機制，相互之間不會有任何接口。（簡單點，就好比你去一個商場，商場裏有不少專賣店，小吃店，化妝品店，這些店就比如容器，你根據本身的需求去哪一個店就好，並且這些店本質上互不干擾對方作生意）

vue我就不介紹了，這玩意都寫的我想吐了。

node呢，如今是不少中高級前端常備的一個技能了，畢竟沒那麼多精力學java和世界上最好的語言php了。簡單的說就是運行在服務端的 JavaScript，基於V8引擎，速度很是快，性能很是好。前端通常用的比較多的是它的服務端框架express/koa。vue-cli我記得就是用了express啓的服務。

Docker

首先確定在ubuntu裏安裝docker（自行度娘官網）

鏡像

鏡像倉庫官網：hub.docker.com/

鏡像是 Docker 運行容器的前提，倉庫是存放鏡像的場所，可見鏡像更是Docker的核心。簡單理解Docker 鏡像能夠看做是一個特殊的文件系統，提供容器運行時所需的程序、庫、資源、配置等文件（運行環境）。

方便理解咱們來搞下mysql。

docker search mysql ：在倉庫裏搜下mysql鏡像

此時看到mysql版本爲官方，大可安心下載，而後docker pull mysql:latest來拉取最新版本鏡像。固然我這邊下載的是5.6版本。docker pull mysql:5.6成功後，docker images來查看全部已裝鏡像，便可看到mysql:5.6鏡像已安裝ok

容器

容器是基於鏡像運行的一個軟件單元。它將代碼及其全部依賴關係打包，以便應用程序從一個計算環境可靠快速地運行到另外一個計算環境。是一個輕量的獨立的可執行的軟件包。容器將軟件與其環境隔離開來，並確保它能夠統一運行。一臺機器上可運行多個容器。

以mysql鏡像運行一個容器：

docker run -itd --name mysql-1  -p 3307:3306  -e MYSQL_ROOT_PASSWORD=123456 mysql:5.6：以5.6版本的mysql運行一個名爲mysql-1內部端口3306映射到主機3307且密碼爲123456的容器

-it：通常同時出現 i：交互式操做 t：終端 

--name：命名容器名

-p：容器內部端口映射到主機端口

docker ps -a：查詢全部狀態的容器（包括中止）

docker ps：查詢處於運行狀態的容器

此時咱們能夠用mysql客戶端鏈接看下：

固然先得看下你linux的ip：能夠看到此時ip爲10.0.0.178（vm網絡鏈接方式採用了橋接）。

此時mysql客戶端配置鏈接測試：

ok，說明你已經離成功不遠了

Vue

也就是咱們的前端啦，頁面很簡單，就造了一個接口。

項目github地址：github.com/qianduanwuz…

而後打包一下npm run build生成dist。前面說到前端資源要放到服務器nginx裏。

因此咱們這繼續開搞：

docker search nginx 倉庫裏爲官方最新版本

docker pull nginx:latest 安裝

docker images看下nginx鏡像是否安裝成功

而後咱們運行下nginx容器看下瀏覽器是否能正常訪問nginx服務：

docker run --name nginx-test -p 8080:80 -d nginx複製代碼

運行完後看10.0.0.178:8080能訪問說明ok

此時咱們能夠進入這個容器來看一些配置及操做

docker exec -it 容器id bash：進入容器（推薦exec，容器退出，不會致使容器的中止）

docker ps查看下容器nginx-test

docker exec -it 9900fc8bb5c9 bash 進入容器複製代碼

此時咱們可看見nginx的配置/usr/share/nginx/html/index.html，那咱們把前端dist直接放進就ok，但此時咱們來用Dockerfile來定製下鏡像。

什麼是 Dockerfile？

Dockerfile 是一個用來構建鏡像的文本文件，文本內容包含了一條條構建鏡像所需的指令和說明。

此時能夠在vmvare建立Dockerfile文件夾，而且touch一個Dockerfile。命令以下：

而後在/Dockerfile/建立web文件夾，在/Dockerfile/web/建立front文件夾，而後把前端dist拖到/Dockerfile/web/front/。可參照下面看是否文件目錄正確

好，咱們來開搞Dockerfile，切到/Dockerfile/目錄下 vim Dockerfile編輯

FROM：定製的鏡像都是基於 FROM 的鏡像，這裏的 nginx 就是定製須要的基礎鏡像。後續的操做都是基於 nginx。

COPY：複製指令，從上下文目錄中複製文件或者目錄到容器裏指定路徑。

前面咱們看過nginx容器裏靜態文件的目錄爲/usr/share/nginx/html/，因此故dist複製到此便可。

開始構建鏡像

 docker build -t web-front:latest . //必定注意末尾加上 .

構建完後docker images可看到web-front:latest鏡像

運行容器

docker run -itd --name web-front-1 -p 2222:80 web-front:latest bash

docker ps 查看容器web-front-1

進入容器

docker exec -it f6d33f03653f bash

/usr/sbin/nginx開啓nginx服務

訪問10.0.0.178:2222

ok，闊以訪問前端服務了，你基本接近成功了。

Node

準備造接口啦。express+sequelize（orm）

項目github地址：github.com/qianduanwuz…

貼部分核心代碼

鏈接數據庫：

建模：

接口：

server.js:

後面node容器node server.js便可啓動服務

部署node準備工做

在/Dockerfile/web/下建立node文件夾，而後把node項目文件放到/Dockerfile/web/node/裏，固然也須要/Dockerfile/web/node/建立個Dockerfile來作node的定製鏡像（暫不使用docker compose）。

編輯Dockerfile

開始構建鏡像

docker build -t web-node:beta . //必定注意末尾加上 .

beta其實就是web-node的tag

運行容器

docker run -itd --name web-node-beta -p 5555:3000 web-node:beta bash

docker ps 查看容器web-node-beta

此時可用postman來跑下接口

ps：數據庫裏你得預先建張表u_users(sequelize建模時會自動找這張表，沒有使用sync來強制建表)

哇！很激動有木有。先後端如今都能訪問了，那前端接口跨域怎麼辦？沒事，還記得web-front-1容器嗎，對，沒錯，只要修改容器裏nginx裏的配置便可。來，咱們操做下：

docker exec -it f6d33f03653f bash 進入web-front-1容器，而後咱們發現conf配置文件目錄爲：/etc/nginx/conf.d/default.conf，那咱們直接編輯配置便可

保存退出，此時咱們須要重啓下nginx。能夠nginx -s reload 或者 nginx -s stop而後 /usr/sbin/nginx 便可。而後咱們能夠模擬下前端輸入內容，調接口，存數據庫這麼一個流程。

前端輸入內容

調接口

請求成功

數據庫發現有這數據了

好了，十分感謝各位大佬的觀看。docker我學了10天，寫了這篇入門文章，有不少指令沒寫，也省略了部分步驟，有些東西確定須要本身摸索，固然文章錯誤不免，還望各大佬指出~歡迎留言，我繼續去當個人切圖仔了！