第4回 制作過程での試行錯誤
1. はじめに
これまでの3回では、AIMMearthの現在のWebシステムについて、全体構成、サーバー環境、システム間の連携方法を説明しました。
現在は、WordPressをXServerスタンダードで運用し、衛星画像ビューアや大容量ファイルの配信にはXServer VPSを利用しています。
しかし、制作を始めた当初から、この構成を採用していたわけではありません。
当初は、Webサイト全体を一つのサーバーで運用することを考えていました。また、WordPressと独自のWebアプリケーションをどのように接続するかについても、さまざまな方法を検討しました。
本記事では、現在の構成に至るまでの試行錯誤と、そこから得られた技術的な知見を紹介します。
2. サーバーサービスの選定
Webサイトの制作を始めた当初は、サーバーに関する知識が十分ではなく、各サービスの違いや、自分の用途にどのような機能が必要なのかを判断することが容易ではありませんでした。
国内のサーバーサービスとして、XServer、さくらインターネット、ロリポップなどを調べました。
また、AWSやMicrosoft Azureなどのクラウドサービスについても検討しました。
これらのサービスにはそれぞれ特徴がありますが、AIMMホームページの制作では、衛星画像の処理からWebサイトの構築まで、幅広い作業を進める必要がありました。
そのため、サーバーの運用技術を習得すること自体に、多くの時間を費やすことは避けたいと考えました。
サービスを選定する際に重視したのは、日本語による技術情報の豊富さです。
XServerについては、WordPress、独自ドメイン、SSL、VPSなどに関する解説記事が多く、問題が発生した場合にも関連情報を調べやすいと考えました。
このような理由から、XServerを採用しました。
3. VPSへのWordPress構築
制作初期には、一台のVPSに必要なシステムをすべて構築することを考えていました。
そこで、衛星画像ビューアに加えて、WordPressもVPS上へインストールしました。
WordPressをVPS上で動作させるためには、Linux上にApache、PHP、MariaDBなどを用意する必要があります。
これらを自分で構築したことにより、WordPressがどのような仕組みで動作しているかを具体的に理解できるようになりました。
例えば、WordPressの記事や設定情報はデータベースに保存されており、PHPによるプログラム処理を通じてWebページが生成されます。
それまでもMySQLやMariaDBについて多少は学習していましたが、WordPressを実際に構築することで、Webアプリケーションとデータベースの関係を理解できました。
一方、WordPressをVPS上で運用する場合には、Webサーバー、PHP、データベースなどの管理も自分で行わなければなりません。
WordPressのページが表示されない場合にも、問題がWordPress自体にあるのか、Apache、PHP、MariaDB、ファイルのアクセス権限などにあるのかを調べる必要があります。
この経験から、WordPressを利用することと、WordPressの動作環境を自分で管理することは、別の作業であると理解しました。
4. メールサーバーの運用とサーバー構成の変更
サーバー構成を見直す大きな理由となったのが、メールの運用です。
Webサイトを公開するだけであれば、LinuxとApacheなどを中心とした構成で対応できます。
しかし、独自ドメインのメールをVPS上で運用しようとすると、さらに多くの仕組みが必要になります。
メールサーバーの構築に加え、DNSの設定、SPF、DKIM、DMARCなどの送信ドメイン認証、迷惑メール対策、セキュリティ管理などを考慮しなければなりません。
これらを自分で管理することも技術的には可能ですが、AIMMearthの主要な目的は、メールサーバーを開発・運用することではありません。
そこで、WordPressとメールについては、必要な機能が用意されているXServerスタンダードへ移すことにしました。
一方、VPSは、独自の衛星画像ビューアと大容量ファイルの配信を中心とする構成に変更しました。
サーバーを二つ契約するため費用は増えますが、WordPressやメールに関する基盤部分の管理を減らすことができます。
結果として、各サーバーが担当する役割を明確にできました。
5. SSH、SSL、DNSなどの設定
VPSの構築では、Linuxそのものに加えて、ネットワークやセキュリティに関する技術も学ぶ必要がありました。
例えば、SSHとSSLは名称が似ていますが、役割は異なります。
SSHは、管理者がサーバーへ安全に接続して操作するための仕組みです。
一方、SSL/TLSは、Webサイトで利用するHTTPS通信などの暗号化に関係する技術です。
制作初期には、このような基本的な技術の区別が十分に理解できていないこともありました。
また、VPSへ接続できない場合には、SSHの設定だけでなく、公開鍵認証、パケットフィルタ、ファイアウォールなども関係します。
Webページが表示されない場合には、DNS、Apache、HTTPSなどを確認する必要があります。
当初は問題が発生するたびに広い範囲を調べていましたが、設定を繰り返すうちに、問題の種類に応じて確認する場所を絞れるようになりました。
サーバー環境を構築する際には、個々の技術の設定方法だけでなく、各技術がどの階層で機能しているのかを理解することが重要だと分かりました。
6. 独自ドメインの整理
制作初期には、Webサイトやサービスごとに独自ドメインが必要であると考え、複数のドメインを取得しました。
しかし、Webサーバーでは、一つのドメインの下に複数のディレクトリを設けたり、サブドメインを使用したりすることで、複数のサービスを公開できます。
必ずしもサービスごとに新しい独自ドメインを取得する必要はありません。
このことを理解してからドメイン構成を見直し、現在は主として次の二つに整理しています。
- aimm-earth.org:WordPressを中心とした一般Webサイト
- aimm-earth.xyz:VPS上の独自Webアプリケーションとデータ配信
ドメインは単にWebサイトの名前を表すものではなく、DNSを通じて各サーバーやサービスへ接続するための仕組みでもあります。
そのため、ドメイン構成を考える際には、Webサイトの見せ方だけでなく、サーバーやアプリケーションの配置も含めて検討する必要があります。
7. WordPressと衛星画像ビューアの連携
システム構成を検討する際に、もう一つ時間を要したのが、WordPressと独自の衛星画像ビューアの連携方法でした。
制作初期には、WordPressから外部のWebアプリケーションを利用するためには、PHPやWordPressのスニペットなどを用いて、何らかの連携プログラムを作成する必要があると考えていました。
WordPressについては、テーマの設定やページ編集、プラグインの利用方法を解説する記事や動画が多数あります。
特にLightningについては、Webロードなどが公開している解説動画が、WordPressの機能を理解する上で参考になりました。
しかし、WordPressと別サーバー上の独自Webアプリケーションを組み合わせる方法については、当初、適切な構成を見つけるまでに時間がかかりました。
その後、HTMLのiframeを利用すれば、独立したWebページをWordPressのページ内へ埋め込めることが分かりました。
衛星画像ビューアをVPS側で独立したWebアプリケーションとして構築しておけば、WordPress側にはiframeを配置するだけで、その画面を表示できます。
この仕組みにより、WordPressと衛星画像ビューアを無理に一つのアプリケーションへ統合する必要がなくなりました。
8. 制作過程から得られた知見
AIMMホームページの制作では、Linux、Apache、MariaDB、PHP、WordPress、HTML、CSS、JavaScriptなど、多くの技術を扱いました。
それぞれの技術には専門的な解説書や教材がありますが、実際にWebサービスを構築する際には、それらをどのように組み合わせるかが問題になります。
特に重要だったのは、各システムの役割と相互の関係を整理することでした。
WordPressはWebサイトのコンテンツを管理し、VPSは独自のWebアプリケーションや大容量データを扱う。
必要な画面はiframeで表示し、データの受け渡しが必要な場合には、その目的に適した連携方法を用意する。
このように役割を分けて考えることで、システム全体の構成を単純化できました。
また、必要な機能をすべて自前で構築することが、必ずしも合理的ではないことも分かりました。
独自性が必要な部分は自分で開発し、一般的な機能は既存のサービスを利用するという役割分担が、AIMMホームページの構築・運用には適していました。
9. まとめ
AIMMホームページのWebシステムは、当初検討していたVPS一台への集約から、用途に応じて二つのサーバーを使い分ける構成へ変わりました。
その過程では、WordPressの動作環境、メールの管理、ドメインの構成、システム間の連携など、さまざまな技術的課題に直面しました。
最終的に重要だったのは、個々の技術をすべて自分で実装することではなく、それぞれの技術が担当する役割を整理し、適切に組み合わせることでした。
関連技術・キーワード: XServer / VPS / Linux / Apache / MariaDB / PHP / WordPress/ DNS / SPF / DKIM / DMARC / iframe

