エックスサーバーで静的サイトを公開する手順
SSH + rsync デプロイ完全ガイド

なぜエックスサーバーか

静的サイトのホスティング先には選択肢が多い。Netlify、Vercel、GitHub Pages、AWS S3+CloudFront、そしてレンタルサーバー。その中でエックスサーバーを選ぶ理由は、日本国内での実績・速度・コストパフォーマンスの3点に集約される。

このサイト（ToolShare Lab）自体がエックスサーバーで稼働している。110以上のツールと40以上のガイド記事を含む静的サイトを、SSH + rsyncで毎回数秒でデプロイしている。その実体験をもとに、メリットとデメリットを整理する。

「WordPressサーバー」というイメージが強いエックスサーバーだが、静的サイトとの相性は抜群だ。WordPress不要でHTML/CSS/JSだけで構成するサイトなら、サーバーリソースの大半を静的ファイル配信に使えるため表示が速い。PHPの問い合わせフォームも併用できるのは、Netlify等にはない強みだ。

エックスサーバーは、日本国内で静的サイトを公開するなら第一候補になるレンタルサーバーだ。

プラン選び

エックスサーバーには3つのプランがある。結論から言うと、静的サイトなら「スタンダード」で十分だ。月間数百万PVの大規模サイトでない限り、上位プランは不要になる。

静的サイトはHTMLファイルの集合なので容量を食わない。ToolShare Labは110ツール＋40ガイド＋画像・CSSを合わせても数十MB程度だ。300GBのスタンダードプランで容量が不足することはまずない。転送量も無制限なので、アクセス増加でサーバーが止まる心配もない。

エックスサーバーのスタンダードプランは、月額990円で静的サイトに必要な機能が全て揃っている。

契約からドメイン設定まで

エックスサーバーの契約からドメイン設定まで、5ステップで完了する。所要時間は約30分だ。

ステップ1: 新規申し込み

エックスサーバー公式サイトから「お申し込み」ボタンをクリックし、「新規お申し込み」を選択する。プランは「スタンダード」を選ぶ。

ステップ2: アカウント情報の入力

メールアドレス、パスワード、氏名、住所、電話番号を入力する。個人事業主の場合は「個人」で申し込んで問題ない。

ステップ3: ドメイン取得

エックスサーバー申し込み時に独自ドメインを同時取得できる。キャンペーン中なら.comや.netが永久無料になることもある。既に他社でドメインを持っている場合はこのステップをスキップし、後からドメインを追加する。

ステップ4: ドメインの追加

サーバーパネルにログインし、「ドメイン設定」→「ドメイン設定追加」で独自ドメインを追加する。「無料独自SSLを利用する」と「高速化・アクセス数拡張機能（Xアクセラレータ）を有効にする」にチェックを入れる。

ステップ5: ネームサーバー設定

他社でドメインを取得した場合は、ドメイン管理画面でネームサーバーをエックスサーバーのものに変更する。

ns1.xserver.jp
ns2.xserver.jp
ns3.xserver.jp
ns4.xserver.jp
ns5.xserver.jp

ネームサーバーの変更が反映されるまで最大48時間かかるが、通常は数時間で完了する。反映後、http://あなたのドメイン/ にアクセスすると「このウェブスペースへは、まだホームページがアップロードされていません」という初期画面が表示される。これでサーバー側の準備は完了だ。

SSH設定とrsyncデプロイ

ここからが本題だ。FTPクライアントでファイルを1つずつアップロードする時代は終わった。SSH + rsyncを使えば、ローカルのビルド結果をサーバーに差分転送できる。変更のあったファイルだけを転送するため、数百ファイルのサイトでも数秒でデプロイが完了する。

4-1. SSH鍵ペアの生成

まず、ローカルマシンでSSH鍵ペアを生成する。既に鍵を持っている場合はこのステップをスキップできる。

# ed25519鍵を生成（推奨）
ssh-keygen -t ed25519 -C "your-email@example.com" -f ~/.ssh/id_ed25519_xserver

# パスフレーズを設定（推奨）
# Enter passphrase: ********

# 生成された鍵を確認
ls -la ~/.ssh/id_ed25519_xserver*
# id_ed25519_xserver      ← 秘密鍵（絶対に共有しない）
# id_ed25519_xserver.pub  ← 公開鍵（サーバーに登録する）

4-2. エックスサーバーでSSHを有効化

