玩转 Docker 部署

前言

相信很多人都很头疼 DockeR 的部署，我自己也是。

最近发现一个很有意思的现象：一个人想学某样技术的时候，当学会了之后，但是这时出现了一个问题需要学习另一门技术时，无论这个人前面学得多么刻苦，用功，到这一步有 99% 的概率都会放弃。我愿称这种现象为 “学习窗口&Rdquo;。

写一个网站、学会 Vue.js 是很多人的“学习窗口&Rdquo;，只要离开了这个“学习窗口&Rdquo;，他们就不想学了：我都学这么多了，草，怎么最后还要学部署啊。

所以，这篇文章就跟大家分享一下关于 DockeR 部署的那些事。

需求

按照国际惯例，先从一个非常简单的需求入手，这个需求只完成几件事：

显示待办事项列表 + 添加一个待办事项

记录网站的访问量

上面就是一个经典到不能再经典的 TODo List 应用。

分析一下需求：待办事项列表需要用到 数据库 完成，记录网站访问量则要用到高速读取的 缓存 来完成。

技术选型

目前我前端技术栈是 React.js，所以前端用 React.js。

由于 ExpReSS 有自己的脚手架，所以，后端采用 ExpReSS。

数据库方面，因为我自己用的是 M1 的 Mac，所以 MySQL 镜像无法拉取，暂时用 MaRiadb 来代替。

缓存大家都很熟悉了，直接用 Redis 搞定。

前端实现

关于前端的实现非常简单，发请求使用 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[]>([]);    // 添加 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 (