静的な成果物の背後にサーバーはありません。これらのファイルの誤りは、すべての訪問者にとっての誤りになります。以下はReact2Staticがあなた自身の成果物に対して実行する全項目で、それぞれに直し方を付けています。
以下の例に出てくるパッケージ名・パス・数値はあくまで例です。ビルダーはあなたのプロジェクトの実際の値を埋めます。
表示されるもの
dist/
.env
index.html
assets/index-a3f1c2.jsファイル全体を誰でもダウンロードできます。中の値をすべてローテーションしたうえで、.env をビルドがそのままコピーするディレクトリ（通常は public/）の外に移してください。
表示されるもの
const apiKey = process.env.API_KEY;
fetch(url, { headers: { Authorization: `Bearer ${apiKey}` } });
// Vite turns process.env into {} — the header goes out as
// "Bearer undefined" and the API answers 401. No error in the console.Vite は process.env を空オブジェクトに置き換えるため、この値はブラウザでは単に undefined になります。エラーも警告も出ず、リクエストはその値を持たないまま送信され、API は 401 を返します。import.meta.env.VITE_〜 経由で読むか、vite.config で define してください。
直し方
const apiKey = import.meta.env.VITE_API_KEY;表示されるもの
Uncaught ReferenceError: process is not defined
at index-a3f1c2.js:1:2043ブラウザには process オブジェクトが存在しないため、この行に到達した時点でエラーになり、多くの場合は真っ白な画面になります。Vite ではブラウザで使う値は import.meta.env 経由で読み、変数名を VITE_ で始める必要があります。
直し方
const apiKey = import.meta.env.VITE_API_KEY;表示されるもの
const API = "http://localhost:3000/api";http://localhost:3000/api が含まれています。このアドレスはビルドしたマシン上にしか存在しないため、すべての訪問者でこのリクエストは失敗します。公開されている URL に変更してください。
直し方
const API = "https://api.example.com";表示されるもの
dist/
assets/index-a3f1c2.js
assets/index-9b2e01.css静的ホスティングは index.html を入口ページとして配信します。これがないと訪問者にはファイル一覧か 404 が表示されます。ビルドが実際に何を出力しているか確認してください。
表示されるもの
<title>Vite + React + TS</title>現在は「Vite + React + TS」です。検索結果や共有されたリンクにはこの文字列が表示されます。index.html で変更してください。
直し方
<title>Your product name — what it does, in one line</title>ブラウザのタブも検索結果も <title> タグを使います。index.html に追加してください。
直し方
<title>Your product name — what it does, in one line</title>検索エンジンはページから適当な断片を拾って表示します。<meta name="description"> の一文が、クリックされるかどうかを決めます。
直し方
<meta name="description" content="One clear sentence about what this page is for." />スマートフォンはデスクトップ幅で描画して縮小するため、文字がすべて極端に小さくなります。index.html に <meta name="viewport" content="width=device-width, initial-scale=1"> を追加してください。
直し方
<meta name="viewport" content="width=device-width, initial-scale=1" />チャットアプリや SNS に共有すると、タイトルも画像もない裸の URL として表示されます。og:title、og:description、og:image を追加してください。
直し方
<meta property="og:title" content="Your product name" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://example.com/og.png" />表示されるもの
<link rel="icon" type="image/svg+xml" href="/vite.svg" />ブラウザのタブやブックマークに白紙のアイコン、あるいはテンプレート由来のロゴが表示されます。自分の favicon を用意して index.html から参照してください。
直し方
<link rel="icon" href="/favicon.ico" sizes="any" />スクリーンリーダーは読み上げ方の判断に、ブラウザは翻訳を提案するかどうかの判断に使います。lang="ja"、またはページの実際の言語を指定してください。
直し方
<html lang="en">なくてもクロールはされますが、robots.txt はサイトマップの場所を伝える場所です。「公開」ステップで追加できます。
直し方
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml表示されるもの
dist/assets/index-a3f1c2.js 2,418.55 kB │ gzip: 731.20 kB
(!) Some chunks are larger than 500 kB after minification.モバイル回線では何も表示されない時間が数秒続きます。重い部分を動的 import() で切り出すと、初回表示は大きく改善します。
直し方
const Editor = lazy(() => import('./Editor'));表示されるもの
dist/assets/hero-8f2a1b.png 4,102.11 kB大きな画像やフォントは初回描画を遅らせます。画像を WebP に変換し、実際に表示するサイズに縮小するだけで大半は削減できます。