寫給前端工程師看的Docker教程-實戰篇

相關文章：

• 寫給前端工程師看的Docker教程-基礎篇
• 寫給前端工程師看的Docker教程-中級篇
• 寫給前端工程師看的Docker教程-實戰篇

在前幾篇的文章裏，咱們學習了Docker經常使用的命令和基本操做，如今能夠開始實戰了。

單頁應用

前端工做中最多見的就是單頁應用了。咱們首先用create-react-app快速建立一個應用

npm i create-react-app -g
create-react-app react-app
cd react-app
npm run start
複製代碼

能夠看見正常啓動的頁面。

打包試一下

npm run build
複製代碼

能夠看到本地生成了一個build目錄，這就是最後線上運行的代碼。

咱們先在本地運行下build目錄看看

npm i http-server -g
http-server -p 4444 ./build
複製代碼

訪問 http://localhost:4444 便可看到打包後的頁面

單頁應用Docker化

在react-app目錄下新建Dockerfile .dockerignore和nginx.conf

.dockerignore

node_modules
build
複製代碼

dockerignore指定了哪些文件不須要被拷貝進鏡像裏，相似.gitignore。

咱們知道單頁應用的路由通常都被js託管，因此對於nginx須要特別配置

nginx.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /app/build; # 打包的路徑
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 防止重刷新返回404
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
複製代碼

Dockerfile

# 基於node11
FROM node:11

# 設置環境變量
ENV PROJECT_ENV production
ENV NODE_ENV production

# 安裝nginx
RUN apt-get update && apt-get install -y nginx

# 把 package.json package-lock.json 複製到/app目錄下
# 爲了npm install能夠緩存
COPY package*.json /app/

# 切換到app目錄
WORKDIR /app

# 安裝依賴
RUN npm install --registry=https://registry.npm.taobao.org

# 把全部源代碼拷貝到/app
COPY . /app

# 打包構建
RUN npm run build

# 拷貝配置文件到nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

# 啓動nginx，關閉守護式運行，不然容器啓動後會馬上關閉
CMD ["nginx", "-g", "daemon off;"]
複製代碼

須要特別注意的是:

COPY package*.json /app/
RUN npm install
COPY . /app
複製代碼

咱們單獨把package.json文件先拷貝到app，安裝完依賴，而後才把全部的文件拷貝到app，這是爲何？

這是爲了充分利用docker緩存

COPY . /app
RUN npm install
複製代碼

若是這麼寫，那麼每一次從新構建鏡像，都須要下載一次npm包，這是很是浪費時間的！而把package.json與源文件分隔開寫入鏡像，這樣只有當package.json發生改變了，纔會從新下載npm包。

固然緩存有時候也會形成一些麻煩，好比在進行一些shell操做輸出內容時，因爲緩存的存在，致使新構建的鏡像裏的內容仍是舊版本的。

咱們能夠指定構建鏡像時不使用緩存

docker build --no-cache -t deepred5/react-app .
複製代碼

最佳實踐是在文件頂部指定一個環境變量，若是但願不用緩存，則更新這個環境變量便可，由於緩存失效是從第一條發生變化的指令開始。

打包鏡像

docker build -t deepred5/react-app .  
複製代碼

啓動容器

docker run -d --name my-react-app  -p 8888:80 deepred5/react-app
複製代碼

訪問 http://localhost:8888 便可看到頁面

訪問 http://localhost:8888/deepred5, 也能夠看見頁面，說明nginx防刷新配置生效了！

多層構建

咱們以前寫的Dockerfile實際上是有些問題的: 鏡像基於node11，可是整個鏡像用到node環境的地方只是爲了前端打包，真正啓動的是Nginx。鏡像裏的項目源代碼以及node_modules其實根本沒有用，這些冗餘文件形成了鏡像的體積變得很是龐大。

而咱們僅僅須要打包出來的靜態文件以及啓動一個靜態服務器Nginx便可。

