数据可视化前端【免费下载链接】covid19東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website项目地址https://gitcode.com/gh_mirrors/co/covid19点击查看免费下载本篇技术指南以仓库 docs/es/FOR_DEVELOPERS.md 为主体系统讲解东京都 COVID-19 对策网站Tokyo COVID-19 Task Force website基于 Nuxt.js Vue 2 的开源项目的开发者上手路径从 Node.js 环境准备、Visual Studio Code 扩展配置到yarn、docker compose、Vagrant、Remote Containers 四种本地运行方式再到GENERATE_ENV环境检测机制与完整的分支/部署流程。读完本文你可以独立完成该项目的本地环境搭建、启动调试、环境识别与按分支规范提交代码。1. 开发环境准备1-1. 必备工具清单按官方文档要求开发该仓库需要准备以下应用。其中 Node.js 为必装项其余工具按你实际采用哪种运行方式选择性安装应用名称版本要求仅指明有要求的安装条件Node.js18.14.2 或更高必需Visual Studio Code—如果你使用 VS Code 开发yarn—当你使用yarn运行本项目时docker compose—当你使用docker compose运行本项目时Vagrant—当你使用Vagrant运行本项目时Node.js 版本要求可以从仓库根目录 package.json 的engines字段得到源码级印证engines: { node: 18.14.2 }这意味着低于 18.14.2 的 Node 版本在安装依赖或启动构建时可能报错务必先通过node -v确认版本。1-2. 用于 Visual Studio Code 的扩展如果你使用 VS Code 作为编辑器建议安装以下扩展扩展名安装条件ESLint任意情况下均建议安装Vetur任意情况下均建议安装提供.vue单文件组件的语法高亮与提示TSLint任意情况下均建议安装Debugger for Chrome任意情况下均建议安装用于浏览器端调试Remote Development当使用 VS Code Remote Containers 进行开发时安装注意使用 Remote Containers远程容器开发时ESLint 扩展仅在容器内部生效需要把它加入.devcontainer/devcontainer.json的extensions配置中详见本文第 2-4 节。2. 运行程序所有命令都应在工作副本的根目录即仓库根目录执行。2-1. 使用yarn2-1-1. 安装依赖# 安装依赖 $ yarn install2-1-2. 运行程序执行下述命令后访问 http://localhost:3000 即可查看开发中的站点。常规方式# 在 localhost:3000 提供带热重载的开发服务 $ yarn dev该命令实际执行的是见 package.jsondev: cross-env NODE_ENVdevelopment GENERATE_ENVdevelopment nuxt它会以development模式启动 Nuxt 开发服务器并开启 webpack 热重载HMR。仓库根目录 nuxt.config.ts 中还专门为 Docker 场景配置了watchers.webpack.poll true保证容器内文件变更能被监听。更快的方式禁用无障碍审计# 在 localhost:3000 提供带热重载的开发服务禁用 axe 无障碍审计 $ yarn dev-no-axeyarn dev-no-axe通过cross-env NODE_ENVdev-no-axe GENERATE_ENVdevelopment启动见 package.json与yarn dev的区别在于跳过无障碍accessibility审计从而显著加快本地服务器的响应速度。从源码看无障碍审计插件位于 plugins/axe.ts它按需动态引入vue-axe与axe-core/locales/ja.json日文语言包并作为 SSR 插件在 nuxt.config.ts 中注册。因此当你不关心无障碍扫描、只想快速看到页面效果时使用dev-no-axe是更优选择。2-1-3. 故障排查如何解决Cannot find module ****错误当出现Cannot find module ...报错时通常是依赖未正确安装或安装不完整。解决办法是重新构建依赖后再次运行程序$ yarn install $ yarn dev2-2. 使用docker compose2-2-1. 安装依赖并运行程序# 在 localhost:3000 提供带热重载的开发服务 $ docker compose up --build执行后同样访问 http://localhost:3000 查看效果。--build会在启动前重新构建镜像确保依赖与源码同步。仓库根目录提供了完整的两份容器配置Dockerfile基于node:18.14.2-alpine镜像先COPY package.json yarn.lock并执行yarn install再拷贝全部源码EXPOSE 3000并设置HOST 0.0.0.0最终以CMD [yarn, dev]启动开发服务。docker-compose.yml服务名为app容器名covid19将宿主 3000 端口映射到容器 3000并把当前目录挂载到/app同时用命名卷node_modules隔离容器内依赖避免宿主机与容器间依赖不一致。2-2-2. 故障排查如何解决Cannot find module ****错误停止程序后在容器内重新安装依赖$ docker compose run --rm app yarn install--rm表示执行完命令后自动移除临时容器app即 compose 文件中定义的服务名。安装完成后再docker compose up --build重新启动即可。2-3. 使用Vagrant2-3-1. 安装依赖并运行程序# 在 localhost:3000 提供带热重载的开发服务 $ vagrant upVagrant 方式适合在本地虚拟机中隔离开发环境。仓库根目录 Vagrantfile 定义了虚拟机镜像ubuntu/bionic64端口转发将虚拟机内 3000 端口转发到宿主127.0.0.1:3000VirtualBox Provider 分配 2048 MB 内存通过 vagrant_provision.sh 进行初始化配置使用privileged: false以普通用户权限执行。vagrant_provision.sh 的初始化流程包括安装g build-essential、通过 nodesource 安装 Node.js、全局安装yarn、把/vagrant源码复制到~/covid19并执行yarn install最后生成启动脚本并注册为 systemd 服务covid19.service常驻运行。启动脚本内部以HOST0.0.0.0 /usr/bin/yarn dev启动保证虚拟机内服务可被端口转发访问。2-4. 使用 Visual Studio Code 与远程容器Remote Containers开发2-4-1. 安装依赖并运行程序在 VS Code 左下角选择“Open Folder in Container”将本仓库根目录作为容器文件夹打开环境构建将自动开始。环境构建完成后访问 http://localhost:3000 即可查看开发中的程序。仓库根目录已包含容器开发配置 .devcontainer/devcontainer.json{ name: covid19, dockerComposeFile: [../docker-compose.yml], service: app, extensions: [dbaeumer.vscode-eslint], postCreateCommand: yarn install, workspaceFolder: /app, shutdownAction: stopCompose }可以看到它复用了仓库根目录的docker-compose.yml挂载app服务并在容器创建后自动执行yarn install。2-4-2. 注意事项如需修改容器配置请编辑.devcontainer/devcontainer.json更详细的devcontainer.json字段说明可参考 VS Code 官方“devcontainer.json reference”文档。“ESLint”扩展只在远程容器运行时生效如有需要请手动把它加入.devcontainer/devcontainer.json的extensions数组当前仓库已默认配置。详细的扩展管理流程可参考 VS Code 官方“Managing extensions”文档。重新构建开发环境时请执行左下角的“Rebuild Container”命令。3. 检测生产环境与其他环境在生产环境中process.env.GENERATE_ENV变量的值为production在其他环境中该变量的值为development。请在运行时使用该变量判断当前所处环境。该机制在 package.json 的脚本中有直接体现dev: cross-env NODE_ENVdevelopment GENERATE_ENVdevelopment nuxt, dev-no-axe: cross-env NODE_ENVdev-no-axe GENERATE_ENVdevelopment nuxt, generate:deploy: cross-env GENERATE_ENVproduction NODE_OPTIONS--max_old_space_size4096 nuxt generate --fail-on-page-error, generate:dev: cross-env GENERATE_ENVdevelopment NODE_OPTIONS--max_old_space_size4096 nuxt generate --fail-on-page-errorgenerate:deploy以GENERATE_ENVproduction执行静态生成用于部署到生产站点generate:dev以GENERATE_ENVdevelopment执行静态生成用于开发/预发布站点两者都设置了--max_old_space_size4096以应对较大构建内存需求并启用--fail-on-page-error让页面生成出错时构建失败。该变量的一个实际消费方是组件 components/_shared/DevelopmentModeMark.vueisDevelopmentMode: () { if (process process.env process.env.GENERATE_ENV) { return process.env.GENERATE_ENV development } return false }当检测到GENERATE_ENV development时页面底部会固定显示黄色的“開発中development mode”提示条并附上指向公开站点的链接用于提醒访问者当前为开发版本。4. 部署到 Staging 与生产环境当下表左列所示分支被更新时对应的构建分支与网站会被自动更新分支HTML 构建并更新的分支更新的网站masterproduction生产站点 stopcovid19.metro.tokyo.lg.jpstaginggh-pagesStaging 站点 stopcovid19-tokyo-staging.web.appdevelopmentdev-pages开发站点 stopcovid19-tokyo-development.web.app该机制与 nuxt.config.ts 中的静态生成配置相互配合target: static表明项目以静态站点形式生成generate.routes会按多语言前缀en、zh-cn、zh-tw、ko、ja-basic与卡片路由自动枚举全部待生成页面再由 CI 将生成的 HTML 推送至对应的部署分支。5. 分支规则Pull Request 只能提交到development分支。提交 Pull Request 时请按以下规则命名分支变更类型分支命名规则功能实现feature/#{ISSUE_ID}-#{branch_title_name}热修复提交hotfix/#{ISSUE_ID}-#{branch_title_name}命名示例若修复 Issue #123 的“图表显示错误”分支可命名为hotfix/123-fix-chart-display-error若实现 Issue #456 的“新增数据卡片”分支可命名为feature/456-add-data-card。5-1. 基础分支用途分支确认 URL可提交 Pull Request 的人员备注开发developmentstopcovid19-tokyo-development.web.app所有开发者基础分支。原则上 Pull Request 都提交到这里Stagingstagingstopcovid19-tokyo-staging.web.app仅管理员上线前的最终确认。禁止非管理员提交 Pull Request生产masterstopcovid19.metro.tokyo.lg.jp仅管理员禁止管理员以外的 Pull Request5-2. 系统使用分支用途分支确认 URL备注生产站点 HTMLproductionstopcovid19.metro.tokyo.lg.jp静态构建 HTML 所在位置Staging 站点 HTMLgh-pagesstopcovid19-tokyo-staging.web.app静态构建 HTML 所在位置OGP 工作目录deploy / new_ogp无用于更新 OGPOpen Graph Protocol分享图片信息6. 相关开发文档速览本仓库在docs/es/目录下还提供了配套的西班牙语开发者资料可作为本指南的延伸阅读贡献指南西班牙语说明如何提交 Issue、发起 Pull Request 与参与翻译开发者守则西班牙语社区协作行为规范根目录 FOR_DEVELOPERS.md日语原版开发者指南内容与本指南一致根目录 FOR_DEVELOPERS_RSPEC.md关于 Ruby 规格测试位于 spec 目录的运行说明根目录 FORKED_SITES.md面向派生站点的维护说明。此外英文版 docs/en/FOR_DEVELOPERS.md 还补充了数据文件说明页面头部的最后更新日期取自 data/data.json 的lastUpdate字段该字段使用日本标准时间JST, UTC9文件由东京都政府定期更新维护。如需深入理解数据层可进一步阅读 libraries/repositories 下的各数据仓库类与 libraries/auto_generated/data_converter 中的数据转换器实现。赞分享数据可视化前端【免费下载链接】covid19東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website项目地址https://gitcode.com/gh_mirrors/co/covid19点击查看免费下载相关推荐东京 COVID-19 对策网站covid19开发者指南环境搭建、本地运行、部署与分支规范东京 COVID 19 对策网站covid19开发者指南环境搭建、本地运行、部署与分支规范 本文面向希望在本地构建并运行东东京都新型冠状病毒感染症对策网站数据可视化前端covid19 项目开发者指南环境搭建、四种运行方式与 GENERATE_ENV 分支部署全流程covid19 项目开发者指南环境搭建、四种运行方式与 GENERATE_ENV 分支部署全流程 本篇指南以东京都 COVID 19 对策网站covid19数据可视化前端东京都 COVID-19 对策网站covid19开发者指南环境搭建、本地运行与部署发布实战东京都 COVID 19 对策网站covid19开发者指南环境搭建、本地运行与部署发布实战 本文面向希望在本地搭建并运行「東京都 新型コロナウイルス感染症数据可视化前端上一篇从零到可玩用事件监听和定时器搭出贪吃蛇的 4 个模块下一篇Duix.Avatar 数字人克隆教程10秒视频克隆你的形象与声音本地生成口播视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考