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

本文主要先容容器化meteor工程的目录架构解析，之前的文章中浅浅提到过一些：前端的全栈混合之路Meteor篇：开发环境的搭建 -全局安装或使用docker镜像-CSDN博客

https://blog.csdn.net/m0_38015699/article/details/142730928?spm=1001.2014.3001.5501
前端的全栈混合之路Meteor篇：3.0新版本先容-CSDN博客

https://blog.csdn.net/m0_38015699/article/details/142672510?spm=1001.2014.3001.5501
1 工程准备

1.1 创建工程目录

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

2.2 准备容器环境定义文件

使用docker compose插件运行容器，对于当地开发来说是更轻巧的选择。
docker-compose.yml文件

1. version: '3'
3. services:
4.   meteor:
5.     # [a] 使用镜像 geoffreybooth/meteor-base:{version}
6.     image: geoffreybooth/meteor-base:3.0.2
7.     ports:
8.     # [b] 本地端口:容器端口
9.       - '3000:3000'
10.     volumes:
11.       - "../:/home/project"
12.     env_file:
13.       - ../.env.dev
14.     # 进入app目录
15.     # 检查目录app是否存在
16.     # 不存在则创建项目 meteor create app --template typescript
17.     # 存在则进入目录并运行 meteor
18.     command:
19.       - bash
20.       - -c
21.       - |
22.         cd /home/project
23.         if [ ! -d "/home/project/app" ]; then
24.         # [c] 创建项目 - 可修改模板，默认为 --typescript 支持 --bare , --apollo , --react , --vue, --full, --minimal, --svelte
25.           meteor create app --typescript
26.         fi
27.         cd /home/project/app
28.         meteor run

复制代码

1.3 环境变量-配置文件

.env.dev

1. APP_ROOT_URL=http://localhost:3000
2. TZ=Asia/Shanghai

复制代码

1.4 启动容器开发环境

1. cd dev
2. docker compose up

复制代码

2 初始化工程（首次启动）

2.1 修改环境变量

.env.dev文件解析：
1. APP_ROOT_URL 用于配置对外暴露服务的访问url，如果只是本机测试可使用localhost，否则必要设置本钱机ip或者域名等
2. TZ 用于配置时区，以包管Date相关的字符串化可读性更高，否则处理不好可能得到的时间并不是东八区的
2.2 修改容器配置

配置的点见docker-compose.yml文件 ，注释部门的[a]..[c]
[a]: 用于配置使用的镜像以及版本，可以修改版本号来使用差别的meteor版本，一样平常不消修改，但是如果你在2025年或以后的时间阅读本文，照旧建议修改下，格式就是 geoffreybooth/meteor-base:{version} 具体的版本号可以在这里查询：geoffreybooth/meteor-base Tags | Docker Hub
: 当地端口指的是宿主机的端口，容器端口就是容器内的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的入口文件配置：

1. "meteor": {
2.     "mainModule": {
3.       "client": "client/main.tsx",
4.       "server": "server/main.ts"
5.     },
6.     "testModule": "tests/main.ts"
7.   }

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。