Drupal with Jamstack

今回、DrupalによるWebサイトの公開から、DrupalでWebサイトを構築し、静的ファイル化(html化)した形で公開を行うJamstack的なWebサイトの公開に変更しました。

Jamstack（ジャムスタック）とは、JavaScript、API、Markup（マークアップ）の3つの技術要素を組み合わせてWebサイトを構築するアーキテクチャ手法です。WordPressなどの従来型と違い、あらかじめ生成された静的ページをCDN経由で配信するため、高いセキュリティと超高速な表示速度を実現します。   ---   Geminiより引用

厳密には定義としてのJamstackではありませんが、ページ生成まではCMSなどのプログラムを使い、公開はデータベースやプログラムを使用しない静的ファイルをCDNで配信する形は、Jamstackの一つと認識されているので、Jamstackとしています。

海外では『Static Drupal』とも言われています。

Introduction.

Jamstack化を進めた理由は、2026年5月に、LightsailとBitnamiの関係が解消され、それまで使用していたブループリントと言われたLightsailにCMSがパッケージされたサービスを今後廃止する事や、セキュリティアップデートを自身の責任にて行う必要が生じたことが理由になっています。

元々、Lightsail + Bitnami + Drupalのパッケージが、PHP8.2.xとなっており、Drupal10.xまでの対応であり、LTSが2026年12月までなので、どこかでDrupal 11.xにアップデートを行う必要があり、BitnamiはPHPのユーザーによるアップデートはサポート対象外なので、今年中にEC2 + RDSの構成に移転を考えていました。

これまで当サイトはWeb上にDrupalを置き、Drupalを使いWebサイトの公開を行ってきました。

どうせ、移転するなら、Drupalのシステムを移転するのではなく、当初から構想にあったJamstackを進めようと考えて移転を行っています。今回の移転で以下のプロセスを行いWebサイトの公開を行っています。

どのような構成でJamstack化を行ったかを簡単にまとめています。実際の設定などガイド的な内容は、記事が長くなってしまうので整理を行い、別途まとめていきたいと考えています。

Mac Book Pro

これまで、Web上で行っていた、Webサイトの構築作業をローカル環境であるMac Book Proで完結させています。

セキュリティ対策やアップデートによる依存関係による不具合の問題に対応する手間も、ローカル上でDrupalを動かすことで軽減しています。

AWS

実際のWebサイトの公開はAWSのLightsailとCloud Frontで行っています。

ローカルで作成した静的ファイルを、ストレージ化したLightsailに置き、CDNであるWAFをパッケージしたCloud FrontでWebサイトの公開を行っています。この形をとることで、Jamstackといった構成に近いWebサイトの公開を実現しています。

CDNとWAFがパッケージされた『Cloud Flare』を使う形の方が設定もシンプルであり、CDNを使う方法として主流ですが、全てAWSで完結する構成のメリットが大きいので、『Cloud Flare』ではなくAWSの『Cloud Front』を選択しています。

今回のJamstack化は、サーバーレスとも言われており、主流は、AWSのS3 + Cloud Frontを選択するのが一般的であり、AWSもこの構成を推奨しています。AWSのLightsail + Cloud Front を選択した理由に、デプロイ(Webサイトの公開プロセス)の簡素化があります。

S3 + Cloud Frontはファイルのアップロードが、AWS CLIまたはGitを使用する必要があります。（プロセスの自動化が可能ですが基本はコマンドラインでの作業になります）S3へのファイルのアップロードは、デフォルトではsFTPなどのGUI化された方法では出来ません。(S3バケットに対応した一部のsFTPアプリでは可能)

Lightsail + Cloud Frontの構成は、Lightsailがサーバー機能を持っています。（必要な機能のみに絞って使用）SSHを解放することでsFTPの使用も可能になります。sFTPを使用するメリットは、ファイルのアップロードがGUI化されていることです。

デプロイというコマンドラインで行う作業が、GUIのコピペで行えるメリットは大きく、作業全体の簡素化を実現しています。

S3はデフォルトでは、Apacheのルーティング機能を持っていないので、『learn/index.html』がそのまま公開されてしまいます。Drupalで生成した『learn/』が『learn/index.html』と表示されるのも気が引けたのでLightsailにApacheを持たせる選択をしています。(S3でもルーティングの設定は可能です。)

Lightsailを選択し、ApacheとSSHのみを使う『S3にApacheとSSHを搭載』した構成にしています。S3の利点であるセキュリテイを担保する内部ルーティングに近い設定(Cloud Front以外のIPは通さない設定)行い、鍵認証とIP制限をかけたSSHの解放のみのサーバーを使い、静的ファイルのみの公開をCloud FrontとAWS WAFがパッケージされたCDNで行うことで、これまでよりセキュリティも高いシステムになっています。

Security

外部のアクセスはCloud Frontのみ、オリジンであるLightsailは外部からのアクセスはCloud FrontのIPからしかアクセスが出来ないようIP制限をかけています。この構成は、S3のメリットである内部ルーティングによるオリジン設定と近いセキュリティを担保出来ます。

SSHや、sFTPは、秘密鍵認証のみとしています。この構成にIP制限を合わせることで、私のMac Book Pro以外からの接続が出来ない構成になっています。PortScanが酷いようであれば、fail2banにsshdを追加する事でさらにセキュリティを強化することも出来ます。

Usability

Jamstackの一般的な作業である、AWS CLIやGitによる公開（キャッシュのクリアなども含める）を使わずに、sFTPのGUIベースでの公開ができる設定にしています。

Gitを外したのは、『MacBook - Github - AWS』のプロセスを『MacBook - AWS』とすることで、管理するプラットフォームを一つ減らすことにあります。

Tomeが吐き出したhtmlベースのWebサイトを、『GUIでコピペ』することでWebサイトの更新が完了する構成は、非常に簡単かつ確実な方法です。個人のブログであり、サイト規模も小さく、更新頻度もそれほど多くないことから、機能も最低限で良い構成なので、このような構成にしています。

Back to Basics

個人のパソコンでWebサイトを構築し、プロバイダーのホームページスペースに、FFFTPなどで、ページをアップし公開していた、1990年代のホームページと同じやり方になっています。

『紆余曲折を経て30年前のやり方が正解』になっています。

Drupalでの公開から、移転を含めたJamstack化を行い、簡単なプロセスをまとめた内容になっています。これまでと異なるシステムでの構築や公開に変わったので、簡単な挨拶代わりの記事で駆け足のような内容になっています。実際の機能や設定などガイド的な記事は、今後まとめて記事にしていければと考えています。

今回のJamstack化を行う上で、同時にページデザインの変更と、英文記事の翻訳を見直しています。全ての記事を手作業でやり直したので、その作業にかかった時間がほとんどの作業となっており、AWSの設定や移行作業は確認作業と切り替え作業を含め数時間で完了しています。

今回のJamstackのプロジェクトは『Claude』に手伝ってもらい行っています。エージェント型AIであり、作業の自動化が得意なAIですが、サーバー移転のプランから、翻訳作業や校正の実作業、移転の実行までのプロセスを、構想段階からリレーションで詰めています。そのことが、サイトの規模や特性に合ったプランの選択につながり、実際の移行をスムースに行えた理由でもあります。

今回のClaudeとのリレーションで進めたプロジェクトは、良く言われるAIアシスタントというより、一歩踏み込んだAIコンサルティング的な使用をしています。

Claudeの利用方法なども機会があれば記事にしたいと考えています。