柏原集團關聯公司 超過 10 個網站遷移至 Cloudflare / microCMS 環境

在保留各網站不同架構的同時,統一管理安全性與營運

我們以 Cloudflare 作為共通基礎,為柏原集團及其集團企業營運的 10 多個網站重建了基礎架構。
集團內存在多個網站,包括企業官網、品牌網站、招募網站與活動網站,各自的目的與營運體制皆不相同。
本專案並非將所有網站一律改為相同技術,而是在保留各網站的架構與營運方式的前提下,將 DNS、安全性、內容傳遞與監控機制集中至 Cloudflare。

針對主要的企業官網與品牌網站,我們採用 Astro 與 microCMS 重新打造前端,同時兼顧集團整體的治理強化,以及讓各網站能靈活因應自身需求的營運方式。

專案背景

隨著集團事業擴展與品牌強化,網站數量以及影片、圖片等內容量持續增加。由於各網站是在不同時期、採用不同技術與營運體制建置,因此出現了以下課題。

  • 伺服器與 DNS 的管理單位依各網站而分散。
  • 各網站的安全對策與維護方式互不相同。
  • 高畫質影片與圖片日益增加,導致顯示負荷不斷升高。
  • 包括外部廠商在內的多方相關人員,各自在不同的環境中營運。
  • 作業系統與中介軟體的更新、故障監控等,產生了持續性的維護成本。
  • 難以跨越集團內各網站,全面掌握整體狀況。

單純遷移伺服器無法解決上述課題,因此我們針對柏原集團及其集團企業營運的 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 的島嶼架構(Islands Architecture),僅在需要互動處理的部分執行 JavaScript。
因為不會對整個頁面統一載入 JavaScript,既能呈現運用影片與高畫質圖片的表現力,也兼顧了輕量的網頁效能。

透過 microCMS 進行內容管理

內容管理採用無頭 CMS(Headless CMS)microCMS。
將負責呈現的前端與負責管理資訊的 CMS 分離,使各網站的設計與功能能靈活規劃,同時讓負責人員可日常自行更新內容。

打造易於持續開發與維護的基礎架構

透過運用共用套件,我們有效抑制了各網站實作與設定無序增加的情況。
新網站建置、既有網站功能新增及共用部分更新都更為便利,實現可讓多個集團網站中長期穩定營運的開發基礎。

此外,透過以靜態配送為主的架構,減輕了過去必須負擔的 OS 與中介軟體管理工作,讓團隊能將資源專注於內容營運與網站改善,而非僅投入維護作業。

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

為活用既有 CMS 的環境分離

對於需要與外部廠商合作或優先考量更新速度的網站,例如招募網站與活動網站,我們仍持續使用 WordPress 與 Movable Type 等既有 CMS,但基於資安考量,並未與主要網站混合在同一環境中,而是將伺服器與營運環境分離。
即使其中任一 CMS 或伺服器發生問題,也能更容易將影響範圍限縮在局部。
在不大幅變更既有製作與營運流程的前提下,強化了集團整體的風險管理。

透過 Cloudflare 連接各網站不同的架構

主要網站與既有 CMS 網站分別在獨立的環境中運作。
另一方面,DNS、通訊、資安與監控則以 Cloudflare 為核心的共通方針進行管理。

藉此,我們在維持各網站所適用的技術與營運體制的同時,實現了集團整體統一管理的網路基礎架構。

流程圖片

導入後的變化

項目

遷移前

遷移後

基礎架構管理

各網站分別管理,管理端與架構分散

集中至以 Cloudflare 為核心的共通基礎架構

DNS管理

依網域個別管理

跨群組網站統一管理

前端

依賴伺服器與 CMS 的架構

主要網站改以 Astro × microCMS 重新打造

內容發佈

以原始伺服器為核心進行發佈

活用 Cloudflare 的網路

安全性

逐一處理各網站

易於套用共通方針的架構

與外部廠商合作

多種不同環境並存

將既有 CMS 獨立為單獨的環境

維護與監控

以伺服器為單位進行維運管理

轉為跨所有網站的統一監控體制

持續改善活動

更容易將資源投入維運管理

讓團隊更能專注於內容營運與持續改善的環境

不是將多個網站「統一」,而是「整合」

本專案並未將超過 10 個網站全部改用相同技術,而是依各網站的目的與營運體制,維持適合的架構。

在此基礎上,我們以 Cloudflare 作為集團共通基礎設施,整合 DNS、網路通訊、資安與監控。

主要網站以 Astro × microCMS 進行現代化,並將繼續沿用既有 CMS 的網站獨立至另一套環境,在效能、營運便利性與資安之間取得平衡。

本次網頁基礎設施更新的關鍵,不在於強行統一各網站,而是在發揮各自特色的同時,整備出可整體管理的狀態。

靠團隊的理解與合作實現的專案

本專案橫跨 10 個以上的網站,在持續營運各網站的同時逐步遷移至共通基礎架構,不僅在技術層面,在相關人員之間的協作上也是極具挑戰性的一項工作。

各網站的目的與營運體制各不相同,既有的製作流程也需要逐一整理,能夠順利遷移至面向未來的全新基礎架構,要感謝 KASHIWABARA 集團各位的深切理解,以及以開放態度接納變革、積極推動專案的支持。

此外,也要感謝負責品牌與創意設計的株式會社 NDC 各位,以及支援專案整體進度與架構規劃的株式會社オリジナルテクスト各位,還有參與各網站製作與營運的相關協力公司,大家都給予了極大的協助。

來自不同立場與專業領域的成員各自貢獻所長,在尊重既有架構的同時,朝向打造更優質 Web 基礎這一共同目標前進,這份合作正是推動本專案完成的重要力量。

專案負責人
原創文本股份有限公司
品牌設計與動態設計
日本設計中心股份有限公司
首席總監
Liberogic Inc. 大家
技術總監
Liberogic Inc. 大塚
總監
Liberogic Inc. 繁田
UI/UX 設計師
Liberogic Inc. 長橋
首席工程師
Liberogic Inc. 二俣
前端工程師
Liberogic Inc. 松塚 / 平林
專案經理
Liberogic Inc. 森本
公司名稱・服務名稱
Kashiwabara Group

Kashiwabara Group

柏原集團是一個提供與居住相關之廣泛服務的企業集團,業務涵蓋土地開發、建築、修繕與維護、物業管理、保險及房貸等。各公司在保有自身特色的同時,持續成長與進化,以便在下一個時代提出嶄新的方案。