Xserver Staticでの静的コンテンツ、SSGやSPAのデプロイとGitHub Actionsによる自動化について
ハコザキです。
本日はXserver Staticについて説明します！
Xserver Staticとは、国産の静的ファイル専用のホスティングサービスです。
主な特徴は公式サイトをご確認ください！！高速かつ安全性に優れたサーバー環境を提供する、静的コンテンツの運営に特化したクラウドホスティングサービスとのことです。
Xserverスタティック | 静的コンテンツ専用クラウドホスティングサービス
今回はシンプルなページやSSG、SPAのデプロイを検証してみました。
また、Basic認証やGitHub Actionsを利用した自動デプロイ化まで実際に検証してみました。
最短でコンテンツを公開
一番簡単に反映させる方法をご紹介します。
まずはXserver Staticのサービスページにアクセスします。
サービスTOPページ内、ファイル管理ボタンをクリックするとファイルマネージャが起動します。
ローカルからファイルをアップロードすることでホスティングされます。非常に簡単ですね！
上記の手順は最短で公開する方法になります。
SSGのデプロイ（Astro SSG Mode）
上述では、単純なHTMLのみアップロードしておりました。
続いてSSGでの静的サイトも同様にアップロードできるか検証してみました。
npm run buildで出力されたdist/配下を使用します。
ファイル管理ページからディレクトリ構造はそのままアップロードすることで反映されました。
参考までに、Photoページでfetchしてbuild時に静的コンテンツとして生成しております。
---
import Layout from '../layouts/Layout.astro';
type Photo = {
albumId: number;
id: number;
title: string;
url: string;
thumbnailUrl: string;
}
const response = await fetch('https://jsonplaceholder.typicode.com/photos?_start=0&_limit=5')
const photos: Photo[] = await response.json()
---
<Layout title="Blog">
<main>
<h1>Blog</h1>
<ul>
{photos.map((photo) => (
<li>
<img src={photo.thumbnailUrl} alt={photo.title} />
<h2>{photo.title}</h2>
</li>
))}
</ul>
<a href="/">HOME</a>
</main>
</Layout>SPAのデプロイ（Remix SPA Mode）
Xserver Staticでは静的コンテンツのホスティングが可能ということで、
クライアントサイドだけで動作するSPAもデプロイできるのか検証してみました。
今回はRemixのSPAモードで、デモSPAを実装しました。
npm run buildで出力されたbuild/配下を使用します。
先ほど同様、ファイル管理ページからそのままアップロードすることで、
SPAもホスティングできました！👏
参考までに、Photoページについては
RemixのclientLoader関数を利用してクライアントサイドでfetchしています。
import { MetaFunction, useLoaderData } from "@remix-run/react";
export const meta: MetaFunction = () => {
return [
{ title: "Photo" },
{ name: "description", content: "Photoページです" },
];
};
type Photo = {
albumId: number;
id: number;
title: string;
url: string;
thumbnailUrl: string;
}
// クライアントサイドでのデータ取得
export async function clientLoader(): Promise<Photo[]> {
const response = await fetch("https://jsonplaceholder.typicode.com/photos");
const data = await response.json();
return data;
}
export default function PhotoIndex() {
const data = useLoaderData<typeof clientLoader>();
return (
<div className="font-sans p-4 flex flex-col gap-4">
<h1 className="text-3xl">Photo Page</h1>
<ul className="grid gap-4 grid-cols-2 md:grid-cols-4">
{data.slice(0, 5).map((photo) => (
<li key={photo.id} className="w-full">
<img src={photo.url} alt={photo.title} className="w-full object-cover" />
<h3 className="mt-4 text-lg font-bold text-gray-900 sm:text-xl">{photo.title}</h3>
</li>
))}
</ul>
</div>
);
}Basic認証の設定
.htaccessを編集することでBasic認証をかけることができます。
一般的な.htaccessと.htpasswdで対応する方法でうまくいきました。
SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode
AuthType Basic
AuthName "Input your ID and Password."
AuthUserFile .htpasswd
require valid-user〇〇:〇〇〇〇
こういった機能もホスティングサービスの無料プランでは対応していない！なんてこともありますので、標準でBasic認証かけることができるのは良いところかなと思います。（Basic認証のためにJSで簡易認証作るのも一つの方法ではあります..!）
GitHub Actionsを利用したXserver Staticへの自動デプロイ
実運用では、GitHub ActionsやJenkinsなどのCI/CDサービスを活用し、
FTP経由で反映するのが無難だと思います。
具体的な手順につきましてご紹介します。
今回はAstro製のSSGサイトに変更を行い、GitHubのリポジトリへpushした際に
GitHub Actionsを利用してFTPアップロードを行う自動デプロイまでをご紹介します。
Xserver Staticの設定変更・FTP情報の確認
Xserver Staticのサーバー設定ページのFTPの利用を利用するに変更します。
その後、変更するボタンからFTPサーバー（ホスト）名・ユーザー（アカウント）名を控えておきます。
また、Xserver Staticで設定したパスワードも必要になります。
GitHubリポジトリの設定
リポジトリのSettings、左袖のActions secrets and variablesからActionsを選択します。
Repository secretsのNew repository secretからFTP情報を設定します。
以下のように設定できればokです。
FTP_SERVER：FTPサーバー（ホスト）名
FTP_USERNAME：ユーザー（アカウント）名
FTP_PASSWORD：Xserver Staticで設定したパスワード
GitHub Actionsの設定
今回はSamKirkland/FTP-Deploy-Actionプラグインを利用して構築していきます。
.github/workflows/main.yml を作成し以下を記述します。
on: push
name: 🚀 Deploy website on push
jobs:
web-deploy:
name: 🎉 Deploy
runs-on: ubuntu-latest
steps:
- name: 🚚 Get latest code
uses: actions/checkout@v4
- name: 🌱 Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 20
- name: 💪 Install dependencies
run: npm install
- name: 🎁 Output static content
run: npm run build
- name: 📂 Sync files
uses: SamKirkland/FTP-Deploy-Action@v4.3.5
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
local-dir: ./dist/
exclude: .htaccessローカルでビルドしたように、Actionsでも最終的にビルドして静的コンテンツを出力します。
Nodeのセットアップから始め、npm installで依存ライブラリのインストール、npm run buildで静的コンテンツをdistに出力します。
最後に先ほど設定したFTP情報から接続してdist配下を対象に同期させることで反映されます！
※htaccessは除外しておく必要があります。
実際にmainブランチにpushすると、GitHub Actionsで無事正常に動いていることが確認できました！
microCMSと連携する場合は、microCMS公式様のブログを参考にするとサクサク進むと思います！（非常にわかりやすいです..！）
microCMSを使用した静的サイトをXserver Staticへデプロイしてみる | microCMSブログ
まとめ
今回はXserver Staticという静的コンテンツに特化したクラウドホスティングサービスについて、色々検証してみた記事になります。
WordPress製のコーポレートサイトをXserverにホスティングしており、
コーポレートサイトとは別に、サクッとLPとかをホスティングしたい会社へは需要がありそうだと思いました。
このホスティングサービスの最大の特徴は無料であることです。
VercelやNetlify, Amplifyなどの有名なホスティングサービスはデプロイまでは非常に簡単ですが、クライアントからの要望によっては運用コスト面で悩むケースもあるかと思います。
Xserver Staticを実際に使用してみましたが、基本的な開発では多少自分で色々設定が必要とはいえ、活用次第で非常に有用なサービスだと思いました！！
