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

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。

 本文主要介绍容器化meteor工程的目录架构解析

1 工程准备

1.1 创建工程目录

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

image.gif 编辑

2.2 准备容器环境定义文件

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

docker-compose.yml文件

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

image.gif

1.3 环境变量-配置文件

.env.dev

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

image.gif

1.4 启动容器开发环境

cd dev
docker compose up

image.gif

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 就绪的工程目录

image.gif 编辑

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

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

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

image.gif

3.2 前端代码

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

image.gif 编辑

3.3 共享模块

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

image.gif 编辑

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

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

3.4 后端入口

image.gif 编辑

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

3.5 .meteor特有目录解析

image.gif 编辑

.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

相关文章
|
1月前
|
机器学习/深度学习 文字识别 监控
安全监控系统:技术架构与应用解析
该系统采用模块化设计,集成了行为识别、视频监控、人脸识别、危险区域检测、异常事件检测、日志追溯及消息推送等功能,并可选配OCR识别模块。基于深度学习与开源技术栈(如TensorFlow、OpenCV),系统具备高精度、低延迟特点,支持实时分析儿童行为、监测危险区域、识别异常事件,并将结果推送给教师或家长。同时兼容主流硬件,支持本地化推理与分布式处理,确保可靠性与扩展性,为幼儿园安全管理提供全面解决方案。
67 3
|
25天前
|
弹性计算 Java Maven
从代码到容器:Cloud Native Buildpacks技术解析
Cloud Native Buildpacks(CNB)是一种标准化、云原生的容器镜像构建系统,旨在消除手动编写Dockerfile,提供可重复、安全且高效的构建流程。它通过分层策略生成符合OCI标准的镜像,实现应用与基础镜像解耦,并自动化依赖管理和更新。阿里云应用管理支持通过CNB技术一键部署应用至ECS,简化构建和运行流程。
|
2月前
|
机器学习/深度学习 缓存 自然语言处理
深入解析Tiktokenizer:大语言模型中核心分词技术的原理与架构
Tiktokenizer 是一款现代分词工具,旨在高效、智能地将文本转换为机器可处理的离散单元(token)。它不仅超越了传统的空格分割和正则表达式匹配方法,还结合了上下文感知能力,适应复杂语言结构。Tiktokenizer 的核心特性包括自适应 token 分割、高效编码能力和出色的可扩展性,使其适用于从聊天机器人到大规模文本分析等多种应用场景。通过模块化设计,Tiktokenizer 确保了代码的可重用性和维护性,并在分词精度、处理效率和灵活性方面表现出色。此外,它支持多语言处理、表情符号识别和领域特定文本处理,能够应对各种复杂的文本输入需求。
244 6
深入解析Tiktokenizer:大语言模型中核心分词技术的原理与架构
|
2月前
|
存储 机器学习/深度学习 应用服务中间件
阿里云服务器架构解析:从X86到高性能计算、异构计算等不同架构性能、适用场景及选择参考
当我们准备选购阿里云服务器时,阿里云提供了X86计算、ARM计算、GPU/FPGA/ASIC、弹性裸金属服务器以及高性能计算等多种架构,每种架构都有其独特的特点和适用场景。本文将详细解析这些架构的区别,探讨它们的主要特点和适用场景,并为用户提供选择云服务器架构的全面指南。
362 18
|
2月前
|
算法 前端开发 定位技术
地铁站内导航系统解决方案:技术架构与核心功能设计解析
本文旨在分享一套地铁站内导航系统技术方案,通过蓝牙Beacon技术与AI算法的结合,解决传统导航定位不准确、路径规划不合理等问题,提升乘客出行体验,同时为地铁运营商提供数据支持与增值服务。 如需获取校地铁站内智能导航系统方案文档可前往文章最下方获取,如有项目合作及技术交流欢迎私信我们哦~
124 1
|
3月前
|
存储 人工智能 并行计算
2025年阿里云弹性裸金属服务器架构解析与资源配置方案
🚀 核心特性与技术创新:提供100%物理机性能输出,支持NVIDIA A100/V100 GPU直通,无虚拟化层损耗。网络与存储优化,400万PPS吞吐量,ESSD云盘IOPS达100万,RDMA延迟<5μs。全球部署覆盖华北、华东、华南及海外节点,支持跨地域负载均衡。典型应用场景包括AI训练、科学计算等,支持分布式训练和并行计算框架。弹性裸金属服务器+OSS存储+高速网络综合部署,满足高性能计算需求。
|
7月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
536 14
|
7月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
112 0
|
7月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
193 6
|
7月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
224 1

推荐镜像

更多