サーバーパネルにログインし、「SSH設定」を開く。

1. 「SSH設定」→「ONにする」をクリック
2. 「公開鍵登録・更新」タブを開く
3. ローカルで生成した公開鍵の内容をコピーして貼り付ける

# 公開鍵の内容をクリップボードにコピー（macOS）
pbcopy < ~/.ssh/id_ed25519_xserver.pub

# Linuxの場合
cat ~/.ssh/id_ed25519_xserver.pub | xclip -selection clipboard

4-3. SSH接続設定（~/.ssh/config）

毎回サーバー名やポート番号を入力するのは手間なので、~/.ssh/configにエイリアスを設定する。

# ~/.ssh/config に追加
Host xserver
    HostName sv12345.xserver.jp
    User your-server-id
    Port 10022
    IdentityFile ~/.ssh/id_ed25519_xserver

HostName はサーバーパネルの「サーバー情報」で確認できる。ポートは全ユーザー共通で10022だ。これでssh xserverと入力するだけで接続できるようになる。

# 接続テスト
ssh xserver

# パスフレーズ付き鍵の場合、ssh-agentに登録しておくと毎回入力不要
ssh-add ~/.ssh/id_ed25519_xserver

4-4. rsyncでデプロイ

SSH接続が確認できたら、rsyncでデプロイする。rsyncはローカルとリモートのファイルを比較し、変更があったファイルだけを転送する。FTPと違って差分転送なので高速だ。

# 基本のrsyncコマンド
rsync -avz --delete \
  --exclude='.htaccess' \
  --exclude='ads.txt' \
  ./public/ xserver:~/example.com/public_html/

オプションの意味は以下の通り。

4-5. deploy.shの作成（実践版）

実際にToolShare Labで使っているデプロイスクリプトに近い形を紹介する。ビルドとデプロイをワンコマンドで実行し、パーミッション問題（403エラー）も自動で解決する。

#!/bin/bash
# deploy.sh — 静的サイトのビルド＆デプロイ

set -euo pipefail

# === 設定 ===
REMOTE_HOST="xserver"
REMOTE_PATH="~/example.com/public_html/"
LOCAL_BUILD="./public/"

# === ビルド ===
echo "Building..."
npx gulp build
echo "Build complete."

# === rsyncデプロイ ===
echo "Deploying to ${REMOTE_HOST}..."
rsync -avz --delete \
  --chmod=Du+rwx,Dgo+rx,Fu+rw,Fgo+r \
  --exclude='.htaccess' \
  --exclude='ads.txt' \
  --exclude='google*.html' \
  --exclude='vendor/' \
  --exclude='api/' \
  ${LOCAL_BUILD} ${REMOTE_HOST}:${REMOTE_PATH}

# === パーミッション修正 ===
echo "Fixing permissions..."
ssh ${REMOTE_HOST} "find ${REMOTE_PATH} -type d -exec chmod 755 {} \; && \
                    find ${REMOTE_PATH} -type f -exec chmod 644 {} \;"

echo "Deploy complete!"

--exclude で除外しているのは、サーバー側で直接管理するファイルだ。.htaccessはリダイレクトやキャッシュ設定を含むため、デプロイで上書きしたくない。ads.txtやgoogle*.html（Search Console認証ファイル）も同様だ。PHPのAPIファイルがある場合はapi/ディレクトリも除外する。

無料独自SSLの設定

エックスサーバーではLet's Encryptの無料SSL証明書をボタン一つで有効化できる。ドメイン追加時に「無料独自SSLを利用する」にチェックを入れていれば、既に有効になっているはずだ。

SSL設定の確認・追加手順

1. サーバーパネルにログイン
2. 「SSL設定」をクリック
3. 対象ドメインを選択
4. 「独自SSL設定追加」タブで「確認画面へ進む」→「追加する」

SSL証明書の反映には最大1時間程度かかる。反映後、https://あなたのドメイン/ でサイトが表示されることを確認する。

ただし、SSL設定だけではhttp://でアクセスした場合にHTTPSにリダイレクトされない。次のセクションで.htaccessを使ったHTTPSリダイレクトを設定する。

.htaccessでのリダイレクト・キャッシュ設定

.htaccessはApacheの設定ファイルで、リダイレクト・キャッシュ・圧縮などをディレクトリ単位で制御できる。静的サイトのパフォーマンスと正規化に不可欠な設定をまとめて紹介する。

