Reactアプリを公開する

distフォルダをZIPにして、ブラウザからデプロイ

Zip
File
Drag & drop zip or
single file here
Upload file
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
⭐️ 利用者200万人以上
GitHubのリポジトリからのデプロイにも対応

ビルドしたファイルの置き場所

npm run buildで出力されるのは、ブラウザで動く静的なファイル一式です。このフォルダは、アップロードした構成のまま配信されます。CLIのインストールやサーバーの設定はありません。

ビルドしたファイルの置き場所

ReactアプリをZIPでデプロイ

1. 相対パスでビルド

1. 相対パスでビルド

Viteはvite.config.jsのbaseを'./'に、Create React Appはpackage.jsonのhomepageを'.'にしてから、npm run buildを実行します。

2. 出力フォルダをZIPに

2. 出力フォルダをZIPに

distかbuildフォルダの中身を選んでZIPにします。index.htmlがZIPのいちばん上の階層にくるようにします。

3. アップロードしてPublish

3. アップロードしてPublish

tiiny.hostにZIPをドロップし、リンク名を決めて公開します。

機能

開発者向けの機能

📦 ZIPでデプロイ

Viteならdist、Create React Appならbuildの中身をZIPにしてアップロードします。

🐙 GitHubと連携

連携したリポジトリは、デフォルトブランチにpushするたびに公開中のサイトへ反映されます。無料プランでも使えます。

🌐 独自ドメイン

Soloプランでは、自分のドメインでアプリを公開できます。

📊 アクセス解析

解析用のスクリプトを入れなくても、Tinyプラン以上で訪問数や参照元がわかります。

🔲 動作確認用のQRコード

スマホで開くためのQRコードを、Tinyプラン以上で発行できます。

🕓 デプロイの巻き戻し

Tinyプラン以上は直近5つの版を保存しています。不具合のあるビルドを公開しても、前の版に戻せます。

比較

デプロイ先の選び方

Gitを使った運用やビルドの自動化まで任せたい場合はVercelやNetlify、ビルド済みのアプリを短時間で人に見せたい場合はTiiny Hostが合います。

⚡ Tiiny Host
Vercel・Netlify
Gitなしでデプロイ
ブラウザでZIPをアップロードします。
✓ 対応
Git連携が中心
解析タグなしのアクセス解析
公開したアプリの訪問数を自動で集計します(Tinyプラン以上)。
✓ 対応
サービスによる
毎月の料金
プランごとの定額で、使った量に応じた追加請求はありません。
✓ 対応
プランにより従量課金
検討されるデプロイ先 VercelNetlify
料金

個人の作品なら無料プランで

ビルド後のファイルが3MBまでなら、無料プランで公開でき、月5,000回までの訪問に対応します。画像や動画の多いアプリは、Tinyプラン(25MB)かSoloプラン(75MB)を選んでください。

無料プラン
$0/月、利用期限なし
  • ✓ 公開できるサイトは1つ
  • ✓ HTML・ZIPは3MBまで
  • ✓ 月5,000回の訪問と5GBの転送量
  • ✓ SSL付きの無料アドレス(名前.tiiny.site)
  • – 小さなTiiny Hostバナーが表示されます
容量や機能を増やすなら
$5〜/月(年払い)
  • Tiny $5 · バナーなし、アップロード回数無制限、25MBまでアップロード、アクセス解析、QRコード、フィードバックモード
  • Solo $13 · 5サイト、独自ドメイン、パスワード保護、コード・ビジュアルエディタ、API
  • Pro $31 · 15サイト、メールアドレス収集、チームメンバー、優先サポート
  • Pro Max $74 · サイト数無制限、ストレージ2TB
全プランを比較 → ⭐️ 7日間の返金保証つき

プラン別の容量

アップロードできる容量の上限
無料
3MB
HTML・ZIPなど
Tiny · $5
25MB
プロジェクトごと
Solo · $13
75MB
プロジェクトごと
Pro · $31
10GB
アカウント全体
Pro Max · $74
2TB
アカウント全体

