前端的全栈混合之路Meteor篇:容器化开发环境下的meteor工程架构解析

本文主要介绍容器化meteor工程的目录架构解析,之前的文章中浅浅提到过一些:前端的全栈混合之路Meteor篇:开发环境的搭建 -全局安装或使用docker镜像-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/m0_38015699/article/details/142730928?spm=1001.2014.3001.5501

前端的全栈混合之路Meteor篇:3.0新版本介绍-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/m0_38015699/article/details/142672510?spm=1001.2014.3001.5501

1 工程准备

1.1 创建工程目录

使用git初始化一个项目,创建如下的文件,接下来将逐一解析

2.2 准备容器环境定义文件

使用docker compose插件运行容器,对于本地开发来说是更轻便的选择。

docker-compose.yml文件

version: '3'services:meteor:# [a] 使用镜像 geoffreybooth/meteor-base:{version}image: geoffreybooth/meteor-base:3.0.2ports:# [b] 本地端口:容器端口- '3000:3000'volumes:- "../:/home/project"env_file:- ../.env.dev# 进入app目录# 检查目录app是否存在# 不存在则创建项目 meteor create app --template typescript# 存在则进入目录并运行 meteorcommand:- bash- -c- |cd /home/projectif [ ! -d "/home/project/app" ]; then# [c] 创建项目 - 可修改模板,默认为 --typescript 支持 --bare , --apollo , --react , --vue, --full, --minimal, --sveltemeteor create app --typescriptficd /home/project/appmeteor run

1.3 环境变量-配置文件

.env.dev

APP_ROOT_URL=http://localhost:3000
TZ=Asia/Shanghai

1.4 启动容器开发环境

cd dev
docker compose up

2 初始化工程(首次启动)

2.1 修改环境变量

.env.dev文件解析:

1. APP_ROOT_URL 用于配置对外暴露服务的访问url,如果只是本机测试可使用localhost,不然需要设置成本机ip或者域名等

2. TZ 用于配置时区,以保证Date相关的字符串化可读性更高,不然处理不好可能获得的时间并不是东八区的

2.2 修改容器配置

配置的点见docker-compose.yml文件 ,注释部分的[a].[b].[c]

[a]: 用于配置使用的镜像以及版本,可以修改版本号来使用不同的meteor版本,一般不用修改,但是如果你在2025年或以后的时间阅读本文,还是建议修改下,格式就是 geoffreybooth/meteor-base:{version} 具体的版本号可以在这里查询:geoffreybooth/meteor-base Tags | Docker Hub

[b]: 本地端口指的是宿主机的端口,容器端口就是容器内的meteor应用监听的端口,这个映射就是在访问宿主机的端口时,将请求转发到容器内,实现服务的对外暴露。一般修改本地端口就可以了,容器内的端口是独立的、各个容器不会冲突所以不需要修改。但是主机端口可能会出现冲突,于是乎就需要改这个映射的端口了,注意不要改错了。

[c]: 项目创建的模板修改,初始化时 if [ ! -d "/home/project/app" ]; then 下面的代码会执行,因为此时还没有app目录,会使用模板应用来创建一个新的meteor项目,具体的参数可以查看项目,个人推荐是使用typescript,然后默认前端是用的react,你也可以加一个--vue来使用vue的前端。但个人还是建议用typescript,同时前端用于做管理平台一类的,如果是面向普通应用或者混合开发,虽然meteor可以胜任,但实际生产还是不太推荐的-除非探索性的赶时间的项目

2.3 启动容器

修改好配置之后,后续就不需要配置了,但是不同的设备还是有必要修改下.env.dev文件的。

这个过程会比较长,因为需要创建项目,下载依赖,以及编译构建前后端+数据库的准备。

3 工程架构解析

3.1 就绪的工程目录

项目代码默认在app下面,.meteor下面是meteor的包配置等,client是前端的代码,imports是模块代码(一般前后端共用的),server是后端独有的代码和入口文件。

package.json里有meteor的入口文件配置:

"meteor": {"mainModule": {"client": "client/main.tsx","server": "server/main.ts"},"testModule": "tests/main.ts"}

3.2 前端代码

如下图所示,client目录的代码是纯前端运行的部分,一般放个入口文件就可以了。当然还可以包含纯前端组件(无业务的那些)。

3.3 共享模块

imports下面用于存储模块文件,可以根据文件类型或者特性分成多个子目录。个人推荐是根据特性来,但比较小的项目,基于文件类型来划分也是不错的。

 然后在不同的入口文件引入这些文件导出的功能-函数、状态等就可以了。

最好是遵循一个准则:将业务和通用功能区分开,哪怕很多时候会变得比较繁琐,但增加一层会相应的增加灵活性,以及提升项目迁移时的可复用度。

