https://shogakusei.com/series/vercel/Cursorで作る、GitHubで保存する、の次は「出す」。押すだけで本番のURLができて、直すたびに自動で反映される置き場・Vercelの部屋を1つずつ開けていきます。ja https://shogakusei.com/series/vercel/ep09/https://shogakusei.com/series/vercel/ep09/Sat, 03 Oct 2026 22:10:58 GMTページを公開すると、世界中の誰でも、そのURLを開けるようになります。見に来るのは、人だけではありません。1秒に何千回も同じページを開いて、サイトを止めようとするアクセス。.env のような、秘密が書かれていそうなファイルを探して回るプログラム。無料プランには、使える量の枠があります。知らない誰かに枠を使い切られれば、ページは止まる。 Vercel の守りを「最初から入っているもの」「困ったときにオンにするもの」「自分でルールを作るもの」に分ける回。DDoS の自動の守りと Attack Mode は無料で、止めたアクセスは請求されません。ただし、止める前に通ったアクセスは数えられます。自分で作るルール（WAF）は、まず Log（記録だけ）で作り、10分ほど記録を見てから Deny か Challenge に変えます。手順は公式ドキュメントに沿っています。 https://shogakusei.com/series/vercel/ep08/https://shogakusei.com/series/vercel/ep08/Sat, 03 Oct 2026 16:31:24 GMTページを公開して、URLを友だちに送りました。返事は「見たよ」の一言だけ。ほかに何人が見たのかはわかりません。スマホで開くと少し待たされる気もしますが、それが自分の電波のせいなのか、ページのせいなのかも、判断がつかない。 2つの計器、Web Analytics（何人が、どのページを、どこから見に来たか）と Speed Insights（実際に見た人の画面で、どれくらい速く出たか）をオンにする回。Enable を押し、計器のコードを index.html のいちばん下に貼り、出し直して数日待ってから数字を見ます。点数は色で読み、緑（90〜100）に入れば十分。手順は公式ドキュメントに沿っていて、貼るコードが動くかは、実際には確かめていません。 https://shogakusei.com/series/vercel/ep07/https://shogakusei.com/series/vercel/ep07/Sat, 03 Oct 2026 15:19:52 GMTメモを保存したい。会員の一覧を持ちたい。「データベース　Vercel」で調べると、こんな手順が出てきます。「Storage タブから Create Database を押して、Postgres を選ぶだけ。無料で使えます」その通りに画面を開いても、Vercel Postgres という選択肢は見当たりません。その記事が古いのです。 「Vercel Postgres」「Vercel KV」は、もう作れない。今は Marketplace からデータベースを選んで作り、プロジェクトにつなぐと鍵が環境変数に自動で入り、出し直して裏側の処理から使います。ブラウザに出してよいのは、住所と publishable key だけ。画像や書類は Vercel Blob に置き、Private / Public はあとから変えられません。手順は公式ドキュメントに沿っています。 https://shogakusei.com/series/vercel/ep06/https://shogakusei.com/series/vercel/ep06/Sat, 03 Oct 2026 13:33:06 GMT第5話の結論は、「秘密の鍵は、ブラウザではなく裏側の処理で使う」でした。では、その裏側はどこにあるのか。ネットで調べると、「サーバーを借りる」「月額いくら」「Linux の設定」といった言葉が並びます。そこで手が止まる人も多いはずです。Vercel では、そこまでしなくていい。 api というフォルダにファイルを1つ置くだけで動く「裏側の処理」（Vercel Functions）の回。api/hello.mjs を置き、本番の短いURLの後ろに /api/hello を付けて開き、Observability で呼ばれた回数と動いた時間を見ます。CPU は動いた時間だけ、メモリは待ち時間も数える。無料の枠を超えたら、止まる。/api/〜 のURLは誰でも呼べます。手順は公式ドキュメントに沿っています。 https://shogakusei.com/series/vercel/ep05/https://shogakusei.com/series/vercel/ep05/Sat, 03 Oct 2026 12:26:30 GMTAIに「天気を表示するページを作って」と頼むと、たいていすぐに動くものが返ってきます。ファイルを開くと、こんな行があります。const API_KEY = "abc123..." この鍵は、あなたの名前で天気のサービスを使うための合鍵です。ファイルに書いたまま公開すると、合鍵を玄関の外に貼り出しているのと同じことになります。 ファイルに直接書かれた鍵（APIキー）を外して、Vercel の環境変数にしまう回。Environment Variables に鍵の名前と値を入れ（秘密なら Secret）、ファイルから鍵を消して裏側の処理で名前から呼び出す形にし、保存して出し直します。金庫にしまっても、ブラウザ側で使えば見える。一度 GitHub に保存した鍵は、作り直します。手順は公式ドキュメントに沿っていて、鍵を保存するところまでは試していません。 https://shogakusei.com/series/vercel/ep04/https://shogakusei.com/series/vercel/ep04/Fri, 02 Oct 2026 00:46:36 GMT第2話で、GitHub の main を直せば、同じURLの中身がすぐ新しくなるようにしました。便利になったぶん、怖くもなります。ページの色を大きく変えてみたい。でも、そのURLは名刺にも載せてある。試しに変えたら、変な状態のページを、知らない誰かがちょうど見るかもしれません。 本番のURLには触らずに、別のURLで確かめる「下書きのURL（プレビュー）」の回。GitHub で下書き用のブランチを作って直し、Vercel で下書きのURLを開いて確かめ、良ければプルリクエストで main に合流させて本番に出します。まずければ Instant Rollback で前の本番へ。無料で一瞬で戻せるのは、ひとつ前まで。戻したら、直した版を Undo Rollback で選び直すまで、直しても本番に出ません。 https://shogakusei.com/series/vercel/ep03/https://shogakusei.com/series/vercel/ep03/Thu, 01 Oct 2026 22:14:51 GMT困るのは、そのURLを名刺やプロフィールに書こうとしたときです。shogakusei-vercel-demo.vercel.app のようなURLは、口で伝えにくく、覚えてもらいにくい。末尾には、いつも vercel.app が付いています。これは Vercel が貸してくれている住所です。借りている住所なので、表札に自分の名前を大きく書くことはできません。 買ったドメインを Vercel のプロジェクトにつなぎ、https:// で開けるようにする回。Settings → Domains で独自ドメインを足し、ドメインの住所録（DNS）に Vercel の画面に出た値を書き足し、表示が使える状態になったら開いて確かめます。つなぐのは無料プランでもでき、お金がかかるのはドメインそのものです。この回は実際の画面を撮っておらず、手順は公式ドキュメントに沿っています。 https://shogakusei.com/series/vercel/ep02/https://shogakusei.com/series/vercel/ep02/Thu, 01 Oct 2026 14:37:52 GMT次の日、ページの誤字に気づきます。直したフォルダを、もう一度 Drop に落とす。出てきたのは、前とは違うURLでした。昨日みんなに送ったURLは、誤字のままです。直したのに、誰にも届いていない。もう一度直すと、URLがさらにもう1つ増えます。ダッシュボードには、名前の似たプロジェクトが3つ並んでいる。 Drop のページは、落とすたびに新しいプロジェクトを作る仕組み。そこで GitHub に保管庫を作ってファイルを置き、第1話のプロジェクトに GitHub をつなぎ（渡す範囲は、その保管庫だけ）、GitHub で1行直して保存します。実機では保存してから15秒ほどで、同じ短いURLの中身が新しくなりました。本番が変わるのは、本番用のブランチ（ふつうは main）に届いたときだけ。秘密のファイルは保管庫に置きません。 https://shogakusei.com/series/vercel/ep01/https://shogakusei.com/series/vercel/ep01/Wed, 23 Sep 2026 16:10:03 GMTAIに「自己紹介のページを作って」と頼むと、かなりきれいなページが出てきます。困るのは人に見せようとしたとき。できあがったのはパソコンの中の index.html。LINEで送ってもQRコードにしても、相手の画面では開けない。作ることと公開することは、別の作業です。 サーバーも黒い画面もGitHubもFTPもいらない。いるのはアカウントひとつとフォルダひとつ。vercel.com でアカウントを作り、フォルダの中身を自分の目で確認して（秘密・個人情報・権利）、vercel.com/drop にドラッグして Deploy。短いURL（プロジェクト名.vercel.app）をログアウト状態とスマホでも開いて確かめます。無料プランは個人の非商用だけです。