上限は、アップロードしたビルドのフォルダ全体のサイズで判定されます。

AIエージェント対応

CIから自動で

GitHub ActionsなどのCIから、ビルドしたZIPをAPIで送れます。APIはSoloプラン以上、GitHubとの連携は全プランで使えます。

REST APIアップロード用のエンドポイントが1つあり、自動化や予約公開を組めます。
MCPサーバーClaude Codeはコマンド1行で接続。Cursor、VS Code、Windsurf、Zed、Codex、v0は数行の設定で使えます。
ClaudeコネクタClaudeのアプリとClaude Codeから、レポートや文書をその場で公開します。
スキルインストール済みのエージェントは、PDFやZIPを含む100種類以上のファイルをリンクにできます。
APIドキュメント → APIはSoloプラン以上で利用可能
upload.sh
curl -X POST https://ext.tiiny.host/v1/upload \
  -H "x-api-key: $TIINY_API_KEY" \
  -F "files=@dist.zip" \
  -F "domain=my-react-app.tiiny.site"

# → https://my-react-app.tiiny.site
# 差し替えは同じドメインにPUT

公開するアプリの例

就職用のポートフォリオ

就職用のポートフォリオ

プログラミングスクールの卒業制作を公開し、面接官にURLで見せる。

社内ツールの試作

社内ツールの試作

ViteとReactで作った試作品を、レビュー用にその日のうちに公開。

キャンペーンページ

キャンペーンページ

Reactで作った特設ページを、独自ドメインで期間限定公開。

関連記事

ビルドと公開の記事

How To Deploy a React App - A Guide to Quick and Easy Deployment

Reactが選ばれる理由と、Reactアプリをデプロイする手順、ほかの公開方法。

NextJS vs React: Key Differences and How to Choose

ReactとNext.jsの違いと、プロジェクトに合った選び方を解説した記事です。

よくある質問

Reactアプリを無料でデプロイできますか?

ビルド後のファイルが3MB以内なら、無料プランで公開できます。無料のページには小さなTiiny Hostのバナーが表示されます。

Viteで作ったアプリを公開するには?

vite.config.jsでbaseを'./'にしてnpm run buildを実行し、出力されたdistの中身をZIPにしてアップロードします。

公開したアプリが真っ白になるのはなぜですか?

srcを含むプロジェクトのフォルダをアップロードしている可能性があります。公開するのは、npm run buildで作られたdistやbuildの中身です。スタイルだけが欠ける場合は、ビルド時のパスの設定(baseやhomepage)を確認してください。

React Routerのページを再読み込みすると404になるのはなぜですか?

Tiiny Hostは、存在しないパスに404ページを返します。/aboutのようなURLを直接開くと、サーバーにはそのファイルがないため404になります。React RouterのHashRouterを使い、/#/aboutの形のURLにすると、どのページもindex.htmlから表示されます。

GitHubのリポジトリから自動でデプロイできますか?

できます。連携したリポジトリは、デフォルトブランチへのpushのたびにサイトへ反映されます。Tiiny Hostが公開するのはビルド済みのファイルのため、distなどの出力フォルダもコミットしておいてください。全プランで使え、リポジトリは75MBまでです。

Next.jsのアプリも公開できますか?

静的書き出し(static export)したNext.jsなら、出力されたフォルダをアップロードして公開できます。APIルートやサーバーサイドレンダリングのように、サーバーで動く機能は使えません。

Reactアプリにパスワードをかけられますか?

かけられません。パスワード保護は、ReactアプリやPHPのプロジェクトには対応していません。PDFやHTMLのサイトなら、Soloプラン以上で使えます。

バックエンドやデータベースも動かせますか?

動かせません。APIやデータベースは外部のサービスに置き、Reactアプリから通信する構成にします。

ビルドしたら、あとはアップロード