3.4 后端入口

后端入口默认是一个main.ts,这也是应用启动时加载的文件,在这里一般注册方法、注册发布源、做一些初始化的工作,或者把类似的功能放在这个目录的其它文件。虽然也可以放在imports下面,但有时候引用错误(例如很多api是浏览器没有的,有一些接口又是nodejs没有的就会报错,而每次用Meteor.isServer判断又比较繁琐),所以还是推荐纯后端运行的功能,全部放在这个目录下面

3.5 .meteor特有目录解析

.meteor目录下没是基于Meteor创建项目特有的目录,local是一些缓存、数据库、工具的缓存地址,已经默认被gitignore的。

finished-upgraders是工具维护的版本升级文件,.id是一个独特的项目文件,便于云上快速部署。

packages是使用的meteor包文件(meteor有类似npm的功能,由于它出现的比较早,以前的npm并不像现在这样)。

release是meteor的版本号,不建议修改,而是使用meteor upgrade来操作比较好一点

4  最佳实践

  • 纯后端代码放在server目录
  • 纯前端代码放在client目录
  • 前后端可共享的数据结构 - 数据集、状态、工具函数放在imports
  • 使用docker简化meteor工程开发环境准备

5 小结

    本文主要是详细的介绍了使用docker创建meteor项目的准备工作和步骤,并解析了基于容器化的meteor项目架构,介绍了一下最佳实践。对于刚入门的新人来说,了解到这里就差不多了,暂不需要深入了解local、docker配置,只需要用文中提供的模板即可,希望多动手练习,有任何问题欢迎反馈。工程目录也放在git库dockerized:一些类容器化实现的前后端工程模板 - GitCode

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/55201.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Trulens框架】用TruLens 自动化 RAG 应用项目评估测试

前言: 什么是Trulens TruLens是面向神经网络应用的质量评估工具,它可以帮助你使用反馈函数来客观地评估你的基于LLM(语言模型)的应用的质量和效果。反馈函数可以帮助你以编程的方式评估输入、输出和中间结果的质量,从而…

【动态规划】完全背包问题应用

完全背包问题应用 1.零钱兑换2.零钱兑换 II3.完全平方数 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励,我们一起努力吧!😃😃 1.零钱兑换 题目链接: 3…

Github 优质项目推荐(第七期)

文章目录 Github优质项目推荐 - 第七期一、【LangGPT】,5.7k stars - 让每个人都成为提示专家二、【awesome-selfhosted】,198k stars - 免费软件网络服务和 Web 应用程序列表三、【public-apis】,315k stars - 免费 API四、【JeecgBoot】&am…

JVM(HotSpot):直接内存及其使用建议

文章目录 一、什么是直接内存?二、特点三、使用案例四、直接内存的管理 一、什么是直接内存? Direct Memory:系统内存 普通IO,运行原理图 磁盘到系统内存,系统内存到jvm内存。 NIO,运行原理图 划分了一块…

结合seata和2PC,简单聊聊seata源码

当前代码分析基于seata1.6.1 整体描述 整体代码流程可以描述为 TM开启全局事务,会调用TC来获取XID。TC在接收到通知后,会生成XID,然后会将当前全局事务保存到global_table表中,并且返回XID。在获取到XID后,会执行业务…

数据结构与算法JavaScript描述练习------第11章图和图算法

1. 编写一个程序&#xff0c;测试广度优先和深度优先这两种图搜索算法哪一种速度更快。请使用不 同大小的图来测试你的程序。 function Graph(v) {this.vertices v;this.edges 0;this.adj [];this.marked [];this.edgeTo [];for (var i 0; i < this.vertices; i) {thi…

MATLAB中sscanf函数用法