這時就可使用multi-stage多層構建。

新建一個Dockerfile.multi

# node鏡像僅僅是用來打包文件
FROM node:alpine as builder

ENV PROJECT_ENV production
ENV NODE_ENV production

COPY package*.json /app/

WORKDIR /app

RUN npm install --registry=https://registry.npm.taobao.org

COPY . /app

RUN npm run build

# 選擇更小體積的基礎鏡像
FROM nginx:alpine

COPY nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=builder /app/build /app/build
複製代碼

這個文件裏，咱們使用了兩個FROM基礎鏡像，第一個node:alpine僅僅做爲打包環境，真正的基礎鏡像是nginx:alpine

打包鏡像

# -f 指定使用Dockerfile.multi進行構建
docker build -t deepred5/react-app-multi .  -f Dockerfile.multi
複製代碼

啓動容器

docker run -d --name my-react-app-multi  -p 8889:80 deepred5/react-app-multi
複製代碼

訪問 http://localhost:8889 便可看到頁面

查看鏡像大小

docker images deepred5/react-app-multi
docker images deepred5/react-app
複製代碼

能夠發現，二者的大小相差巨大。

deepred5/react-app鏡像有1G多，而deepred5/react-app-multi只有20多M

主要緣由是：deepred5/react-app的基礎鏡像node:11就有900M，而deepred5/react-app-multi的基礎鏡像nginx:alpine只有20M。因而可知多層構建對於減小鏡像大小是很是有幫助的。

Node應用

前端有時也會參與到Node BFF層的開發。咱們來建立一個Node結合Redis的簡單項目

mkdir node-redis
cd node-redis
npm init -y
npm i koa koa-router ioredis
touch index.js
複製代碼

node-redis/index.js

const Koa = require('koa');
const Router = require('koa-router');
const Redis = require("ioredis");

const app = new Koa();
const router = new Router();
const redis = new Redis({
  port: 6379,
  host: '127.0.0.1'
});

router.get('/', (ctx, next) => {
  ctx.body = 'hello world.';
});

router.get('/api/json/get', async (ctx, next) => {
  const result = await redis.get('age');
  ctx.body = result;
});

router.get('/api/json/set', async (ctx, next) => {
  const result = await redis.set('age', ctx.query.age);
  ctx.body = {
    status: result,
    age: ctx.query.age
  }
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3000, () => {
  console.log('server start at localhost:3000');
})
複製代碼

咱們首先須要本地安裝Redis，而後啓動redis

redis-server
複製代碼

啓動Node項目

node index.js
複製代碼

訪問 http://localhost:3000/ 便可看到頁面

訪問 http://localhost:3000/api/json/set?age=2 ，咱們就向Redis裏設置age的值爲2

訪問 http://localhost:3000/api/json/get ，咱們就取得Redis裏age的值

Node應用Docker化

首先咱們來思考下，這個後端應用涉及Node和Redis。若是咱們要部署到Docker裏，應該怎麼構建鏡像？

1. 方案一：基於一個最基礎的ubuntu鏡像，而後咱們在其中安裝Node和Redis，這樣Node和Redis之間就能夠進行通訊了。這種方案只須要啓動一個容器，由於Node和Redis已經在這個容器裏了。
2. 方案二：咱們基於Redis鏡像啓動一個容器，專門用來跑Redis。基於Node鏡像再啓動一個容器，專門用來跑Node。

Docker的理念更傾向於方案二。咱們但願一個鏡像專一於作一件事，如今流行的微服務，微前端也是這種思想。

在中級篇中咱們說過每一個容器都是相互隔離的，經過映射端口才能訪問容器裏的網絡應用。可是容器和容器之間怎麼進行通訊呢？

Docker裏使用Networking進行容器間的通訊

Networking

# 建立一個app-test網絡
docker network create app-test
複製代碼

咱們只須要把須要通訊的容器都加入到app-test網絡裏，以後容器間就能夠互相訪問了。

docker run -d --name redis-app --network app-test  -p 6389:6379 redis 
docker run -it --name node-app --network app-test node:11 /bin/bash
複製代碼

咱們建立了兩個容器，這兩個容器都在app-test網絡裏。

咱們進入node-app容器裏，而後ping redis-app，發現能夠訪ping通，說明容器間能夠通訊了！

咱們修改以前的代碼:

const redis = new Redis({
  port: 6379,
  host: 'db',
});
複製代碼

redis的host改成db

新建一個Dockerfile

FROM node:11
COPY package*.json /app/ 
WORKDIR /app
RUN npm install
COPY . /app
EXPOSE 3000
CMD ["node","index.js"]
複製代碼

構建鏡像

docker build -t deepred5/node-redis-app .
複製代碼

啓動容器

# 建立網絡
docker network create app-test
# 啓動redis容器
docker run -d --name db --network app-test  -p 6389:6379 redis 
# 啓動node容器
docker run --name node-redis-app -p 4444:3000 --network app-test -d deepred5/node-redis-app
複製代碼

訪問 http://localhost:4444/ 便可看到頁面

還記得咱們以前作的react-app單頁應用嗎？咱們能夠也把這個應用加入到app-test網絡裏來，這樣前端單頁應用也能夠訪問後端了！

修改react-app目錄下的nginx.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /app/build; # 打包的路徑
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 防止重刷新返回404
    }

    location /api {
        proxy_pass http://node-redis-app:3000; #後臺轉發地址
    }

}
複製代碼

