目錄
- 項(xiàng)目目錄結(jié)構(gòu)
- 創(chuàng)建前端項(xiàng)目
- 調(diào)整首頁(yè)內(nèi)容
- 添加Dockerfile文件
- 添加nginx配置文件
- 生成前端鏡像
- 創(chuàng)建后端項(xiàng)目
- 修改app.js設(shè)置跨域
- 連接mysql的配置
- 進(jìn)行sql查詢
- 構(gòu)建后端鏡像
- 初始化數(shù)據(jù)庫(kù)
- 創(chuàng)建 mysql容器
- 登錄mysql并初始化數(shù)據(jù)
- docker-compose編排容器
- 安裝[docker-compose](https://docs.docker.com/compose/)
- 新建yml文件
- 繼續(xù)優(yōu)化
- 方案1:使用shell執(zhí)行
- 方案2:采用鏡像多階段構(gòu)建
項(xiàng)目開發(fā)中，往往都需要啟動(dòng)多個(gè)容器，容器之間又相互依賴，存在著啟動(dòng)的順序。docker-compose就是可以通過(guò)命令控制依次啟動(dòng)容器。
容器編排工具可以幫助我們批量地創(chuàng)建、調(diào)度和管理容器，幫助我們解決規(guī)模化容器的部署問(wèn)題。
Docker 三種常用的編排工具：Docker Compose、Docker Swarm 和 Kubernetes。
本文主要是使用 docker-compose 實(shí)現(xiàn)react【nginx】、express【node】、mysql【mysql】搭建項(xiàng)目前端通過(guò)express訪問(wèn)mysql數(shù)據(jù)庫(kù)的功能。
項(xiàng)目目錄結(jié)構(gòu)
. ├── docker-compose.yml ├── express-mysql │ ├── app.js │ ├── bin │ ├── Dockerfile │ ├── node_modules │ ├── package.json │ ├── public │ ├── routes │ ├── src │ ├── views │ └── yarn.lock ├── init.sql ├── react-express │ ├── Dockerfile │ ├── Dockerfile.build │ ├── node_modules │ ├── package.json │ ├── public │ ├── react-express.conf │ ├── src │ └── yarn.lock └── start.sh
創(chuàng)建前端項(xiàng)目
使用 [create-react-app](https://create-react-app.bootcss.com/) 搭建前端項(xiàng)目，并安裝axios插件，進(jìn)行數(shù)據(jù)的調(diào)用。
npx create-react-app react-express cd react-express yarn add axios npm start
調(diào)整首頁(yè)內(nèi)容
下載好項(xiàng)目，修改src/App.js的內(nèi)容，實(shí)現(xiàn)可以請(qǐng)求后端接口返回的數(shù)據(jù)。
import "./App.css";
import { useState, useEffect } from "react";
import axios from "axios";
function App() {
const [user, setUser] = useState([]);
useEffect(() => {
axios.get("http://localhost:8088/sql").then((res) => {
setUser(res.data);
});
}, []);
return (
<div className="App">
<header className="App-header">
{user.map((u, i) => (
<p key={i}> {u.username}</p>
))}
</header>
</div>
);
}
export default App;
添加Dockerfile文件
使用Dockerfile構(gòu)建前端鏡像。
FROM nginx COPY ./build /usr/share/nginx/html COPY ./react-express.conf /etc/nginx/conf.d WORKDIR /usr/share/nginx/html EXPOSE 80 # 啟動(dòng)ngnix CMD ["nginx", "-g", "daemon off;"]
添加.dockerignore文件，排除不需要打包到docker鏡像的文件
node_modules # testing /coverage # misc .DS_Store .env.local .env.development.local .env.test.local .env.production.local npm-debug.log* yarn-debug.log* yarn-error.log*
添加nginx配置文件
添加react-express.conf文件
server {
listen 80;
server_name localhost; # 如 www.baidu.com
root /usr/share/nginx/html; # 指向打包后的目錄
location / {
index index.html;
}
}
生成前端鏡像
只需要將編譯后的build文件添加到docker鏡像中，生成鏡像前，先執(zhí)行下 npm run build。
npm run build docker build -t react-express .
可以看到成功生成react-express鏡像。并暴露端口為80，該鏡像為后面執(zhí)行docker-compose做準(zhǔn)備。
創(chuàng)建后端項(xiàng)目
首先確保本地安裝express；
npm install -g express
使用[express-generator](https://www.expressjs.com.cn/starter/generator.html)生成器生產(chǎn)express-mysql項(xiàng)目
mkdir express-mysql cd express-mysql npx express-generator
下載完成后，目錄結(jié)構(gòu)如下：
. ├── Dockerfile ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets ├── routes │ ├── index.js │ └── users.js ├── views │ ├── error.jade │ ├── index.jade │ └── layout.jade └── yarn.lock
為了連接mysql數(shù)據(jù)庫(kù)，新增src目錄結(jié)構(gòu)
. ├── Dockerfile ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets ├── routes │ ├── index.js │ └── users.js + ├── src + │ ├── config.js + │ ├── db.js ├── views │ ├── error.jade │ ├── index.jade │ └── layout.jade └── yarn.lock
修改app.js設(shè)置跨域
// 在路由調(diào)用之前設(shè)置
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// ...
連接mysql的配置
src/config.js文件
module.exports = {
port: 3333, // express 服務(wù)啟動(dòng)端口
/* 數(shù)據(jù)庫(kù)相關(guān)配置 */
db: {
host: 'localhost', // 主機(jī)名
port: 8808, // MySQL 默認(rèn)端口為 3306
user: 'root', // 使用 root 用戶登入 MySQL
password: '123456', // MySQL 密碼，用你自己的
database: 'blog', // 使用數(shù)據(jù)庫(kù)
useConnectionPooling: true, // 使用連接池進(jìn)行連接，否則過(guò)一會(huì)node連接的mysql就會(huì)斷開，出現(xiàn)錯(cuò)誤
connectionLimit: 50,
queueLimit: 0,
waitForConnection: true
}
}
src/db.js文件內(nèi)容
const mysql = require("mysql");
// 獲取數(shù)據(jù)庫(kù)配置信息
const config = require("./config").db;
//創(chuàng)建一個(gè)mysql連接對(duì)象
let connection;
function handleError(err) {
if (err) {
// 如果是連接斷開，自動(dòng)重新連接
if (err.code === "PROTOCOL_CONNECTION_LOST") {
connect();
} else {
console.error(err.stack || err);
}
}
}
// 連接數(shù)據(jù)庫(kù)
function connect() {
console.log("連接數(shù)據(jù)庫(kù) connect");
//創(chuàng)建一個(gè)mysql連接對(duì)象
connection = mysql.createPool(config);
connection.getConnection(handleError);
connection.on("error", handleError);
}
connect();
module.exports = connection;
進(jìn)行sql查詢
在routes/index.js下設(shè)置sql查詢
var express = require("express");
var router = express.Router();
const connection = require("../src/db");
/* GET home page. */
router.get("/sql", function (req, res, next) {
/* 使用 connection.query 來(lái)執(zhí)行 sql 語(yǔ)句 */
// 第一個(gè)參數(shù)為 sql 語(yǔ)句，可以透過(guò) js 自由組合
// 第二個(gè)參數(shù)為回調(diào)函數(shù)，err 表示查詢異常、第二個(gè)參數(shù)則為查詢結(jié)果（這里的查詢結(jié)果為多個(gè)用戶行）
connection.query("select username from user", (err, users) => {
if (err) {
res.send("query error"+ err);
} else {
// 將 MySQL 查詢結(jié)果作為路由返回值
res.send(users);
}
});
});
module.exports = router;
構(gòu)建后端鏡像
新建Dockerfile文件
FROM node:16.11.0 COPY ./ /app WORKDIR /app RUN npm config set registry https://registry.npm.taobao.org && npm install EXPOSE 3000 CMD npm start
新建.dockerignore文件
node_modules *.lock *.log yarn-error.log package-lock.json
在當(dāng)前目錄下，執(zhí)行docker構(gòu)建鏡像的命令，測(cè)試下是否有問(wèn)題。
docker build -t express-mysql .
初始化數(shù)據(jù)庫(kù)
創(chuàng)建sql腳本，在容器啟動(dòng)后給mysql容器初始化數(shù)據(jù)。【初始化數(shù)據(jù)有很多其它方案，可以在創(chuàng)建鏡像時(shí)通過(guò)修改配置將初始化數(shù)據(jù)存入鏡像，有興趣可自行搜索】，在這里只使用簡(jiǎn)單的手動(dòng)處理方案，降低認(rèn)知難度。
DROP TABLE IF EXISTS `user`;
create table user
(
id bigint auto_increment
primary key,
username varchar(255) not null
)
collate = utf8mb4_unicode_ci;
INSERT INTO blog.user (id, username) VALUES (1, 'admin');
INSERT INTO blog.user (id, username) VALUES (2, 'docker');
創(chuàng)建 mysql容器
docker run -d --name mysql-user -p 8087:3306 \ -v /data/docker-data/docker_mysql/conf:/etc/mysql/conf.d \ -v /data/docker-data/docker_mysql/logs:/logs \ -v /data/docker-data/docker_mysql/data:/var/lib/mysql \ -e MYSQL_ROOT_PASSWORD=123456 \ mysql:5.7
登錄mysql并初始化數(shù)據(jù)
mysql -hlocalhost -P8087 -uroot -p123456 <<EOFuse blog;source /data/compose/init.sql;quitEOFmysql -hlocalhost -P8087 -uroot -p123456 <<EOF use blog; source /data/compose/init.sql; quit EOF
docker-compose編排容器
到目前已經(jīng)完成了前端、后端、數(shù)據(jù)庫(kù)的創(chuàng)建，項(xiàng)目執(zhí)行依賴多個(gè)容器啟動(dòng)，上面的過(guò)程非常繁瑣，而且容易出現(xiàn)錯(cuò)誤。接下來(lái)就使用docker-compose可以使用一個(gè)命令將3個(gè)容器同時(shí)啟動(dòng)。
安裝[docker-compose](https://docs.docker.com/compose/)
安裝完成后查看版本信息
docker-compose version --- docker-compose version 1.29.2, build unknown docker-py version: 5.0.3 CPython version: 3.6.8 OpenSSL version: OpenSSL 1.0.2k-fips 26 Jan 2017
新建yml文件
docker-compose.yml是docker-compose啟動(dòng)的默認(rèn)文件
version: "3.1"
services:
react:
build:
context: "./react-express"
dockerfile: Dockerfile
depends_on:
- express
ports:
- "8086:80"
mysql:
image: mysql:5.7
container_name: mysql5
ports:
- "8087:3306"
environment:
MYSQL_ROOT_PASSWORD: 123456
MYSQL_DATABASE: "blog"
volumes:
- "/data/docker-data/docker_mysql/conf:/etc/mysql/conf.d"
- "/data/docker-data/docker_mysql/logs:/logs"
- "/data/docker-data/docker_mysql/data:/var/lib/mysql"
express:
build:
context: "./express-mysql"
dockerfile: Dockerfile
ports:
- "8088:3000"
depends_on:
- mysql
設(shè)置完成 yml 文件，執(zhí)行啟動(dòng)命令
docker-compose up # 或者 后臺(tái)啟動(dòng) docker-compose up -d
docker-compose ps
Name Command State Ports
----------------------------------------------------------------------------------------------------------------
compose_express_1 docker-entrypoint.sh /bin/ ... Up 0.0.0.0:8088->3000/tcp,:::8088->3000/tcp
compose_react_1 /docker-entrypoint.sh ngin ... Up 0.0.0.0:8086->80/tcp,:::8086->80/tcp
mysql5 docker-entrypoint.sh mysqld Up 0.0.0.0:8087->3306/tcp,:::8087->3306/tcp, 33060/tcp
一個(gè)命令就可以啟動(dòng)多個(gè)容器，并且組織好容器之間的依賴關(guān)系。
繼續(xù)優(yōu)化
創(chuàng)建前端鏡像存在的問(wèn)題.
每次打包前端鏡像時(shí)，需要先完成 build 的階段，也就是前端編譯的過(guò)程。該過(guò)程其實(shí)也可以自動(dòng)處理。
方案1:使用shell執(zhí)行
在項(xiàng)目目錄下創(chuàng)建 start.sh 文件, 將前端編譯的過(guò)程放到外部node環(huán)境【jenkins、或者服務(wù)器】執(zhí)行。
#!/bin/bash cd react-express yarn run build cd .. docker-compose up -d mysql -hlocalhost -P8087 -uroot -p123456 <<EOF use blog; source ./init.sql; quit EOF
方案2:采用鏡像多階段構(gòu)建
思路：將編譯過(guò)程放到node環(huán)境中，打包出來(lái)build目錄，然后將build目錄拷貝到后邊鏡像內(nèi)。
新建一個(gè)Dockerfile.build文件。
# 第一階段，先對(duì)前端項(xiàng)目進(jìn)行編譯打包 FROM node:16.11.0 AS nodeapp COPY ./ /app WORKDIR /app RUN yarn && yarn build #多階段構(gòu)建，最終會(huì)以最后的鏡像作為基礎(chǔ)鏡像 # 第二階段，將打包的數(shù)據(jù)拷貝到后邊鏡像內(nèi)，并創(chuàng)建nginx鏡像 FROM nginx COPY --from=nodeapp /app/build /usr/share/nginx/html COPY ./react-express.conf /etc/nginx/conf.d WORKDIR /usr/share/nginx/html EXPOSE 80 # 啟動(dòng)ngnix CMD ["nginx", "-g", "daemon off;"]
然后同步修改下docker-compose.yml文件
version: "3.1"
services:
react:
build:
context: "./react-express"
dockerfile: Dockerfile.build
depends_on:
- express
ports:
- "8086:80"
mysql:
image: mysql:5.7
container_name: mysql5
ports:
- "8087:3306"
environment:
MYSQL_ROOT_PASSWORD: 123456
MYSQL_DATABASE: "blog"
volumes:
- "/data/docker-data/docker_mysql/conf:/etc/mysql/conf.d"
- "/data/docker-data/docker_mysql/logs:/logs"
- "/data/docker-data/docker_mysql/data:/var/lib/mysql"
express:
build:
context: "./express-mysql"
dockerfile: Dockerfile
ports:
- "8088:3000"
depends_on:
- mysql
