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

news2024/11/22 21:56:56

本文主要介绍容器化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.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

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.coloradmin.cn/o/2201046.html

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

相关文章

【LeetCode HOT 100】详细题解之回溯篇

【LeetCode HOT 100】详细题解之回溯篇 回溯法的理论基础回溯法解决的问题理解回溯法回溯法模板 46 全排列思路代码 78 子集思路代码 17 电话号码的字母组合思路代码 39 组合总和思路代码 22 括号生成思路代码 79 单词搜索思路代码 131 分割回文串思路代码 51 N皇后思路代码 回…

教程:宏基因组数据分析教程

Orchestrating Microbiome Analysis Orchestrating Microbiome Analysis是一套包含宏基因组各种数据分析的教程,非常安利大家学习。 16S-analysis 16S-analysis是一本用于扩增子16s等微生物数据分析的教程,很适合新手入门学习。 Introduction to micro…

Android targetSdkVersion 升级为34 问题处理

原因是发布到GooglePlay遭到拒绝,需要最低API level为34。之前为31,感觉还挺高的,但是GooglePlay需要的更高。 记录下处理问题: 1.升级gradle版本为8.0.2 之前是: classpath com.android.tools.build:gradle:7.1.0-…

Git进行版本控制操作流程

目录 一、初始化仓库 操作流程 二、添加到缓存区 三、提交到版本库 四、推送至远程仓库 生成SSH密钥 将本地库中内容推送至已经创建好的远程库 推送 推送错误 第一种: 五、克隆 克隆整个项目 拉去最新代码 六、分支 1. 初始化仓库或克隆远端仓库 2…

新赚米渠道,天工AI之天工宝典!

新赚米渠道,天工AI之天工宝典! 引言 随着人工智能和数字创作工具的发展,内容创作的门槛不断降低,为普通用户提供了更多的赚钱机会。在这样的背景下,天工AI应运而生,凭借其强大的创作能力和最新更新的“天…

「Ubuntu」文件权限说明(drwxr-xr-x)

我们在使用Ubuntu 查看文件信息时,常常使用 ll 命令查看,但是输出的详细信息有些复杂,特别是 类似与 drwxr-xr-x 的字符串,在此进行详细解释下 属主:所属用户 属组:文件所属组别 drwxr-xr-x 7 apps root 4…

MySql 之 Binglog 复制

复制是一种将数据从一个 MySQL 数据库服务器异步复制到另一个的技术。使用 MySQL 复制选项,您可以复制所有数据库、选定的数据库甚至选定的表,具体取决于您的使用情况。 前提条件 确保在源服务器上启用了二进制日志记录。确保复制配置中的所有服务器都有…

《云原生安全攻防》-- K8s攻击案例:从Pod容器逃逸到K8s权限提升

在本节课程中,我们将介绍一个完整K8s攻击链路的案例,其中包括了从web入侵到容器逃逸,再到K8s权限提升的过程。通过以攻击者的视角,可以更全面地了解K8s环境中常见的攻击技术。 在这个课程中,我们将学习以下内容&#…

使用 Go 和 Gin 框架构建简单的用户和物品管理 Web 服务

使用 Go 和 Gin 框架构建简单的用户和物品管理 Web 服务 在本项目中,我们使用 Go 语言和 Gin 框架构建了一个简单的 Web 服务,能够管理用户和物品的信息。该服务实现了两个主要接口:根据用户 ID 获取用户名称,以及根据物品 ID 获…

spring boot itext7的生成一个pdf(hello,world),并且相关一些简单的使用方法及相关说明

1、我们经常会碰到生成Pdf的场景,比如说有很多题目,又比如说来个质检的报告,我们都需要导出为pdf,那这种情况有二种方法,一种是通过报表来实现,一种就是通过itext来生成。一般我们会通过报表来直接导出pdf。…

Liquid AI与液态神经网络:超越Transformer的大模型架构探索

1. 引言 自2017年谷歌发表了开创性的论文《Attention Is All You Need》以来,基于Transformer架构的模型迅速成为深度学习领域的主流选择。然而,随着技术的发展,挑战Transformer主导地位的呼声也逐渐高涨。最近,由麻省理工学院(M…

简述何为多态

1.多态的概念 多态是什么?首先我们从概念讲起,简单来讲,多态就是多种形态,当你要去完成同一件事情的时候,不同的人去完成这件事情会有不同的结果. 比如在买票的时候,如果是成人去买票,则会买到成人票;如果是学生,则会买到学生票. 2.多态的实现以及构成条件 首先,多态的实现…

【Flutter、Web——前端个人总结】分享从业经历经验、自我规范准则,纯干货

前言 hi,正式接触web前端已经经过了两年的时间,从大学的java后端转型到web前端,再到后续转战Flutter,逐渐对前端有了一些心得体会,其实在当下前端的呈现形式一直在变化,无论你是用原生、还是web还是混编的…

Django 1.2标准日志模块出现奇怪行为时的解决方案

在 Django 1.2 中,标准日志模块有时会出现意想不到的行为,例如日志消息未按预期记录、日志级别未正确应用或日志格式错乱等。这些问题可能源于日志配置不当、日志模块被多次初始化、或日志模块被其他包覆盖等原因。下面是一些常见问题的排查方法和解决方…

力扣21~25题

21题(简单): 分析: 按要求照做就好了,这种链表基本操作适合用c写,python用起来真的很奇怪 python代码: # Definition for singly-linked list. # class ListNode: # def __init__(self, v…

二、MySQL的数据目录

文章目录 1. MySQL8的主要目录结构1.1 数据库文件的存放路径1.2 相关命令目录1.3 配置文件目录 2. 数据库和文件系统的关系2.1 查看默认数据库2.2 数据库在文件系统中的表示2.3 表在文件系统中的表示2.3.1 InnoDB存储引擎模式2.3.2 MyISAM存储引擎模式 2.4 小结 1. MySQL8的主要…

宝塔docker中如何修改应用配置文件参数

今天在宝塔docker安装了kkfileview,相修改应用里的application.properties,却找不到在哪,如何修改? 下面教大家应用找文件修改。 docker安装好对应容器后,是这样 在这里是找不到对应修改的地方,其实docker…

Linux WIFI 驱动实验

直接参考【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.81 本文仅作为个人笔记使用,方便进一步记录自己的实践总结。 WIFI 的使用已经很常见了,手机、平板、汽车等等,虽然可以使用有线网络,但是有时候很多设备存在布线困难的情况&…

Windows10的MinGW安装和VS Code配置C/C++编译环境

1. MinGW下载安装 首先需要说明的是VS Code是一个编辑器,而不是编译器。‌ 编辑器和编译器是有很明显的区别 1.1 编辑器和编译器区别 编辑器‌是一种用于编写和编辑文本的应用软件,主要用于编写程序的源代码。编辑器提供基本的文本编辑功能,…

面试题:Redis(三)

1. 面试题 背景 问题,上面业务逻辑你用java代码如何写? 2. 缓存双写一致性谈谈你的理解? 3. 双检加锁策略 多个线程同时去查询数据库的这条数据,那么我们可以在第一个查询数据的请求上使用一个 互斥锁来锁住它。 其他的线程走到这…