從新構建鏡像

docker build -t deepred5/react-app-multi .  -f Dockerfile.multi
複製代碼

啓動容器

docker run -d --name my-react-app-multi --network app-test  -p 9999:80 deepred5/react-app-multi
複製代碼

訪問 http://localhost:9999/api/json/set?age=55 成功返回數據

Docker compose

咱們如今這個項目有3個啓動鏡像:

• deepred5/react-app-multi 前端單頁應用
• redis 數據緩存
• deepred5/node-redis-app 後端服務，訪問redis，同時給前端提供接口

若是要把這個項目完整的啓動起來，按照順序須要這樣啓動：

# 啓動redis容器
docker run -d --name db --network app-test  -p 6389:6379 redis 
# 啓動node容器
docker run --name node-redis-app -p 4444:3000 --network app-test -d deepred5/node-redis-app
# 啓動前端容器
docker run -d --name my-react-app-multi --network app-test  -p 9999:80 deepred5/react-app-multi
複製代碼

這還僅僅只是3個容器的項目，若是容器再多，啓動就變得很是複雜了！

這時，就須要docker compose出場了。

首先須要安裝docker compose，安裝完成以後

咱們新建一個my-all-app目錄，而後新建docker-compose.yml

mkdir my-all-app
cd my-all-app
touch docker-compose.yml
複製代碼

version: '3.7'

services:
 db:
 image: redis
 restart: always
 ports:
 - 6389:6379
 networks:
 - app-test

 node-redis-app:
 image: deepred5/node-redis-app
 restart: always
 depends_on:
 - db
 ports:
 - 4444:3000
 networks:
 - app-test
    
 react-app-multi:
 image: deepred5/react-app-multi
 restart: always
 depends_on:
 - node-redis-app
 ports:
 - 9999:80
 networks:
 - app-test

networks:
 app-test:
 driver: bridge
複製代碼

# 啓動全部容器
docker-compose up -d
# 中止全部容器
docker-compose stop
複製代碼

訪問 http://localhost:9999 查看前端頁面

訪問 http://localhost:4444 查看後端接口

能夠看見，使用docker-compose.yml配置完啓動步驟後，啓動多容器就變得十分簡單了。

參考

• 如何使用docker部署前端應用
• 第一本Docker書 修訂版