在上篇文章裏,咱們學習了Docker經常使用的命令和基本操做,如今能夠開始實戰了。javascript
前端工做中最多見的就是單頁應用了。咱們首先用create-react-app
快速建立一個應用html
npm i create-react-app -g create-react-app react-app cd react-app npm run start
能夠看見正常啓動的頁面。前端
打包試一下java
npm run build
能夠看到本地生成了一個build目錄,這就是最後線上運行的代碼。node
<!-- more -->react
咱們先在本地運行下build目錄看看nginx
npm i http-server -g http-server -p 4444 ./build
訪問 http://localhost:4444 便可看到打包後的頁面git
在react-app
目錄下新建Dockerfile
.dockerignore
和nginx.conf
redis
.dockerignore
docker
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 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和Redis。若是咱們要部署到Docker裏,應該怎麼構建鏡像?
ubuntu
鏡像,而後咱們在其中安裝Node和Redis,這樣Node和Redis之間就能夠進行通訊了。這種方案只須要啓動一個容器,由於Node和Redis已經在這個容器裏了。Redis
鏡像啓動一個容器,專門用來跑Redis。基於Node
鏡像再啓動一個容器,專門用來跑Node。Docker的理念更傾向於方案二。咱們但願一個鏡像專一於作一件事,如今流行的微服務,微前端也是這種思想。
在中級篇中咱們說過每一個容器都是相互隔離的,經過映射端口才能訪問容器裏的網絡應用。可是容器和容器之間怎麼進行通訊呢?
Docker裏使用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 成功返回數據
咱們如今這個項目有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
配置完啓動步驟後,啓動多容器就變得十分簡單了。