Kashiwabara 集团关联公司 10 个以上网站迁移至 Cloudflare / microCMS 环境

在保留不同网站架构的同时,实现安全性和运维的统一管理

针对 Kashiwabara Corporation 及其集团公司运营的 10 个以上网站,我们以 Cloudflare 作为统一基础设施,进行了基础设施的重新构建。

集团内部存在多个用途和运维体制各不相同的网站,包括公司网站、品牌网站、招聘网站和活动网站等。

在本项目中,我们没有将所有网站统一替换为同一技术,而是在保留各网站架构和运维方式的基础上,将 DNS、安全性、内容分发和监控机制集中到 Cloudflare。

对于主要的公司网站和品牌网站,我们采用 Astro 和 microCMS 来刷新前端实现。在加强集团整体治理的同时,实现了各网站灵活运维的平衡。

项目背景

随着集团业务的扩展和品牌推广的加强,网站数量以及发布的视频、图像等内容量不断增加。

另一方面,由于各网站在不同时期以不同的技术和运维体制构建,存在以下问题。

  • 服务器和DNS管理因站点而异分散
  • 不同站点的安全措施和维护方法各不相同
  • 高清视频和图像数量增加导致显示负载提高
  • 包括外部供应商在内的多个相关方各自运维不同的环境
  • 操作系统和中间件更新、故障监控等持续产生维护成本
  • 难以横向掌握集团整体的网站情况

仅仅迁移服务器无法解决这些问题。

因此,我们对Kashiwabara Corporation及其集团公司运营的10个以上公开网站进行了重构,以Cloudflare作为共同基础设施进行Web基础设施整合。

迁移设计不采取完全统一的配置

在集团网站整合中,如果将所有网站都更改为相同的CMS或框架,会对现有运维流程和与外部供应商的协作造成重大影响。

在本项目中,我们整理了各个网站的角色定位、更新频率、运营主体和未来改版计划,并根据各自特点选择了适切的迁移方法。

迁移设计整体流程

  1. 调查集团各网站的结构、DNS、服务器、CMS 和运营体制
  2. 整理各网站的角色和更新方式、相关供应商信息
  3. 将需要现代化改造的网站与保持现有构成的网站进行分类
  4. 将核心网站升级为 Astro × microCMS 架构
  5. 继续使用现有 CMS 的网站,与核心网站环境相隔离
  6. 将所有网站的 DNS 和通信链路聚合至 Cloudflare
  7. 将安全设置和监控方法统一为集团共通方针
  8. 分阶段切换,逐步过渡至上线后的运营和监控体制

我们尊重各个网站的具体情况,同时在其上层建立 Cloudflare 的共同基础设施,实现了灵活性和治理的统一。

流程图

构建 Cloudflare 共同基础设施

将 10 个以上网站的 DNS 和通信路由聚合到 Cloudflare。

即使各网站的服务器和 CMS 不同,通过将与互联网的接触点统一到 Cloudflare,我们建立了易于对整个集团应用通用安全策略和分发政策的架构。

DNS 管理的集中化

将原本分散在各个网站的 DNS 管理聚合到 Cloudflare。

现在能够跨网站全面掌握每个域名的配置状态,建立了易于应对网站添加、迁移和配置变更的运维基础。

通过 CDN 分发内容

通过 Cloudflare 网络分发图像、视频、CSS、JavaScript 等静态文件,可以减轻源服务器的负担。

即使在大量使用富媒体内容的网站上,我们也构建了支持稳定显示的分发基础设施。

安全策略统一

在各网站前端部署 Cloudflare,利用 WAF 和 DDoS 防护等安全功能构建了配置体系。

不仅依赖个别服务器,而是通过在组织共同的入口处控制通信,使各网站因差异而产生的安全对策更易于统一。

构建 Astro × microCMS 共通组件,部署至多个网站

主要的企业网站和品牌网站采用了 Astro 和 microCMS,革新了前端实现和内容管理基础设施。

我们没有为每个网站从零开始构建个别的环境,而是整理了多个网站可以共用的实现和配置,构建了基于 Astro 的共通组件。各个网站在活用这个共通组件的同时,分别实现了设计、内容和必要功能。

通过这种方式,我们在尊重各网站品牌和运营方针的同时,在整个集团网站范围内保持品质、可维护性和开发效率的一致水准。

在统一中维持各网站的个性

我们没有将所有网站统一为相同的设计和功能,而是仅在技术层面实现了共通化。

各网站的设计、内容结构和所需功能可以分别设计,既保留了各品牌的表现形式和运营方法,又能充分发挥共通基础的优势。

