你的第一個 Docker + React + Express 全棧應用
大廠技術(shù)??高級前端??Node進階
點擊上方?程序員成長指北，關(guān)注公眾號
回復1，加入高級Node交流群
前言
相信很多人都很頭疼 Docker 的部署，我自己也是。
最近發(fā)現(xiàn)一個很有意思的現(xiàn)象：一個人想學某樣技術(shù)的時候，當學會了之后，但是這時出現(xiàn)了一個問題需要學習另一門技術(shù)時，無論這個人前面學得多么刻苦，用功，到這一步有 99% 的概率都會放棄。我愿稱這種現(xiàn)象為 “學習窗口”。
寫一個網(wǎng)站、學會 Vue.js 是很多人的“學習窗口”，只要離開了這個“學習窗口”，他們就不想學了：我都學這么多了，草，怎么最后還要學部署啊。
所以，這篇文章就跟大家分享一下關(guān)于 Docker 部署的那些事。
需求
按照國際慣例，先從一個非常簡單的需求入手，這個需求只完成幾件事：
顯示待辦事項列表 + 添加一個待辦事項 記錄網(wǎng)站的訪問量
上面就是一個經(jīng)典到不能再經(jīng)典的 Todo List 應用。
分析一下需求：待辦事項列表需要用到 數(shù)據(jù)庫 完成，記錄網(wǎng)站訪問量則要用到高速讀取的 緩存 來完成。
技術(shù)選型
目前我前端技術(shù)棧是 React.js，所以前端用 React.js。
由于 Express 有自己的腳手架，所以，后端采用 Express。
數(shù)據(jù)庫方面，因為我自己用的是 M1 的 Mac，所以 mysql 鏡像無法拉取，暫時用 mariadb 來代替。
緩存大家都很熟悉了，直接用 redis 搞定。
前端實現(xiàn)
關(guān)于前端的實現(xiàn)非常簡單，發(fā)請求使用 axios。
interface?Todo?{
??id:?number;
??title:?string;
??status:?'todo'?|?'done';
}
const?http?=?axios.create({
??baseURL:?'http://localhost:4200',
})
const?App?=?()?=>?{
??const?[newTodoTitle,?setNewTodoTitle]?=?useState('');
??const?[count,?setCount]?=?useState(0);
??const?[todoList,?setTodoList]?=?useState([]);
??//?添加?todo
??const?addTodo?=?async?()?=>?{
????await?http.post('/todo',?{
??????title:?newTodoTitle,
??????status:?'todo',
????})
????await?fetchTodoList();
??}
??//?獲取訪問量，并添加一個訪問量
??const?fetchCount?=?async?()?=>?{
????await?http.post('/count');
????const?{?data?}?=?await?http.get('/count');
????setCount(data.myCount);
??}
??//?獲取?todo?列表
??const?fetchTodoList?=?async?()?=>?{
????const?{?data?}?=?await?http.get('/todo');
????setTodoList(data.todoList);
??}
??useEffect(()?=>?{
????fetchCount().then();
????fetchTodoList().then();
??},?[]);
??return?(
????<div?className="App">
??????<header>網(wǎng)站訪問量：{count}header>
??????<ul>
????????{todoList.map(todo?=>?(
??????????<li?key={todo.id}>{todo.title}?-?{todo.status}li>
????????))}
??????ul>
??????<div>
????????<input?value={newTodoTitle}?onChange={e?=>?setNewTodoTitle(e.target.value)}?type="text"/>
????????<button?onClick={addTodo}>提交button>
??????div>
????div>
??);
}
后端實現(xiàn)
后端稍微麻煩了一點，要解決的問題有：
跨域 數(shù)據(jù)庫連接 Redis 連接
先在 main.ts 里配置好路由：
var?cors?=?require('cors')
var?indexRouter?=?require('./routes/index');
var?usersRouter?=?require('./routes/count');
var?todosRouter?=?require('./routes/todo');
var?app?=?express();
//?解決跨域
app.use(cors());
//?業(yè)務(wù)路由
app.use('/',?indexRouter);
app.use('/count',?usersRouter);
app.use('/todo',?todosRouter);
...
module.exports?=?app;
訪問量路由需要用到 redis 來實現(xiàn)高速讀寫：
const?express?=?require('express');
const?Redis?=?require("ioredis");
const?router?=?express.Router();
//?連接?redis
const?redis?=?new?Redis({
??port:?6379,
??host:?"127.0.0.1",
});
router.get('/',?async?(req,?res,?next)?=>?{
??const?count?=?Number(await?redis.get('myCount'))?||?0;
??res.json({?myCount:?count?})
});
router.post('/',?async?(req,?res)?=>?{
??const?count?=?Number(await?redis.get('myCount'));
??await?redis.set('myCount',?count?+?1);
??res.json({?myCount:?count?+?1?})
})
module.exports?=?router;
todo 路由里使用 sequelize 這個庫來實現(xiàn)數(shù)據(jù)庫連接和初始化：
const?{?Sequelize,?DataTypes}?=?require('sequelize');
const?express?=?require("express");
const?router?=?express.Router();
//?連接數(shù)據(jù)庫
const?sequelize?=?new?Sequelize({
??host:?'localhost',
??database:?'docker_todo',
??username:?'root',
??password:?'123456',
??dialect:?'mariadb',
});
//?定義?todo?model
const?Todo?=?sequelize.define('Todo',?{
??id:?{
????type:?Sequelize.INTEGER,
????autoIncrement:?true,
????primaryKey:?true
??},
??title:?{?type:?DataTypes.STRING?},
??status:?{?type:?DataTypes.STRING?}
},?{});
//?同步數(shù)據(jù)庫結(jié)構(gòu)
sequelize.sync({?force:?true?}).then(()?=>?{
??console.log('已同步');
});
router.get('/',?async?(req,?res)?=>?{
??//?獲取?todo?list
??const?todoList?=?await?Todo.findAll();
??res.json({?todoList?});
})
router.post('/',?async?(req,?res,?next)?=>?{
??const?{?title,?status?}?=?req.body;
??//?創(chuàng)建一個?todo
??const?newTodo?=?await?Todo.create({
????title,
????status:?status?||?'todo',
??});
??res.json({?todo:?newTodo?})
});
module.exports?=?router;
本地運行
本來使用以下命令就可以跑本地應用了：
#?前端
cd?client?&&?npm?run?start
#?后端
cd?server?&&?npm?run?start
然而，我們本地并沒有 mariadb 和 redis，這就有點難受了。
啟動容器
如果是在以前，我一般會在 Mac 上用下面的命令安裝一個 mariadb 和 redis：
brew?install?mariadb
brew?install?redis
然后在 自己電腦 里一通配置（username, password...），最后才能在本地跑項目，非常麻煩。而且一旦配置錯了，草，又要重裝。。。
而 Docker 其中一個作用就是將上面 mariadb 和 redis 都打成不同 image（鏡像），使用 DockerHub 統(tǒng)一管理，使用 Docker 就可以快速配置一個服務(wù)。
以前只能一個電腦裝一個 MySQL，現(xiàn)在我能同時跑 8 個 MySQL 容器（不同端口），想刪誰刪誰，想裝誰裝誰。遇事不決，先把容器重啟，重啟不行，再用鏡像構(gòu)建一個容器，構(gòu)建不行，再拉一個 latest 的鏡像，再構(gòu)建一次，非常的帶勁。
廢話不多說，先來把 redis 啟動：
docker?run?--name?docker-todo-redis?-p?6379:6379?-d?redis
然后再把 mariadb 啟動：
docker?run?-p?127.0.0.1:3306:3306??--name?docker-todo-mariadb?-e?MARIADB_ROOT_PASSWORD=123456?MARIADB_DATABASE=docker_todo?-d?mariadb
解釋一下參數(shù) -p 是端口映射:本機:容器，-e 指定環(huán)境變量，-d 表示后臺運行。
再次運行：
#?前端
cd?client?&&?npm?run?start
#?后端
cd?server?&&?npm?run?start
可以在 http://localhost:3000 看到頁面：
貌似一切都很 OK 的樣子~
docker-compose
試想一下，如果現(xiàn)在給你一個機器，請問你要怎么部署？你要先跑上面兩條 docker 命令，再跑下面兩條 npm 的命令，麻煩。
能不能一鍵拉起 mariadb, redis 2 個容器呢？這就是 docker-compose.yml 的由來。創(chuàng)建一個 dev-docker-compose.yml 文件：
version:?'3'
services:
??mariadb:
????image:?mariadb
????container_name:?'docker-todo-mariadb'
????environment:
??????MARIADB_ROOT_PASSWORD:?'123456'
??????MARIADB_DATABASE:?'docker_todo'
????ports:
??????-?'3306:3306'
????restart:?always
??redis:
????image:?redis
????container_name:?'docker-todo-redis'
????ports:
??????-?'6379:6379'
????restart:?always
這個 yml 文件描述的內(nèi)容其實就等同于上面兩條 docker 命令。好處有兩個：
不用寫一串長長長長長長長長長長長長長長得讓人受不了的命令 把部署命令記到小本本 docker-compose.yml文件里。問：怎么部署？答：自己看docker-compose.yml一鍵拉起相關(guān)服務(wù)
以后，一鍵跑本地服務(wù)的時候就可以一鍵啟動 mariadb 和 redis 了：
docker-compose?-f?dev-docker-compose.yml?up?-d
Dockerfile
不過，在生產(chǎn)環(huán)境時每次都要跑 npm 這兩條命令還是很煩，能不能把這兩行也整全到 docker-compose 里呢？
注意：生產(chǎn)環(huán)境應該要用 npm run build 構(gòu)建應用，然后再跑構(gòu)建出來的 JS 才是正常開發(fā)流程，這里為了簡化流程，就以 npm run start 來做例子說明。
既然 docker-compose 是通過 image 創(chuàng)建容器的，那么我們的 React App 和 Express App 也打成兩個 image，然后用 docker-compose 分別創(chuàng)建容器不就 OK 了么？
構(gòu)建容器說白了就是我們常說的 “CICD 或者構(gòu)建流水線”，只不過這個 “流水線” 關(guān)鍵的只有一條 npm run start。描述 “流水線” 的叫 Dockerfile （注意這里不是駝峰寫法）。
注意：正常的鏡像構(gòu)建和啟動應該是整個項目 CICD 其中的一環(huán)，這里只是打個比方。項目的 CICD 除了跑命令，構(gòu)建應用，還會有代碼檢查、脫敏檢查、發(fā)布消息推送等步驟，是更為繁雜的一套流程。
先把 React 的 Dockerfile 整了：
#?使用?node?鏡像
FROM?node
#?準備工作目錄
RUN?mkdir?-p?/app/client
WORKDIR?/app/client
#?復制?package.json
COPY?package*.json?/app/client/
#?安裝目錄
RUN?npm?install
#?復制文件
COPY?.?/app/client/
#?開啟?Dev
CMD?["npm",?"run",?"start"]
非常的簡單，需要注意的是容器也可以看成一個電腦里的電腦，所以把自己電腦的文件復制到 “容器電腦” 里是非常必要的一步。
Express App 的 Dockerfile 和上面的幾乎一毛一樣：
#?使用?node?鏡像
FROM?node
#?初始化工作目錄
RUN?mkdir?-p?/app/server
WORKDIR?/app/server
#?復制?package.json
COPY?package*.json?/app/server/
#?安裝依賴
RUN?npm?install
#?復制文件
COPY?.?/app/server/
#?開啟?Dev
CMD?["npm",?"run",?"start"]
那么現(xiàn)在再來改造一個 prod-docker-compose.yml 文件：
version:?'3'
services:
??client:
????build:
??????context:?./client
??????dockerfile:?Dockerfile
????container_name:?'docker-todo-client'
????#?暴露端口
????expose:
??????-?3000
????#?暴露端口
????ports:
??????-?'3000:3000'
????depends_on:
??????-?server
????restart:?always
??server:
????#?構(gòu)建目錄
????build:
??????context:?./server
??????dockerfile:?Dockerfile
????#?容器名
????container_name:?'docker-todo-server'
????#?暴露端口
????expose:
??????-?4200
????#?端口映射
????ports:
??????-?'4200:4200'
????restart:?always
????depends_on:
??????-?mariadb
??????-?redis
??mariadb:
????image:?mariadb
????container_name:?'docker-todo-mariadb'
????environment:
??????MARIADB_ROOT_PASSWORD:?'123456'
??????MARIADB_DATABASE:?'docker_todo'
????ports:
??????-?'3306:3306'
????restart:?always
??redis:
????image:?redis
????container_name:?'docker-todo-redis'
????ports:
??????-?'6379:6379'
????restart:?always
上面的配置應該都不難理解，不過，還是有一些細節(jié)需要注意：
端口都要暴露出來，也要做映射，不然本地也訪問不了 3000 和 ?4200 端口 depends_on 的作用是等 maraidb 和 redis 兩個容器起來了再啟動當前容器
然后運行下面命令，一鍵啟動：
docker-compose?-f?prod-docker-compose.yml?up?-d?--build
后面 --build 是指每次跑時都構(gòu)建一次鏡像。
然而，Boom：
ConnectionRefusedError: connect ECONNREFUSED 127.0.0.1:3306
...
怎么連不上了？
解決連不上的問題
連不上的原因是我們這里用了 localhost 和 127.0.0.1。
雖然每個容器都在我們主機 127.0.0.1 網(wǎng)絡(luò)里，但是容器之間是需要通過對方的 IP 地址來交流和訪問的，按照官網(wǎng)的介紹 通過 Container Name 就可得知對方容器的 IP。
因此，Express App 里的 host 不能寫 127.0.0.1，而要填 docker-todo-redis 和 docker-todo-mariadb。下面用環(huán)境變量 NODE_ENV 來區(qū)分是否以 Docker 啟動 App。
修改 mariadb 的連接：
//?連接數(shù)據(jù)庫
const?sequelize?=?new?Sequelize({
??host:?process.env.NODE_ENV?===?'docker'???'docker-todo-mariadb'?:?"127.0.0.1"?,
??database:?'docker_todo',
??username:?'root',
??password:?'123456',
??dialect:?'mariadb',
});
再修改 redis 的連接：
const?redis?=?new?Redis({
??port:?6379,
??host:?process.env.NODE_ENV?===?'docker'???'docker-todo-redis'?:?"127.0.0.1"?,
});
然后在 /server/Dockerfile 里添加 NODE_ENV=docker：
#?使用?node?鏡像
FROM?node
#?初始化工作目錄
RUN?mkdir?-p?/app/server
WORKDIR?/app/server
#?復制?package.json
COPY?package*.json?/app/server/
ENV?NODE_ENV=docker
#?安裝依賴
RUN?npm?install
#?復制文件
COPY?.?/app/server/
#?開啟?Dev
CMD?["npm",?"run",?"start"]
現(xiàn)在繼續(xù)運行我們的 “一鍵啟動” 命令，就能啟動我們的生產(chǎn)環(huán)境了：
docker-compose?-f?prod-docker-compose.yml?up?-d?--build
總結(jié)
一句話總結(jié)，Dockerfile 是用于構(gòu)建 Docker 鏡像的，跟我們平常接觸的 CICD 或者流水線有點類似。而 docker-compose 的作用則是 “一鍵拉起” N 個容器。
上面整個例子放在 Github 這里了，可以 Clone 下來自己搗鼓玩玩。
我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學習感興趣的話（后續(xù)有計劃也可以），我們可以一起進行Node.js相關(guān)的交流、學習、共建。下方加 考拉 好友回復「Node」即可。
???“分享、點贊、在看” 支持一波??