Ontology Playground 部署指南Azure Static Web Apps 完整配置教程【免费下载链接】Ontology-PlaygroundFree, open-source web app for learning about ontologies and Microsoft Fabric IQ. Explore a catalogue of pre-built ontologies, design your own visually, export as RDF/XML, and share interactive diagrams. Zero backend, fully static.项目地址: https://gitcode.com/GitHub_Trending/on/Ontology-PlaygroundOntology Playground是一款免费开源的本体论Ontology学习 Web 应用可帮助你浏览预置本体目录、用可视化方式设计自己的本体、导出 RDF/XML 并分享交互式图表——且零后端、完全静态。本文将带你一步步完成Ontology Playground 部署把它发布到Azure Static Web Apps获得免费 HTTPS、全球 CDN 和 PR 预览环境等生产级能力。为什么选择 Azure Static Web Apps 部署Ontology Playground 是纯静态站点React Vite 构建天然适合托管在Azure Static Web Apps简称 SWA免费额度开发/生产计划免费个人学习项目零成本自带 HTTPS 与全球 CDN无需自己配置 Nginx 或对象存储PR 预览环境每次拉取请求自动创建一个隔离预览站点方便演示⚙️原生支持 Azure Functions项目中的 api/ 目录可一键部署为后端函数用于可选的 AI 生成功能部署前准备开始之前请确认你已经具备以下条件准备项说明Azure 账号个人即可Static Web Apps 有免费层Node.js ≥ 18本地构建验证用Git用于克隆仓库第一步克隆仓库并本地构建验证先把代码拉到本地确认构建流程没有问题再去 Azure 上部署git clone https://gitcode.com/GitHub_Trending/on/Ontology-Playground cd Ontology-Playground npm install npm run build构建成功后会生成build/目录——这是部署时的关键输出目录。可以在本地快速预览npm run preview⚠️ 注意Vite 默认输出目录是dist但本项目在 vite.config.ts 中已配置outDir: build后续在 Azure 上填写构建配置时不要填错。构建过程会依次执行两个编译脚本定义于 package.jsoncatalogue:build—— 将 catalogue/ 目录下的本体 RDF 文件编译为catalogue.jsonlearn:build—— 将 content/learn/ 的教程文章编译为learn.jsontsc -b vite build—— TypeScript 编译与 Vite 打包build:embed—— 额外构建可嵌入的组件版本第二步在 Azure 门户创建 Static Web App登录 Azure Portal搜索并进入Static Web Apps点击Create选择订阅和资源组填写应用名称将成为你的免费子域名在Origin页面关联你的代码仓库选择分支推荐main关键构建配置如下表配置项填写值说明Frameworks configVite让 Azure 自动推断构建命令App location/仓库根目录前端源码位置App build pathbuild与 vite.config.ts 中 outDir 一致API locationapi可选启用 AI 功能时必填点击Review create部署通常 2~3 分钟完成门户会分配一个*.azurestaticapps.net域名。第三步理解路由与安全配置项目根目录已包含 staticwebapp.config.json部署后会自动生效无需额外操作。它做了三件重要的事SPA 路由回退所有未匹配路径重写回index.html保证前端路由刷新不 404404 页面自定义 404 也返回index.html并返回 200 状态码安全响应头内置 CSP、X-Frame-Options: DENY、Referrer-Policy等提升生产环境安全性如果你要修改安全策略直接编辑该文件并推送即可下次部署自动生效。第四步可选开启 AI 本体生成功能Ontology Playground 内置一个可选的 AI 自然语言建本体功能后端位于 api/generate-ontology/依赖 Azure OpenAI。如果想启用它在 Azure 上创建Azure OpenAI资源获取 Endpoint 和 API Key在 Static Web Apps 的Settings → Environment variables中配置变量名说明VITE_ENABLE_AI_BUILDER设为true前端才会显示 AI 入口AZURE_OPENAI_ENDPOINTAzure OpenAI 资源端点AZURE_OPENAI_API_KEY对应的 API 密钥AZURE_OPENAI_DEPLOYMENT模型部署名默认gpt-4o-mini本地开发时可参考 api/local.settings.json.template 创建本地配置模板。 如果不需要 AI 功能保持默认即可——站点所有核心功能目录浏览、可视化设计、RDF 导出、学习课程完全无需后端。第五步验证部署与 PR 预览打开 Azure 分配的域名检查以下页面是否正常本体目录Catalogue能否加载预置本体可视化设计器Designer能否拖拽建模刷新任意子路由是否 404验证 SPA 回退PR 预览环境提交一个分支并发起 Pull RequestAzure 会自动生成一个独立的预览域名方便给同事或老师演示合并后生产环境自动重新部署常见问题排查 ️现象排查方法页面空白控制台 404检查 Azure 上 App build path 是否填了build不是dist静态资源加载失败确认Framework build command包含npm run build或手动填写完整命令AI 按钮不显示检查VITE_ENABLE_AI_BUILDER是否设为true并在环境变量变更后重新触发部署子路由刷新 404确认 staticwebapp.config.json 已被一并部署延伸阅读 docs/github-oauth-setup.md —— 配置 GitHub OAuth 实现一键提交本体到目录 docs/embed-guide.md —— 将本体组件嵌入到你自己的网页 docs/authoring-guide.md —— 本体创作指南 catalogue/official/ —— 官方教程本体宇宙咖啡店、电商、金融等场景按照以上五个步骤你只需要一条git clone、一次 Azure 门户配置就能把 Ontology Playground 以生产级标准上线。部署完成后无论是教学演示还是团队共建本体目录都可以直接把这个链接分享给任何人。【免费下载链接】Ontology-PlaygroundFree, open-source web app for learning about ontologies and Microsoft Fabric IQ. Explore a catalogue of pre-built ontologies, design your own visually, export as RDF/XML, and share interactive diagrams. Zero backend, fully static.项目地址: https://gitcode.com/GitHub_Trending/on/Ontology-Playground创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
