前端由 React 组成，后端由 Node 和 MongoDB 组成。

1. 创建 docker 网络:

docker network create goals-net

2. 创建 MongoDB 容器

docker run --name mongodb -d --rm --network goals-net mongo

3. 创建 Node 容器

3.1 创建image：

docker build -t goals-node .

3.2 创建容器：

docker run --rm -d -p 80:80 --network goals-net goals-node

4. 创建 React 容器：

4.1 创建 image:

 docker build -t goals-react .

4.2 创建容器：

docker run --name react-frontend -it --rm -d -p 3000:3000 goals-react

5. 代码中和 ip 有关的设置：

5.1 后端连 MongoDB 部分的代码：

这里 mongodb 是运行MongoDB的容器的名称。

mongoose.connect('mongodb://mongodb:27017/course-goals',(err) => {} else {app.listen(80);}}
);

5.2 react 与 node 通信的代码不需要修改

例如下面的代码段，localhost 不能改成 goals-backend，依然保持为 localhost, 原因是对于 react，只有使用 npm start 启动的开发服务器在容器中运行，其他代码在浏览器中运行。

useEffect(function () {async function fetchData() {setIsLoading(true);try {const response = await fetch("http://localhost/goals");const resData = await response.json();if (!response.ok) {throw new Error(resData.message || "Fetching the goals failed.");}setLoadedGoals(resData.goals);} catch (err) {setError(err.message ||"Fetching goals failed - the server responsed with an error.");}setIsLoading(false);}fetchData();}, []);

因为 react 代码在浏览器中运行，不在容器中运行，因此不需要指定 --network 选项，因为用不到。

后端 node 需要使用 --publish 发布端口号，因为前端代码不在容器中执行。

容器化一个简单的 Mern stack app相关推荐

一个简单的智能停车APP——抽屉式侧边栏
一个简单的智能停车APP 功能介绍代码详解总结功能介绍先展示效果图: 侧边栏由MaterialDesign(原质化设计)框架设计而成. 由DrawerLayout+NavigationView ...
Android——一个简单的记账本APP
一个简单的记账本APP 视频效果预览添加账目记录效果预览添加账目记录实现简述实现获取日期字符串时间戳转Date Date转星期获取时间 Switch控制显示和隐藏更改Switch样式 ...
使用Flutter编写一个简单的天气查询App
使用Flutter编写一个简单的天气查询App Flutter项目目录分析入口函数 home:主页面编写天气应用网络请求数据解析布局编写 Flutter里基础的Widget 上中下 Fl ...
Flutter for App——一个简单的BMI计算APP
一个简单的BMI计算APP 效果截图初始化布局顶部区域标题计算结果组合顶部区域背景中间区域输入框输入行计算按钮分界线组合中间区域底部区域页面组合 BMI计算 Toast弹 ...
如何制作一个简单的短视频 app
如果想制作一个简单的短视频 app,可以考虑以下步骤: 确定 app 的目标和功能:需要明确 app 的目标受众和提供的功能,以确定 app 的整体设计方向. 选择开发平台:根据自己的技术能力和预算选 ...
Flutter 实现一个简单的音视频App（一）
Flutter 实现一个简单的音视频App(一) 本文由动哒公众号(dongda_5g),QQ群(174353204)提供,欢迎关注获取技术支持,有任何问题群里都会回复. 在app中实现视频功能,是现 ...
【如何快速的开发一个简单的iOS直播app】(代码篇)
开篇([如何快速的开发一个完整的iOS直播app](原理篇) ) 好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金 ...
自己写的一个简单的android记事本app
自己写的一个简单的记事本app,效果如下: 一.首先是第一个界面的编写,最上面是一个TextView,中间是一个Linearlayout中嵌套一个listview布局,最下面是一个button.下面附 ...
一个简单的猜数字APP（一）
使用约束布局ConstraintLayout,郭霖大神的ConstraintLayout解析得到随机数字 [Java学习]几种常用类一些简单控件的使用[安卓初步]常用控件进入界面如上图,关键是 ...

容器化一个简单的 Mern stack app