目录 语法 说明 示例 将字符向量转换为数值 转换文本和调整输出数组大小 统计在文本中找到的元素数目 显示错误消息 返回最后一个扫描位置 匹配指定的字符 sscanf函数的功能是从字符串读取格式化数据。 语法 A sscanf(str,formatSpec) A sscanf(str,formatSpec,si…

selenium的IDE插件进行录制和回放并导出为python/java脚本(10)

Selenium IDE&#xff1a;Selenium Suite下的开源Web自动化测试工具&#xff0c;是Firefox或者chrome的一个插件&#xff0c;具有记录和回放功能&#xff0c;无需编程即可创建测试用例&#xff0c;并且可以将用例直接导出为可用的python/java等编程语言的脚本。 我们以chrome浏…

Android 自适应

一开始项目使用的是第三方框架 GitHub - JessYanCoding/AndroidAutoSize: &#x1f525; A low-cost Android screen adaptation solution (今日头条屏幕适配方案终极版&#xff0c;一个极低成本的 Android 屏幕适配方案). 但是会偶现&#xff0c;断电重启第一次&#xff0c;…

Flutter-发现局域网中的设备

前言 现在有一个需求&#xff1a;要能够获取到局域网中的遮阳帘设备。通过搜索发现flutter_mdns_plugin可以满足这个需求 Pub&#xff1a;flutter_mdns_plugin | Flutter package GitHub&#xff1a;https://github.com/terrabythia/flutter_mdns_plugin MDNS服务类型 要根据…

Vue3嵌套导航相对路径问题

有如下的页面设计&#xff0c;页面上方第一次导航&#xff0c;两个菜单&#xff0c;首页和新闻 点击新闻&#xff0c;内容里面嵌套一个左侧和右侧&#xff0c;左侧有4条新闻&#xff0c;点击某一条新闻&#xff0c;右侧显示详情 代码如下&#xff1a; ​ File Path: d:\hello\…

自感式压力传感器结构设计

自感式压力传感器的结构如图2-35 和图 2-36所示&#xff0c;分为变隙式、变面积式和螺管式三种&#xff0c;每种均由线网、铁心和衔铁三部分组成。 图2-35 自感式压力传感器的结构 1-线圈 2-铁心 3-衔铁 图2-36 螺管式 1-线图 2-铁心 3一衔铁 自感式压力传感器按磁路变化可…

QT的核心机制 对话框资源

案例 1、键盘按下w&#xff0c;s&#xff0c;a&#xff0c;d键分别为标签向上&#xff0c;下&#xff0c;左&#xff0c;右移动 鼠标按下获取本地坐标&#xff0c;全局坐标 鼠标双击获取本地坐标&#xff0c;全局坐标 鼠标移动获取本地坐标&#xff0c;全局坐标 让鼠标跟踪…

Midjourney零基础学习

Midjourney学习笔记TOP04 Midjourney的各种参数设置 Midjourney的用户操作界面没有醒目的工具栏、属性栏&#xff0c;所有的操作都是通过调用各种指令和参数进行的。 【MJ Version】 Midjourney在2023年3月份就已经更新到了V5版本&#xff0c;V5版本除了画质有所提升外&#…

interwirelessac9560感叹号,电脑无法连接wifi,无法搜索到wifi

interwirelessac9560感叹号 电脑无法连接wifi&#xff0c;无法搜索到wifi 原因 这可能是wifl模块出现了问题。 解决方案 1、winx 打开&#xff0c;选择【设备管理器】 2、选择网络适配器 右键打开wireless-AC&#xff0c;选择【卸载设备】。 3、关机2分钟后&#xff0c…

SpringBoot智慧外贸平台

专业团队&#xff0c;咨询就送开题报告&#xff0c;欢迎大家私信留言&#xff0c;联系方式在文章底部 摘 要 网络的广泛应用给生活带来了十分的便利。所以把智慧外贸管理与现在网络相结合&#xff0c;利用java技术建设智慧外贸平台&#xff0c;实现智慧外贸的信息化。则对于进…

数据结构-5.9.树的存储结构

一.树的逻辑结构&#xff1a; 二.双亲表示法(顺序存储)&#xff1a; 1.树中除了根结点外每一颗树中的任意一个结点都只有一个父结点(双亲结点)&#xff1b; 2.结点包括结点数据和指针&#xff1b; 3.上述图片中右边的顺序存储解析&#xff1a;比如A结点左边的0&#xff0c;就…

ASML业绩暴雷,股价一度跌超16%

KlipC报道&#xff1a;当地时间10月15日&#xff0c;阿斯麦&#xff08;ASML&#xff09;原定于周三公布的三季度业绩报告由于技术原因被短暂地提前公布&#xff0c;业绩报告显示&#xff0c;阿斯麦第三季度总净销售额75亿欧元&#xff0c;毛利率50.8%&#xff0c;净利润21亿欧…

社招高频面试题

1.单例模式 面试突击50&#xff1a;单例模式有几种写法&#xff1f; 2.Mybatis缓存机制 MyBatis的一、二级缓存查询关系 一级缓存是SqlSession级别&#xff0c;不能跨SqlSession共享&#xff0c;默认开启。 二级缓存是基于mapper namespace级别的&#xff0c;可以跨SqlSessi…

PetaLinux工程的常用命令——petalinux-create

petalinux-create&#xff1a;此命令创建新的PetaLinux项目或组件。 注&#xff1a;有些命令我没用过&#xff0c;瞎翻译有可能会翻译错了&#xff0c;像是和fpgamanager相关的部分。 用法: petalinux-create [options] <-t|--type <TYPE> <-n|--name <COMPONEN…