AIMMホームページの制作

第1回　全体構成

細かい制作方法に入る前に、現在のAIMMホームページがどのような構成になっているかを先に紹介します。

数年前の自分に特に教えたいのは、おそらくこの全体像です。

現在のAIMMホームページは、大きく分けてWordPress側と衛星画像ビューア側から構成されています。

aimm-earth.org側ではXServerスタンダードを利用し、WordPressによる一般ページ、コラム、メールなどを運用しています。

一方、aimm-earth.xyz側ではXServer VPSを利用し、Linux、Apache、HTML、CSS、JavaScriptによる衛星画像ビューアや、大容量の衛星画像ファイルなどを扱っています。

WordPress側から衛星画像ビューアを表示するときには、複雑なPHPプログラムで接続しているわけではありません。

iframeを使って、別ドメイン上で動いている衛星画像ビューアをWordPressのページ内に表示しています。

最初は、WordPressと外部のビューアを接続するためにはPHPやスニペットを使って複雑な仕組みを作らなければならないと思っていました。しかし、ビューア自体を独立したWebページとして作っておけば、iframeでかなり簡単に接続できることが分かりました。

また、ダウンロード用の大容量ファイルも、WordPressが動いているサーバーにすべて置く必要はありません。販売・管理部分と実体ファイルの保存場所を分離することができます。

AIMMearthを作り始めた当初は、「Webサイトは一台のサーバーですべて動かすものだ」と考えていました。そのため、VPS一台でWordPressもビューアもメールもすべて運用しようとしました。

しかし実際に作っていく中で、WordPressやメールはXServerスタンダードに任せ、自由度が必要な衛星画像ビューアや大容量ファイルはVPSに置き、両者を必要なところだけ接続する方がはるかに分かりやすいことが分かりました。

AIMMearth制作で最も苦労したのは、個々の技術そのものより、こうした役割分担とインテグレーションでした。

関連技術・キーワード：XServer Standard / XServer VPS / WordPress / iframe / Apache / HTML / CSS / JavaScript / DNS / システム統合

第2回　VPS環境の構築

Webサイト制作を始めた当初は、そもそもサーバーが何をするものなのかもよく分かっていませんでした。

Webサイトを公開するには何らかのサーバー契約が必要らしいことが分かり、調べていくとXServer、さくらインターネット、ロリポップなど複数のサービスがあることを知りました。

当時は性能表を見ても、自分に何が必要なのか判断できませんでした。

そこで重視したのが、ネット上に日本語の解説情報がどれだけ多いかです。

XServerについてはWordPress、ドメイン、SSL、VPSなどの解説記事が非常に多く、利用者も多いように見えました。

困ったときに検索すれば類似事例を見つけやすいだろうと考え、XServerを選びました。

AWSやAzureなどのクラウドサービスも調べました。また、衛星データ取得との関係で一時期AWSを使う方法を検討したこともあります。

ただしAWSやAzureは非常に多機能で、ネットワーク、権限管理、ストレージ、コンピューティング、セキュリティ、課金管理など、学習範囲が大きく広がります。

企業であれば担当者を分けることもできますが、一人で衛星画像処理からWebサイト制作まで全部を行う場合、そこまで学習範囲を広げると本体制作が進まなくなると考えました。

XServer VPSを使い始めると、Linux、SSH、RLogin、WinSCP、公開鍵認証、パケットフィルタ、ファイアウォール、Apacheなどが一気に登場します。

初期の頃は設定の意味が十分分からず、自分でも何を直しているのかよく分からない状態になることがありました。

特にSSHとSSLは名前が似ていて、最初は混乱しました。

SSHは、自分がVPSへ安全にログインして操作するための仕組みです。

SSL/TLSは、利用者のブラウザとWebサーバー間をHTTPSで暗号化するための仕組みです。

何度も設定を経験するうちに、接続できないときはどこを見るか、Webページが表示されないときはどこを見るか、と確認場所を絞れるようになりました。

最初は関係のない設定まで疑いますが、慣れてくると問題ごとに確認すべき場所がかなり限定できます。

XServer VPSとXServerスタンダードでは管理画面も微妙に異なります。

DNSレコード設定など似た操作を両方で行うこともあるため、最初は自分がどちらの管理画面を見ているのか混乱することもありました。

関連技術・キーワード：XServer VPS / Linux / SSH / SSL / TLS / RLogin / WinSCP / Apache / Firewall / Packet Filter / DNS / VPS

第3回　サーバー構成の見直し

AIMMearth制作初期には、「サーバーは一台借りて、その一台ですべて動かすもの」というイメージを持っていました。

