chinen

Movable Typeで同期(転送)を使った運用をスムーズにするディレクトリ構成【MT】

MT運用のディレクトリ構成

Movable Typeのセキリュティ対策のために、インストールするサーバーと、本番公開用のサーバーを分けて運用することがあります。

その際、Movable Typeでパブリッシュ(出力)したファイルを公開環境のサーバーに移動させる手段の一つとして、同期プログラムを用意してファイル転送する方法があります。

この同期機能はディレクトリ単位で転送する仕組みになっていることが多く、ディレクトリ構成によっては運用が始まってからの更新に影響が出てしまいます。

実際に起こり得る状況に当てはめて、うまくいかない例と、スムーズに更新できるよう対策したディレクトリ構成を紹介します。

ディレクトリ構成1(うまくいかない例)

/index.html ・・・ サイトトップ 
 │
 ├── news/
 │     │
 │     └── index.html ・・・ ニュースblog
 │
 ├── service/
 │     │
 │     └── index.html ・・・ サービスblog
 │
 ├── img/
 │     │
 │     └── image.jpg ・・・ サイト表示に必要な画像
 │
 ├── css/
 │     │
 │     └── style.css ・・・ サイト表示に必要なCSS
 │
 └── js/
       │
       └── script.js ・・・ サイト表示に必要なJavaScript
  • サイトトップには、ニュースblogとサービスblogの新着記事を表示します。(mt:MultiBlogやmt:Includeで構築)
  • 画像やCSS・JavaScriptなどはルート直下のフォルダにまとめて格納しています。

ディレクトリ構成2(更新しやすいよう調整)

/index.html ・・・ サイトトップ 
 │
 ├── news/
 │     │
 │     ├── index.html
 │     │
 │     ├── include.html ・・・ サイトトップに表示用
 │     │
 │     ├── img/
 │     │     │
 │     │     └── image.jpg ・・・ ニュース用画像
 │     │
 │     ├── css/
 │     │     │
 │     │     └── style.css ・・・ ニュース用CSS
 │     │
 │     └── js/
 │           │
 │           └── script.js ・・・ ニュース用JavaScript
 │
 │
 ├── service/
 │     │
 │     ├── index.html
 │     │
 │     ├── include.html ・・・ サイトトップに表示用
 │     │
 │     ├── img/
 │     │     │
 │     │     └── image.jpg ・・・ ニュース用画像
 │     │
 │     ├── css/
 │     │     │
 │     │     └── style.css ・・・ ニュース用CSS
 │     │
 │     └── js/
 │           │
 │           └── script.js ・・・ ニュース用JavaScript
 │
 │
 └── common/ ・・・ サイト表示に必要な共通ファイルをまとめる
       │
       ├── img/
       ├── css/
       └── js/
  • Movable Typeで更新するファイルを各ディレクトリ内で完結するようにしています。
  • 各ブログで、サイトトップに表示する要素だけを出力するインデックステンプレートを作成しておきます。
  • サイトトップではサーバーサイドインクルードで各ブログのコンテンツを表示させます。

運用時に起こる状況

Case 1
ニュースblogとサービスblogを同時に更新していて、先にニュースだけ1時間早く公開したい

■ディレクトリ構成1の場合

/index.html/news/の再構築と同期が必要です。
TOPページのインデックステンプレートに両方の最新記事が反映されると困るため、先にニュースblogが公開されるまでサービスblogの更新作業を待たなければならないことになります。
(もしくは日時指定公開と転送設定をcronでごにょごにょ・・・運用ルールの複雑化)

■ディレクトリ構成2の場合

/news/のディレクトリのみ再構築と同期で対応できます。
サービスblogを同時に更新していたとしても/service/を同期しなければ公開環境には表示されません。
サイトトップに表示用のインクルードファイルは/news/配下で更新されるので、サイトトップのindex.htmlの同期をしなくてもニュースの最新情報をサイトトップに反映することができます。

Case 2
ニュースblogとサービスblogにそれぞれレイアウト調整があるが、先にニュースだけ1時間早く公開したい

■ディレクトリ構成1の場合

CSSがルート直下の/css/style.cssにまとめられているため、ニュースblog公開のタイミングでサービスblogにも反映されないようにクラスを分ける、もしくはcssを別ファイルで用意する、など管理がややこしくなります。

■ディレクトリ構成2の場合

/news/のディレクトリのみ再構築と同期で対応できます。
CSSをディレクトリごとに分けているためそれぞれの修正は影響しないで公開できます。

Case 3
サイトトップを修正したいが、同期ブログラムの仕様で、サイトトップを同期する場合はルート直下の全ファイルに同期がかかる

■ディレクトリ構成1の場合

各ブログの内容をサイトトップページに表示する際にmt:MultiBlogやmt:Includeを使っていると、再構築して/index.htmlを同期しなければならないため、サイトトップ関連の修正があるとその公開が終わるまで他の記事更新ができなくなります。

■ディレクトリ構成2の場合

サイトトップを修正中でも、ニュースblogやサービスblogで更新があった場合は、それぞれのディレクトリで同期することで対応できます。
インクルードファイルが更新されるとサイトトップにも反映ができるため、修正中の/index.htmlを同期しなくてもCase 1と同様に更新が可能です。

まとめ

ディレクトリ構成2は階層が多くなるので初回構築時は手間に感じるかもしれないですが、上記の例からもディレクトリ構成2の方が更新時に不都合になりにくいことがわかると思います。

Movable Typeのテンプレートとサーバーサイドインクルードを組み合わせた上でディレクトリ構成を工夫することによって、運用負荷をかなり軽減することができます。

案件の仕様によってSSIやPHPが使えなくても、Movable Typeから出力するコンテンツを各ディレクトリ内で完結する構成にすることで、更新がストップしてしまうような状況を回避しやすくなります。
とくにブログが多い大規模サイトや更新が頻繁にある場合はよりスムーズに運用できることが必須になりますので、ディレクトリ構成の参考になればと思います。

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら