后端微服务云原生【免费下载链接】midway A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 项目地址https://gitcode.com/gh_mirrors/mi/midway点击查看免费下载Midway Hooks 提供了一套名为midwayjs/hooks-kit的全栈套件让前端开发者可以在同一个项目里同时编写浏览器端与 Node.js 服务端代码并通过一套统一的命令行hooks dev/hooks build/hooks start完成开发、构建与启动。本文以官方文档 hooks/fullstack.md 为主线完整讲解全栈套件的模板生态、CLI 用法与构建参数并结合仓库中的配置文档、部署文档和真实示例工程给出可直接落地的前后端一体化开发方案。全栈套件是什么在 Midway Hooks 的一体化方案中全栈套件Full Stack Kit指通过midwayjs/hooks-kit快速开发全栈应用的能力。它解决了传统前后端分离项目中最耗时的一环——前后端之间的通信胶水层。正如 intro.md 所介绍的一体化方案建立在标准 Midway 项目之上扩展出一层前端适配层项目中同时存在前端代码和 Node 代码。后端接口函数可以直接被前端导入并调用无需手写 Ajax 调用层即零 Api配合midwayjs/hooks的校验器还能低成本实现从前端到后端的静态类型安全与运行时安全。而midwayjs/hooks-kit全栈套件正是这一体验的载体hooks dev启动全栈应用hooks build打包全栈应用hooks start在服务端一键启动解决使用全栈应用时的后顾之忧。需要注意的是当前仓库的官方文档也在 intro.md 中提示一体化方案将逐步停止维护已有项目可以继续使用新建项目请谨慎选择。因此在评估是否选用全栈套件时请结合这一维护状态做出判断。开箱即用的模板官方文档说明目前提供了以下可以直接使用的全栈模板reactReact Vite 的全栈应用模板vueVue 的全栈应用模板prisma集成 Prisma ORM 的全栈应用模板这些模板可以在对应的 examples 目录中找到。本仓库中也有与之对应的、可直接运行的示例工程例如samples/react-functional-api一个可运行的 React (Vite) 项目演示src/server/api下的defineApi定义、前端直接导入服务端 API 定义、createClient客户端调用等能力samples/vue-functional-apiVue 版本的全栈示例目录结构src/server、src/web、vite.config.ts等与 React 示例一一对应。以 React 示例为例其目录组织方式如下摘自 samples/react-functional-api/README.mdsamples/react-functional-api/ package.json tsconfig.json vite.config.ts index.html src/ main.tsx server/ configuration.ts api/ user.api.ts web/ app.tsx api/ client.ts后端 API 集中在src/server/api前端页面逻辑在src/web两者在同一个工程内协作。在仓库根目录执行pnpm -C samples/react-functional-api install安装依赖再执行pnpm -C samples/react-functional-api dev即可启动一个内嵌 Midway HTTP 运行时的 Vite 开发服务器/api/*请求会交给src/server/api中真实的 Midway 路由处理。命令行界面hooks CLI在使用了midwayjs/hooks-kit的项目中可以通过 npm scripts 使用hooks可执行文件也可以通过npx hooks直接运行。通过脚手架创建的 Midway 全栈项目默认包含以下 npm scripts{ scripts: { dev: hooks dev, // 启动开发服务器 start: hooks start, // 启动生产服务器使用前请确保已运行 npm run build build: hooks build // 为生产环境构建产物 } }三个命令各司其职命令作用使用场景hooks dev启动开发服务器本地开发前后端热更新协同hooks start启动生产服务器部署上线使用前必须先执行npm run buildhooks build构建生产产物产出前后端合并后的可部署文件hooks start与hooks dev的关键区别在于运行环境dev面向开发迭代通常包含热重载与更宽松的日志start直接运行构建后的产物因此文档特别强调使用前请确保已运行npm run build。这要求生产发布流程遵循先 build、后 start的顺序。命令行参数与 hooks build --help使用命令行时可以通过命令行参数向hooks传入选项具体选项可以通过--help查看。官方文档以hooks build --help为例hooks build --help输出Usage: $ hooks build [root] Options: --outDir dir [string] output directory (default: dist) --clean [boolean] clean output directory before build (default: false) -h, --help Display this message对以上参数逐一说明[root]可选的构建根目录位置参数。缺省时使用当前目录即从调用命令所在的项目根目录开始构建。--outDir dir输出目录类型为 string默认值为dist。构建产物会写入该目录。这与项目配置中的build.outDir配置项对应默认同为./dist命令行参数优先于配置文件。--clean布尔开关默认值为false。置为true时在构建前清空输出目录避免旧的构建产物残留造成污染。-h, --help显示帮助信息。同理hooks dev与hooks start也支持通过--help查看各自可用的选项。在编写 CI/CD 脚本时建议先运行一次--help以确认当前安装版本实际支持的参数集合避免因版本差异导致参数失效。通过 midway.config.ts 配置全栈项目全栈套件的项目配置集中在项目根目录的midway.config.ts中。根据 config.md 的说明核心配置项如下配置项类型说明sourcestring配置后端根目录。纯服务接口项目默认为./src全栈应用默认为./src/apiroutesRouteConfig[]启用文件系统路由并配置默认为undefineddev.ignorePatternIgnorePattern配置全栈应用本地开发时哪些请求应被忽略、不进入服务端处理build.outDirstring全栈应用的输出目录默认为./distviteViteConfig仅在使用import { defineConfig } from midwayjs/hooks-kit时可用配置全栈应用下 Vite 的配置其中vite配置项是前端工程能力的入口。例如为 React 全栈应用注册vitejs/plugin-react插件import react from vitejs/plugin-react; import { defineConfig } from midwayjs/hooks-kit; export default defineConfig({ vite: { plugins: [react()], }, });如果项目是纯接口项目无前端因为需要在生成环境读取配置应使用 JavaScript 配置文件文件名为midway.config.js这是文档中特别强调的一点。构建产物结构前端与后端的落点理解全栈套件的构建产物结构是正确部署的前提。根据 deploy.md全栈套件项目默认的构建目录为dist其中dist/_client前端静态资源目录HTML、JS、CSS、图片等dist/_serve后端服务入口其余目录下的*.js编译后的后端业务代码与配置。一份典型的构建产物布局如下dist ├── _client │ ├── assets │ │ ├── index.85bb4f15.js │ │ ├── index.b779b14d.css │ │ └── vendor.346bc0da.js │ ├── index.html │ ├── logo.png │ └── manifest.json ├── _serve │ └── index.js ├── book.js ├── configuration.js ├── date.js ├── midway.config.js └── star.js这就对应了hooks build --outDir的默认值dist构建命令将前后端统一产出到该目录部署时只需上传整个dist目录即可。三种部署模式与 CDN 集成基于上述产物结构deploy.md 给出了三种由易到难的一体化部署模式前后端部署在同一服务器全栈套件默认模式将dist产物整体上传服务器后启动即可。最简单但静态资源不在 CDN跨地域访问速度不稳定。静态资源部署至 CDN后端托管 HTML 并提供接口需要自行将_client目录下的静态资源上传 CDN同时保留_client/index.html供后端托管。可通过vite.base指定静态资源的公共域名import react from vitejs/plugin-react; import { defineConfig } from midwayjs/hooks-kit; export default defineConfig({ vite: { plugins: [react()], base: https://cdn.example.com, }, });设置后页面访问时静态资源会指向 CDN 地址。静态资源在 CDNHTML 由单独服务托管后端仅提供接口需要禁用全栈套件默认的 index.html 托管能力使构建时不生成 HTML 托管函数仅提供 API 服务import { defineConfig } from midwayjs/hooks-kit; export default defineConfig({ static: false, });随后在 CI/CD 中对三类产物分别处理index.html部署至 Nginx / CDN 等托管服务静态资源部署至 OSS 等 CDN 加速服务API 服务部署至服务器并可配置https://example.com/api等反向代理路径。在本仓库中实践全栈开发本仓库的 samples/react-functional-api 是理解全栈套件运行时协作机制的绝佳入口。它的 vite.config.ts 展示了全栈开发的两类关键插件import { defineConfig } from vite; import react from vitejs/plugin-react; import { apiPlugin } from midwayjs/web-bridge/vite; import { devPlugin } from midwayjs/mock/vite; export default defineConfig({ build: { outDir: dist/web, }, plugins: [ devPlugin({ appDir, baseDir, basePath }), react(), apiPlugin({ root, apiDir, target: both }), ], });devPlugin在开发环境下把 Midway HTTP 运行时嵌入 Vite/api/*请求直接进入服务端路由处理apiPlugin将 API 定义接入 Vite 构建链路target: both意味着 CSR 与 SSR 构建可以共用同一套 API 导入方式。该示例的运行说明中还有几个与部署决策直接相关的提示客户端调用默认以/api为basePath后端是真实的 Midway Koa 应用如果后端包含 Redis / MQ / WebSocket 等长连接建议将后端独立运行再由 Vite 代理/api。这些细节与上文三种部署模式的判断标准相互印证可作为搭建生产环境时的参考。小结midwayjs/hooks-kit全栈套件通过统一的hooksCLI 把开发dev— 构建build— 启动start串成一条完整链路hooks build支持--outDir与--clean参数控制产物输出midway.config.ts中的source、build.outDir、vite、static等配置决定了前后端的组织方式与部署形态dist/_client与dist/_serve的分工则明确了 CDN 与服务器的职责边界。结合本仓库的 react/vue 示例工程开发者可以快速搭建并验证自己的全栈应用。继续深入可参考hooks/intro.md一体化方案总览与模板创建、hooks/config.md全部配置项说明、hooks/deploy.md三种部署模式与 CI/CD 工作流。赞分享后端微服务云原生【免费下载链接】midway A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 项目地址https://gitcode.com/gh_mirrors/mi/midway点击查看免费下载相关推荐Midway Hooks 全栈套件实战用 midwayjs/hooks-kit 构建前后端一体化应用Midway Hooks 全栈套件实战用 midwayjs/hooks kit 构建前后端一体化应用 在 Midway Hooks 体系中全栈套件Ful后端微服务云原生Midway Hooks 全栈套件实战指南使用 midwayjs/hooks-kit 快速构建前后端一体化应用Midway Hooks 全栈套件实战指南使用 midwayjs/hooks kit 快速构建前后端一体化应用 本文以 Midway 官方文档《Full s后端微服务云原生掌握full-stack-fastapi-postgresql前端架构复合组件与自定义Hooks设计模式详解掌握full stack fastapi postgresql前端架构复合组件与自定义Hooks设计模式详解 full stack fastapi postg后端前端认证鉴权上一篇PermissionsDispatcher 迁移指南从 2.x 到 4.x 与 Maven Central 的完整升级路径下一篇Modern JavaScript Tutorial彻底理解旧式变量声明 var块级作用域、变量提升与 IIFE 溯源创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考