そこで、自由度の高いVPSを契約し、衛星画像ビューアだけでなくWordPressまでVPS上へ構築しました。

VPSへWordPressを入れるためには、Linux上にApache、PHP、MariaDBなどを用意し、その上にWordPressをインストールします。

WordPressだけを利用したい場合でも、その下にある環境を自分で設定・管理しなければなりません。

WordPressが表示されないだけでも、原因がApacheなのか、PHPなのか、WordPress設定なのか、MariaDBへの接続なのか、ファイル権限なのかを切り分ける必要があります。

MariaDBやMySQLについてはUdemyなどで多少勉強していました。しかし、WordPressというPHPアプリケーションが、裏側でMariaDBへ記事や設定情報を保存し、それを読み出して動いているという関係は、実際に自分で構築して初めて実感できました。

Apacheについても同様でした。最初は設定ファイルのどこを直しているのか十分分からないこともありましたが、何度も設定し直すうちに、問題ごとに見る場所が分かるようになりました。

そしてサーバーを分ける大きな理由になったのがメールです。

VPS上でメールサーバーまで自前運用しようとすると、DNS、SPF、DKIM、DMARC、迷惑メール対策、セキュリティなど、さらに多くの要素が必要になります。

AIMMearth本体を一人で制作しながら、そこまで自分で管理するのは負担が大きいと判断しました。

そこでWordPressとメールはXServerスタンダードへ移し、VPS側は衛星画像ビューアや大容量ファイルの配信に集中させる構成へ変更しました。

サーバーをもう一台契約するため料金は増えます。しかし、一台へ何でも集約して管理負荷を増やすより、役割を分けた方が全体としてははるかに運用しやすくなりました。

ドメインについても試行錯誤しました。

当初は一つのサービスや公開物ごとに一つの独自ドメインが必要だと考え、いくつかのドメインを取得しました。

しかし後になって、サブドメインやディレクトリを使えば、一つの独自ドメイン内で複数のサービスを公開できることが分かりました。

そこで最終的には必要なドメインだけを残し、それ以外は整理しました。

関連技術・キーワード：XServer Standard / XServer VPS / WordPress / Apache / PHP / MariaDB / MySQL / Mail / SPF / DKIM / DMARC / DNS / Domain / Subdomain

第4回　システム統合

AIMMearthは利用者から見ると、一つのWebサイトとして動いているように見えます。

しかし内部では複数のシステムに役割を分けています。

WordPressによる一般的なWebサイト部分はXServerスタンダード上で動いています。

衛星画像ビューアと大容量の画像ファイルはXServer VPS側に置いています。

そしてWordPress上から衛星画像ビューアを表示するときにはiframeを利用しています。

この構成に気づくまでにはかなり時間がかかりました。

制作初期には、WordPressから外部の衛星画像ビューアを利用するためには、PHPやWordPressスニペットを使って何らかの連携プログラムを書く必要があるのではないかと考えていました。

WordPress関連の記事や動画では、WordPress内部の編集方法については非常に多くの情報があります。

特にLightningについては無料の解説動画も多く、Webロードの動画などが、WordPressで何ができるのかを理解するうえで非常に参考になりました。

一方で、「WordPressと別サーバー上のWebアプリケーションをどのようにつなぐか」という情報は、個々のWordPress操作ほど多くはありませんでした。

そこでiframeを利用すれば、WordPress側へビューアのプログラムそのものを組み込まなくても、独立して動いているWebページをそのまま表示できると分かったとき、構成が一気に単純になりました。

AIMMearth制作では、最初はすべてを一つのサーバーや一つのアプリケーションへ押し込もうとしていました。

最終的には、それぞれの仕組みを得意な場所で独立して動かし、必要なところだけ接続する形になりました。

AIMMearth全体では、Sentinel-2、CDSE、MGRS、QGIS、PyQGIS、Python、HTML、CSS、JavaScript、Linux、Apache、XServer VPS、WordPress、XServerスタンダード、DNS、iframe、デジタルダウンロード管理など、多数の既存技術を組み合わせています。

私はこれら一つ一つの専門家というわけではありません。

しかし、それらを組み合わせ、一つの衛星画像サービスとして実際に動かすためのインテグレーションについては、AIMMearthを自分で作る過程でかなり習得することができました。

個々の技術を詳しく学ぶのであれば、専門書、Udemy、YouTube、各種技術記事など、より詳しい教材が多数あります。

この連載で紹介したかったのは、それらの技術をどのように組み合わせれば、実際に一つのWebサービスとして完成させられるのか、という部分です。

関連技術・キーワード：WordPress / Lightning / iframe / XServer Standard / XServer VPS / Apache / HTML / JavaScript / DNS / System Integration