Next.jsがどのようにユーザーに届けられるのかざっくり理解する

Next.js をみんなが見られるようにするまでの道のりをざっくりと理解しよう！

Next.js でアプリは作れるけど、「これってどうやったら人に見せられるの？」と疑問に思ったこと、ありませんか？

今回は、そんな人向けに Next.js が “みんなにアクセスできる状態” になるまでの流れ をざっくり追いかけていきます。
難しいことは一旦置いといて、雰囲気つかんでもらえたらOKです！

読んでくれそうな人

• Next.js を触ってるけど、公開の仕方がわからん！って人
• インフラって聞くとちょっと興味あるけど、なんか難しそうって思ってる人

読まなくてもいいかもな人

• インフラ構築、何度もやってますって人
• 「インフラ？俺のキャラじゃないんで」ってスタンスの人

今回の前提

難しい用語をバシバシ出すのは避けたいので、インフラ周りの話はみんな大好き（？） AWSのEC2 を使って説明していきます！

まずは構成図を見てみよう

いきなりですが構成図、ドンッ！

普段あんまりこういうの見ない人もいるかもですが、今回は超シンプルなので「ふーん、こんな流れなんだ〜」くらいに眺めてもらえたらOKです。

この図が表している流れ

1. ユーザーがブラウザにURLを入力する（＝リクエスト）
2. リクエストが EC2 に届く
3. EC2 がゴニョゴニョしてレスポンスを返す
4. 画面に表示される

この “ゴニョゴニョ” が今回の主役です！
ここが「なんで？」って思ってる人は、続きを読み進めてみてください🙌

図の中に出てきたモノたちのざっくり紹介

User

アプリを見に来るみんなのこと。あなたも私もユーザーです！

EC2

AWSが提供している パソコンのレンタルサービス みたいなもの。
借りたこのPCに、自分のNext.jsアプリを置いて動かす感じです。

VPC（バーチャルプライベートクラウド）

EC2を囲うバーチャルな空間。イタズラされたくないから壁を作ってるイメージです。
今回は細かいとこまでは気にしなくてOK！

IGW（インターネットゲートウェイ）

VPCの中のEC2に外からアクセスできるようにするための「入り口」。
これも今回は深掘りしなくて大丈夫です！

なんでリクエストに応じてNext.jsが返ってくるの？

はい、ここが本題。

さっきも言いましたが、EC2は最初はただのパソコンです。
普通のパソコンにURL打っても何も返ってこないですよね？

じゃあ、どうすればいいのか？
“Webサーバー” としての役割を持たせてあげる 必要があります。

Webサーバーを用意しよう（nginxを入れる）

EC2にWebサーバーの役割を持たせるために、
まずは有名な「nginx（エンジンエックス）」をインストールしてみましょう。

インストールができたら、EC2は「リクエストが来たら反応できる」状態になります。
たとえば、EC2のIPアドレスが 1.2.3.4 だったら、
ブラウザで http://1.2.3.4 にアクセスすると nginx のWelcome画面が見えるようになります。

ここまでは nginx が頑張ってくれてる状態。
次は、この nginx の画面を Next.js に差し替えていきましょう！

Next.js を立ち上げる

Next.js を EC2 の中で動かすのは、実はそんなに難しくありません。

EC2の中でインストールして、

npx create-next-app@latest

みんなローカル開発でよくやってる、

npm run dev

の代わりに、本番環境ではこうします👇

npm run build   # 本番用にビルド
npm run start   # サーバー起動（ポート3000で）

すると、http://1.2.3.4:3000 にアクセスすればNext.jsが動いてるのが確認できるはず。

でも、ここでブラウザから http://1.2.3.4:3000 にアクセスしても…
あれ？ nginx の画面のままじゃん？？？

それ、ポートのせいかもしれません

そうなんです。ここで出てくるのが「ポート」という概念。

Next.js は http://localhost:3000 で立ち上がってるので、
ブラウザでも http://1.2.3.4:3000 にアクセスすれば見える……はずが、エラー！

なぜかというと、EC2の セキュリティ設定（ポート開放） で 3000番が許可されていないから。

さらに、普通ブラウザは http://1.2.3.4 にアクセスしたら、自動的にポート80（http://1.2.3.4:80） にアクセスします。
これが nginx が表示される理由です。

nginx に「Next.js見せて！」とお願いしよう（リバースプロキシ設定）

じゃあ、こう伝えてあげましょう

ポート80で来たリクエストは、3000番（Next.js）に回してあげてね
これを nginx に教える設定がこちら👇

location / {
  proxy_pass http://localhost:3000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
}

設定を保存して nginx を再起動すれば……
http://1.2.3.4 にアクセスしたときに Next.js のページが表示される！

おわりに

ふだんフロントエンドだけやってると、あんまり触れない「インフラ」の世界。
でも、ちょっとずつ手を動かして構築していくと、意外と楽しいし達成感もあるんですよね。

• 設定をミスったら動かない
• 画面が出るまで地味な作業
• でも動いたらめっちゃうれしい！

インフラってそんな感じの世界です。
この記事が、少しでも「インフラこわくないかも？」って思えるきっかけになればうれしいです！