ドキュメント

公開ガイド

静的サイトの公開、フレームワークのビルド出力、独自ドメイン、更新手順を DeployPages で進めるための実務ガイドです。

React を公開Next.js の静的出力DNS を確認SSL を確認Meta タグ生成

はじめに

公開とは、手元のサイトファイルをブラウザで開ける URL にすることです。DeployPages は静的出力向けなので、最初の公開はサーバー設定ではなく、フォルダをアップロードするところから始められます。

方法 1: ファイルやフォルダをアップロード

HTML、CSS、JavaScript、画像、または完成したビルドフォルダがある場合に最も早い方法です。

向いている用途

ランディングページ、個人サイト、オンライン履歴書、プロトタイプ、静的ドキュメント、ブラウザだけで動くフロントエンド出力に向いています。
  • 1
    公開するフォルダを用意する

    アップロードするフォルダのルートに index.html を置き、CSS、JavaScript、画像などページが参照するファイルを同じフォルダ配下にまとめます。

    フォルダ構成の例
    my-site/├── index.html├── styles.css├── script.js└── images/    ├── logo.png    └── hero.jpg

    よくあるつまずき

    index.html がない、または深いサブフォルダに入っていると、アップロード後にトップページとして表示できません。
  • 2
    アップロード画面を開く

    DeployPages のアップロード画面を開きます。まず一時プロジェクトとして公開し、あとからサインインして保持することもできます。

  • 3
    フォルダをアップロードする

    フォルダ全体をアップロード画面にドラッグするか、ファイル選択から指定します。フレームワークの場合は、ソースではなくビルド後の出力フォルダをアップロードします。

  • 4
    公開リンクを開く

    アップロードが完了すると、すぐに開ける公開リンクが発行されます。表示確認、共有、クライアントへのプレビューに使えます。

方法 2: CLI で公開

同じビルドを繰り返し公開するプロジェクトでは、スクリプト、CI、リリース手順に組み込みやすい方法です。

手順を固定したい場合に使う

単発のプレビューはブラウザからのアップロードが簡単です。毎回同じ出力フォルダを同じ手順で公開したい場合は、CLI のフローが向いています。

CLI をインストール

普段使っているパッケージマネージャーで CLI をグローバルにインストールします。

npm install -g @deploypages/cli

認証する

ログインコマンドを実行し、ブラウザで認証を完了します。

deploypages login

現在のフォルダを公開する

ビルド出力フォルダに移動してから公開コマンドを実行します。

deploypages deploy

フレームワークのビルドガイド

React、Vue、Next.js などは、アップロード前にビルドが必要です。目的はどれも同じで、ブラウザが直接開ける HTML、CSS、JavaScript、画像ファイルを生成することです。

ビルドとは

ビルドは、フレームワークのソースコードを公開できる静的ファイルへ変換する手順です。

React / Vue / Vite

Command:npm run build
Output:dist/

プロジェクトのルートではなく、生成された dist フォルダをアップロードします。

Next.js 静的出力

Command:npm run build
Output:out/

ビルド前に next.config.js で output: 'export' を設定します。

通常の HTML

Command:ビルド不要
Output:既存のフォルダ

index.html をフォルダのルートに置いておきます。

Hugo / Hexo

Command:hugo または hexo generate
Output:public/

生成された public フォルダをアップロードします。

Next.js 静的出力の設定例

next.config.js
/** @type {import('next').NextConfig} */const nextConfig = {  output: 'export',  images: { unoptimized: true },};
module.exports = nextConfig;

静的出力の制限

API Routes、サーバーサイドレンダリング、Middleware などサーバー実行を前提にした機能は、静的出力では使えません。

独自ドメイン

最初に公開リンクで表示を確認したあと、DeployPages では自分の独自ドメインを接続できます。検証用 URL から、ブランドや案件用の正式な URL へ移行できます。

接続できるドメイン

レジストラや DNS サービスで管理していて、DNS レコードを編集できるドメインであれば接続できます。

手順 1: コンソールでドメインを追加

プロジェクト設定を開き、ドメインタブから接続したいホスト名を追加します。

手順 2: DNS を設定

DeployPages が提示する DNS レコードを、所有確認とルーティングのために DNS 側へ追加します。

手順 3: 検証と HTTPS を待つ

DNS が反映されるとドメインの状態が正常になり、SSL証明書と HTTPS の準備が完了します。

種類ホスト値目的
CNAMEwwwcname.deploypages.siteアクセスを DeployPages に向ける
TXT_deploypages-challengedeploypages-verify=...ドメイン所有権を確認する

ホスト名の選び方

  • www.example.com を接続する場合は www を使います。
  • example.com のようなルートドメインを接続する場合は @ を使います。
  • blog.example.com を接続する場合は blog のようなサブドメイン名を使います。

サイトを更新する

同じ手順で新しいバージョンへ

更新も初回公開と同じ考え方です。最新の出力を作り、アップロードし、公開中のバージョンを置き換えます。
  • 1
    ソースを編集

    文言、スタイル、画像、ファイルをローカルで変更します。

  • 2
    必要なら再ビルド

    フレームワークを使っている場合は、新しいビルド出力フォルダを生成します。

  • 3
    プロジェクトを開く

    DeployPages のプロジェクト画面に戻ります。

  • 4
    新しいバージョンをアップロード

    前回の出力を最新フォルダで置き換えます。公開履歴が残るため、どのバージョンを出したか追跡できます。

アップロードが完了すると新しいビルドが公開され、必要な場合は以前のバージョンに戻せます。

よくある質問

開発者でなくても使えますか？
はい。サイトが静的ファイルとして書き出されていれば、フォルダをアップロードするだけで公開できます。
公開後に 404 が出るのはなぜですか？
最も多い原因は index.html が見つからないことです。アップロードするフォルダのルートに、入口となる index.html があるか確認してください。
React や Vue のルートを更新すると崩れる場合は？
DeployPages は一般的な SPA fallback に対応しています。ただし、ビルド出力が静的サイトとして正しく生成されている必要があります。
動画や大きなファイルもアップロードできますか？
アップロードできますが、大きなメディアは最適化したうえで、用途に合う配信方法を選ぶほうが表示は安定します。
サイトにパスワードをかけられますか？
パスワード保護を含むプランで利用できます。公開前のプレビュー、社内ドキュメント、段階的な公開に使えます。
公開事例へ