.htaccessの設定は当サイトの.htaccessジェネレーターを使えば、画面上でオプションを選ぶだけで生成できる。手書きが面倒な場合はぜひ活用してほしい。

6-1. HTTPS強制 + trailing slashの統合

http://からhttps://へのリダイレクト、wwwなしへの統合、末尾スラッシュの統一を1つのルールにまとめる。リダイレクトが2段階になるとPageSpeed Insightsで減点されるため、1段リダイレクトに統合するのがポイントだ。

RewriteEngine On

# HTTPS強制 + www なし + trailing slash 統合（1段リダイレクト）
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

# 末尾スラッシュ追加（ファイル以外）
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ https://example.com/$1/ [R=301,L]

6-2. Gzip圧縮

HTML、CSS、JavaScriptをGzip圧縮して転送量を削減する。エックスサーバーではmod_deflateが使える。

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE text/xml
</IfModule>

6-3. ブラウザキャッシュ

静的ファイルのキャッシュ期間を設定する。CSS/JSはビルド時にハッシュ付きファイル名にするのが理想だが、そうでない場合でも適切なキャッシュ期間を設定することで再訪問時の表示速度が大幅に向上する。

<IfModule mod_expires.c>
    ExpiresActive On

    # HTML — 短めに設定（更新頻度が高い）
    ExpiresByType text/html "access plus 1 hour"

    # CSS / JS — ビルドでファイル名にハッシュを付けるなら長め
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"

    # 画像 — 長めに設定
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"

    # フォント
    ExpiresByType font/woff2 "access plus 1 year"
    ExpiresByType font/woff "access plus 1 year"
</IfModule>

6-4. セキュリティヘッダー

<IfModule mod_headers.c>
    # クリックジャッキング防止
    Header set X-Frame-Options "SAMEORIGIN"

    # XSS防止
    Header set X-Content-Type-Options "nosniff"

    # リファラー制御
    Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

# .htaccessを直接アップロードする場合
scp .htaccess xserver:~/example.com/public_html/.htaccess

sitemap.xmlとrobots.txtの設定方法も合わせて確認しておくと、サイト全体のSEO設定が万全になる。

Gulpタスクとの連携

静的サイトの開発にGulpを使っている場合、ビルドからデプロイまでをワンコマンドで実行できるようにするのが理想だ。ToolShare Labではnpm run deployで全工程が完了する。

package.jsonのscripts設定

{
  "scripts": {
    "gulp": "gulp",
    "build": "gulp build",
    "deploy": "bash deploy.sh",
    "deploy:dry": "bash deploy.sh --dry-run"
  }
}

deploy:dryはドライランモード。実際にファイルを転送せず、転送対象のファイル一覧だけを表示する。本番デプロイ前の確認に使う。deploy.shに以下を追加すれば対応できる。

# deploy.sh にドライランオプションを追加
DRY_RUN=""
if [ "${1:-}" = "--dry-run" ]; then
    DRY_RUN="--dry-run"
    echo "=== DRY RUN MODE ==="
fi

rsync -avz --delete ${DRY_RUN} \
  --chmod=Du+rwx,Dgo+rx,Fu+rw,Fgo+r \
  --exclude='.htaccess' \
  --exclude='ads.txt' \
  ${LOCAL_BUILD} ${REMOTE_HOST}:${REMOTE_PATH}

Gulpのビルド→デプロイの流れ

# 1. 開発中（ライブリロード付き）
npm run gulp

# 2. 本番ビルドのみ
npm run build

# 3. ビルド＋デプロイ（本番）
npm run deploy

# 4. ドライラン（転送対象の確認のみ）
npm run deploy:dry

PWA対応のmanifest.jsonもGulpのビルドに含めておけば、デプロイ時に一緒にアップロードされる。

ECサイトを運営する場合は特商法表記を忘れずに作成しよう。特商法テンプレート自動生成ツールを使えば、必要項目を入力するだけで法令に準拠した表記を生成できる。

まとめ

エックスサーバーで静的サイトを公開する全体の流れを整理する。

初回セットアップは約1.5時間で完了する。一度設定すれば、以降はnpm run deployの一発で数秒デプロイが可能になる。FTPでファイルを1つずつアップロードしていた時代には戻れなくなるはずだ。

エックスサーバーは静的サイトのホスティングに最適なレンタルサーバーだ。SSH + rsyncでの快適なデプロイ環境を、ぜひ試してほしい。