只在需要的地方加载前端

通过 Astro 的岛屿架构,仅在需要交互处理的地方执行 JavaScript。

通过避免将 JavaScript 一律加载到整个页面,我们既充分利用了视频和高质量图像的表现力,也保证了网页的轻量化。

使用 microCMS 进行内容管理

内容管理采用了无头 CMS 解决方案 microCMS。

通过将负责展示的前端与管理信息的 CMS 分离,我们实现了在灵活设计各个网站的设计和功能的同时,让相关人员可以日常更新内容的构成。

建立易于持续开发和维护的基础

通过利用通用软件包,我们抑制了不同网站间实现和配置无序增加的现象。

我们使新网站的构建、现有网站的功能扩展和通用部分的更新变得更加容易,实现了能够中长期运营多个集团网站的开发基础。

此外,以静态交付为中心的构成减轻了传统上需要的操作系统和中间件管理负担,使得我们可以将资源集中用于内容运营和网站改进,而不仅仅是维护工作。

参考文章
https://www.liberogic.jp/topics/20250804-AstroComponent/

充分利用现有CMS的环境隔离

对于招聘网站和活动网站等需要与外部供应商协作或优先更新速度的网站,我们继续使用WordPress和Movable Type等现有CMS。

但是,我们没有将这些系统与主要网站混在同一环境中,而是分离了服务器和运营环境。

即使某个CMS或服务器出现问题,这种架构也能轻松限制影响范围。

在无需大幅改变现有制作和运营流程的情况下,我们增强了整个集团的风险管理。

通过Cloudflare连接不同网站的配置

主要网站和现有CMS网站在各自独立的环境中运营。

同时,DNS、通信、安全和监控由以Cloudflare为中心的统一策略管理。

由此,我们在维持各网站适合的技术和运营体制的同时,实现了整个集团受控的Web基础设施。

流程图

迁移后的变化

项目

迁移前

迁移后

基础设施管理

各网站的管理方式和配置分散

汇总至以 Cloudflare 为中心的共同基础设施

DNS 管理

按域名分别管理

跨组合网站统一管理

前端

依赖服务器或CMS的结构

将主要网站更新至 Astro × microCMS

内容分发

以源站为中心进行分发

利用 Cloudflare 网络

安全性

按网站单独处理

便于应用统一方针的结构

与外部供应商的协作

混合使用不同环境

将现有CMS分离为独立环境

维护与监控

服务器层级的维护管理

过渡到全站点跨越式监控体系

改进活动

便于为维护管理分配资源

营造易于专注于内容运营和改进的环境

采用「整合」而非「统一」多个站点

在本项目中,我们没有将10多个网站全部更换为相同技术,而是为各个站点保留了最适合其目的和运营体制的配置。

同时,我们以Cloudflare作为集团共通基础设施,统合了DNS、通信、安全性和监控功能。

主要网站通过 Astro × microCMS 实现了现代化,同时将继续使用现有 CMS 的网站分离到独立环境中,从而在性能、可操作性和安全性之间取得了平衡。

不强行统一不同的网站,而是在尊重各自特色的基础上,将整体管理状态梳理好,这是此次 Web 基础设施更新中的重要着眼点。

通过团队的理解与协力而实现的项目

本项目涵盖 10 多个网站,在继续各自运营的同时向共同基础设施迁移,这不仅在技术层面上,在相关方的协调配合方面也是一项极具挑战性的工作。

我们梳理了各网站不同的目的、运营体制和既有制作流程,并成功迁移到面向未来的新基础设施。这一切的实现,离不开 KASHIWABARA 集团全体成员的深刻理解,以及他们积极拥抱变化、推进项目的努力。

同时,我们也获得了日本设计中心株式会社在品牌和创意方面的贡献,以及株式会社 Original Text 在整体项目推进和结构支撑方面的协助,以及所有参与各网站制作和运营的相关企业的大力支持。

来自不同立场和专业领域的团队成员汇集各自的知见,在尊重现有机制的基础上,朝着打造更优越 Web 基础设施这一共同目标而努力,这股合力成为推动项目圆满完成的巨大动力。

项目负责人
株式会社 Original Text
品牌·动态设计
日本设计中心株式会社
首席总监
Liberogic株式会社 大家
技术总监
Liberogic株式会社 大塚
总监
Liberogic株式会社 繁田
UI/UX设计师
Liberogic株式会社 长桥
首席工程师
Liberogic株式会社 二俣
前端工程师
Liberogic 株式会社 松塚 / 平林
项目经理
Liberogic 株式会社 森本
公司名称·服务名称
株式会社 Kashiwabara Corporation