生活の跡

個人的な備忘録

少人数の組織用のポータルサイトを、Gatsby+XFREE(エックスフリー)で構築する

経緯

ポータルサイト作成の動機

有期雇用のメンバーが多い少人数のチームで働いています。新しいメンバーが加わっても事業の理念や目的を共有しやすくするために、内部向けポータルサイトを作成することにしました。

共通部分は外部ファイルとして作成したいが、PHPは使えない

はじめは単純にHTML+CSSだけのファイル群をNASに置こうと考えていました。しかし、ヘッダー、フッター、サイドバーといった共通部分をは全ページに書くと変更が大変なので、header.htmlなどの外部ファイルとして用意しておき、PHPのincludeなどを使って各ページに反映したいです。しかし、使っているNASではWebサーバーが使えないので、PHPは読み込めません。。

Gatsbyへの期待と浮上した問題

調べてみると、Gatsbyという静的サイトジェネレーターを使えば、コンパイルで外部ファイルを取り込んだHTMLファイルを出力できるらしいことがわかりました。それなら開発者のPCにだけGatsbyの環境を構築し、生成したHTMLファイル群だけNASに置けるのでは!?

しかし、試してみるとNetlifyなどのホスティングサービスなどにアップロードしないとページ間遷移がうまく動作しないことが判明しました。。

teratail.com

これは、GatsbyでビルドしたHTMLファイルのaタグのhref属性のファイルパスが、ルートディレクトリ起点で構築されるためです。ホスティングサービスなどにアップロードした場合はドメイン直下(例:https://example.com/)が起点となり、Windows PC ではCドライブ直下(C:/)が起点になります。Netlifyでは公開されてしまう(有料プランなら非公開も可)し、NASでもルートディレクトリに置けない場合はどうすれば。。

解決策

代替案にはなりますが、Gatsbyで生成したHTMLファイル群を、非公開設定ができるレンタルサーバーにアップロードすることにしました。以下の理由から、レンタルサーバーにはXFREE(エックスフリー)を使うことにしました。

  • 無料で使える(容量は1GBだが、画像コンテンツが少ないサイトだから十分足りる)。
  • 非公開設定(パスワード設定)ができる。
  • Gatsbyで作ったHTMLファイル群を使える(ドメイン直下にアップロードするため)。

www.xfree.ne.jp

LAN内ではなくWeb上にサイトを構築することになってしまいますが、閲覧するためにはパスワード入力が必要になる設定ができるので問題ないと思います。そもそも理念の共有などが主目的のポータルサイトなので、漏洩リスクとなる機密情報や個人情報は含めないつもりです。

パスワード設定により、閲覧制限がかかっている

前提知識

上述の解決策を実施するために必要な前提知識は次の通りです。

  • GatsbyでHTMLファイル群をビルドできる
  • レンタルサーバーの基礎知識がある(ドメインの理解など)
  • レンタルサーバーへのファイルアップロードができる(FTPソフトを使える)

おわりに

Gatsbyの動作について理解が不十分なまま学習してしまいましたが、結果的にGatsbyを活かせる代替策にたどり着けてよかったです。

XFREEが永続的に使える保証はないですが、大規模開発ではないので運用しながら他の運用方法も探っていければよいかなと思います。