ToolNote
💡 Tips

XServerレンタルサーバーにNext.js静的サイトをFTP＋GitHub Actionsで自動デプロイする手順

はじめに：VPSなしでNext.jsをXServerに載せられる

「Next.jsを試したいけど、VPSを契約するほどでもない」「すでにXServerのレンタルサーバーを持っているから使い回したい」――個人開発あるあるの悩みです。

結論から言うと、Next.jsの静的エクスポート（output: 'export'）を使えば、XServerの通常レンタルサーバーへ普通のHTMLとして配信できます。 さらにGitHub Actionsでビルド→FTPアップロードを自動化すれば、git pushだけでデプロイが完結します。

本記事ではゼロから動かすための最小手順を解説します。

前提条件

項目内容
サーバーXServer レンタルサーバー（スタンダード以上）
Node.jsローカルに v18 以上
Next.js13.4 以上（App Router / Pages Router どちらでも可）
リポジトリGitHub（パブリック・プライベートどちらも可）

XServerはNode.jsのサーバーサイド実行には対応していないため、next startは使えません。静的エクスポートのみが前提です。

Step 1: Next.jsを静的エクスポート設定にする

next.config.js（またはnext.config.ts）に output: 'export' を追加します。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // サブディレクトリにデプロイする場合はbasePath/assetPrefixも設定
  // basePath: '/myapp',
  // assetPrefix: '/myapp',
  images: {
    // next/imageの最適化はサーバーが必要なのでunoptimizedにする
    unoptimized: true,
  },
};

module.exports = nextConfig;

ローカルでビルドを確認します。

npm run build
# outディレクトリが生成されればOK
ls out/

out/ 配下にHTMLやCSSが展開されていれば静的エクスポート成功です。

注意点

  • next/image の最適化機能はサーバーが必要なため unoptimized: true が必要
  • getServerSideProps や Route Handlers（app/api/）はビルドエラーになる
  • 動的ルートは generateStaticParams で事前生成する必要がある

Step 2: XServerのFTP情報を確認する

XServerのサーバーパネル（https://secure.xserver.ne.jp/xapanel/）にログインし、以下を確認・メモします。

  • FTPホスト名: sv****.xserver.ne.jp（サーバーパネルの「サーバー情報」に記載）
  • FTPユーザー名: XServerのIDと同じ
  • FTPパスワード: XServerのパスワード
  • デプロイ先パス: /home/<ユーザー名>/<ドメイン>/public_html/

セキュリティ補足: XServerはSFTP（SSH）にも対応しています。後述のGitHub Actionsでは FTP_PASSWORD をシークレットで管理するため、パスワードが漏洩するリスクは低いですが、本番運用時はSFTPへの切り替えも検討してください。

Step 3: GitHubシークレットを登録する

GitHubリポジトリの Settings → Secrets and variables → Actions から以下を登録します。

シークレット名値
FTP_HOSTXServerのFTPホスト名
FTP_USERNAMEFTPユーザー名
FTP_PASSWORDFTPパスワード
FTP_SERVER_DIR/home/<ユーザー名>/<ドメイン>/public_html/

Step 4: GitHub Actionsワークフローを作成する

.github/workflows/deploy.yml を作成します。

name: Deploy to XServer

on:
  push:
    branches:
      - main  # mainブランチへのpushでトリガー

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build (static export)
        run: npm run build
        # next.config.js に output: 'export' があれば out/ が生成される

      - name: Deploy to XServer via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./out/
          server-dir: ${{ secrets.FTP_SERVER_DIR }}
          # 差分のみアップロードして時間を節約
          dangerous-clean-slate: false

ポイント解説

  • SamKirkland/FTP-Deploy-Action は .ftp-deploy-sync というハッシュファイルをサーバーに置き、差分ファイルのみアップロードします。初回は全ファイル、2回目以降は変更分だけなので高速です。
  • dangerous-clean-slate: true にすると毎回全削除→全アップロードします。キャッシュ問題が起きたときの切り札として覚えておくと便利です。
  • Node.jsバージョンはXServerのビルド環境ではなく、GitHub ActionsのUbuntu上でビルドするため、ローカル開発環境と合わせれば問題ありません。

Step 5: push して動作確認

git add .
git commit -m "add: GitHub Actions deploy workflow"
git push origin main

GitHub の Actions タブでワークフローが走り、✅ になれば完了です。XServerのドメインURLにアクセスして、Next.jsサイトが表示されることを確認しましょう。

トラブルシューティング

ビルドは成功するがページが真っ白

assetPrefix や basePath の設定が抜けているケースが多いです。サブディレクトリ（例: example.com/blog/）へデプロイする場合は必ず設定してください。

FTPアップロードが途中で止まる

ファイル数が多いと初回アップロードがタイムアウトすることがあります。exclude オプションで不要ファイルを除外するか、chunk-size を調整してください。

画像が表示されない

next/image に unoptimized: true が設定されているか確認してください。また、out/ 配下の _next/static/ が正しくアップロードされているかFTPクライアントで確認しましょう。

404エラーが出る

XServerはデフォルトで Apache を使用しています。SPAライクなクライアントサイドルーティングを使う場合は、out/ に .htaccess を置いてリライトルールを追加する必要があります。ただし Next.js の静的エクスポートは各ページが独立したHTMLファイルになるため、通常は .htaccess 不要です。

この構成のメリット・デメリット

内容
✅ メリットVPS不要・月額費用ゼロ追加・既存XServerをそのまま活用
✅ メリットgit push 一発で自動デプロイ
✅ メリット静的ファイルなので表示が速く、セキュリティリスクが低い
❌ デメリットSSR・APIルートは使えない
❌ デメリットFTPは厳密にはSFTPより安全性が下がる（FTPS設定推奨）
❌ デメリット大量ファイルの初回アップロードは時間がかかる

個人ブログ・ポートフォリオ・LP・ドキュメントサイトなど、サーバーサイド処理が不要なサイトであればこの構成は非常にコスパが高いです。

🔗 おすすめサービス レンタルサーバー エックスサーバー

まとめ

XServerのレンタルサーバーへNext.js静的サイトをデプロイする手順をまとめます。

  1. next.config.js に output: 'export' と images.unoptimized: true を追加
  2. XServerのFTP情報を確認してGitHubシークレットに登録
  3. .github/workflows/deploy.yml を作成してFTP自動デプロイを設定
  4. git push → GitHub Actionsが自動でビルド＆アップロード

SSRが不要な個人開発サイトであれば、この最小構成で十分実用に耐えます。Vercelほどの機能はありませんが、既存のXServerを活かしてNext.jsの開発体験を手に入れるコスパの良い選択肢としてぜひ試してみてください。

Next.jsの静的エクスポートやApp Routerの詳細を体系的に学びたい方には、公式ドキュメントに加えて書籍も有効です。

📚 おすすめ書籍

Next.js超入門

Next.jsの基礎から静的生成まで体系的に学べる入門書

Amazonで見る →
#Next.js #XServer #GitHub Actions #静的サイト #個人開発 #デプロイ