起因

一直想上手一下 docker ，奈何自己擺脫不了懶惰的天性。就在之前有個(gè) docker 的線下技術(shù)活動(dòng)，就剛好學(xué)習(xí)一下。
如何實(shí)踐呢？就在一個(gè)前端項(xiàng)目上結(jié)合 docker 部署吧。

場(chǎng)景說(shuō)明

我有一個(gè)博客，倉(cāng)庫(kù)是github，前端是用vue（或者react）寫(xiě)的，結(jié)合travis CI持續(xù)集成，再用gulp自動(dòng)發(fā)布到服務(wù)器上。
[ 注：怕小白不懂，詳說(shuō)下流程。先本地 git commit && git push 代碼到github倉(cāng)庫(kù)，然后travis CI會(huì)自動(dòng)拉取代碼并執(zhí)行travis.yml文件里的命令npm install && gulp publish。]

現(xiàn)在要加入docker，那么如何加呢？

思考結(jié)果

一開(kāi)始不咋懂，就探索的第一個(gè)方案，結(jié)果想改個(gè)小東西的時(shí)候發(fā)現(xiàn)太麻煩，就發(fā)現(xiàn)了第二種方案。

兩種方案：

• 方案一：先構(gòu)建鏡像上傳到dockerhub倉(cāng)庫(kù)，然后在服務(wù)器上拉取鏡像并創(chuàng)建容器。
  1. 構(gòu)建鏡像：docker build
  2. 上傳：docker push
  3. 拉取鏡像：docker pull
  4. 創(chuàng)建容器：docker run
• 方案二：直接在服務(wù)器上拉取代碼構(gòu)建鏡像，并創(chuàng)建容器。
  1. 構(gòu)建鏡像：docker build
  2. 創(chuàng)建容器：docker run

真正實(shí)踐

這里只詳述方案一，方案二省略！！

1. 準(zhǔn)備工作（ 這些都要自己先準(zhǔn)備好 ）：

• 本地新建一個(gè)前端項(xiàng)目，并且遠(yuǎn)程倉(cāng)庫(kù)是github。
• 服務(wù)器上安裝docker（如何安裝，請(qǐng)看 docker官網(wǎng) ）。
• 然后了解下github的CI工具 travis CI，并把項(xiàng)目CI跑起來(lái)。

準(zhǔn)備工作做好后，就開(kāi)始下面的流程。

2. 第一步：

• 在已建好的項(xiàng)目根目錄加入2個(gè)文件：Dockerfile、nginx.conf:

Dockerfile:

from nginx
label maintainer "lingzi"
copy ./build/ /usr/share/nginx/html/
copy ./nginx.conf /etc/nginx/conf.d/default.conf
expose 83

nginx.conf:

server {
    listen       83;
    root         /usr/share/nginx/html/;

    include /etc/nginx/default.d/*.conf;

    location / {
      index index.html index.htm;
      try_files $uri $uri/ /index.html;
    }

    location /api/ {
      proxy_pass http://lemonof.com:7001/;
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }

}

3. 第二步：

• 因?yàn)橐褎?chuàng)建的鏡像推到dockerhub倉(cāng)庫(kù)，所以要先在dockerhub官網(wǎng)注冊(cè)賬號(hào)。
• 新建travis.yml文件
  travis.yml:

language: node_js
node_js:
  - "8"
install: npm install
script:
  - npm run build
  - docker build -t imagename .   // `imagename`是變量，鏡像的名字，你隨便寫(xiě)個(gè)。特別注意，后面那個(gè)點(diǎn)是必須要的，不要寫(xiě)掉了！
  - docker login -u $DOCKER_USER -p $DOCKER_PASS
  - docker push imagename   // `imagename`注釋同上

注：$DOCKER_USER和$DOCKER_PASS是travis里設(shè)置的環(huán)境變量。為了安全，把用戶名和密碼都設(shè)置成環(huán)境變量了，當(dāng)然，你也可以直接寫(xiě)上你的用戶名和密碼。例如：docker login -u 用戶名 -p 密碼

4. 第三步：

• 用xshell登錄服務(wù)器。
• 因?yàn)闇?zhǔn)備工作里已經(jīng)安裝好了docker（注：沒(méi)裝的趕緊裝），此時(shí)直接在服務(wù)器上拉取鏡像：

docker pull imagename

注：如果dockerhub平臺(tái)里imagename設(shè)置為private，如下圖所示，就要先登錄：docker login -u username -p password，才能拉取鏡像。

repository設(shè)置.png

• 在服務(wù)器上創(chuàng)建容器并運(yùn)行

docker run --name dockername -d -p 83:83 imagename
// dockername   容器名；
// imagename  鏡像名
// -d 后臺(tái)運(yùn)行容器，并返回容器ID；
// -p 端口映射，格式為：主機(jī)(宿主)端口:容器端口

現(xiàn)在訪問(wèn)服務(wù)器的83端口，應(yīng)該就能看到東西了。這就是我博客的首頁(yè)了。

首頁(yè).png

結(jié)尾發(fā)言

希望能幫到大家。
代碼倉(cāng)庫(kù)地址：https://github.com/lingziyb/ice-blog

參考文章如下：
docker入門(mén)教程
travis設(shè)置：github enok-blog
docker命令大全