サーバー、データベース、インフラに関するトピックス
■第３話：AWS LightsailにReactをデプロイしよう
（最終更新日：2022.06.28）
（絵が小さい場合はスマホを横に）
「ReactってAWSにどうデプロイすれば良いの？」
Vercelへのデプロイは分かるものの、AWSにReact（Next.js）をデプロイする方法は分からないというケースも多い。
今回はそんなAWSへのデプロイの中でも、AWS Lightsailへのデプロイについて説明する。
今回は説明しないが、AWSのS3へのデプロイも（細かい設定はできるものの）ほぼ同様の操作で行えるので、学んでおいて損はない。
１.Next.jsでの静的生成（前準備）
Next.jsでのコーディングは既に済んでいるものとする。 設定が必要な部分としては、package.jsonの"script"のbuildで「next build」となっている部分を、 「next build && next export」と書いて、静的ファイルを出力できるようにする。 その後、コマンドで「npm run build」か「yarn build」で出力を行う。 出力が済むと、Next.jsのディレクトリ内に「out」ディレクトリが出来ていて、 この中身が静的HTMLファイルとなる。これら全てをサーバールートにそのままコピーすれば、サーバー上で動くようになる。
package.jsonの設定変更
出力された静的HTMLファイル（outディレクトリ内）
２.AWS Lightsailへのデプロイ
AWS Lightsailのデプロイは非常に簡単である。まず、LightsailでHomeを押しタブの中でStorageを選択する。 そして、Bucketの作成を選択する。リージョンを日本（自分に一番近いエリア）にし、 一番小さいストレージプラン（5GBは1年無料、通信料が規定内の場合）を選択し、 バケット名はそのまま変更せずにして「create bucket」ボタンを押す。
バケットの作成画面
すると、バケットが作成されるので、作成されたバケットのObjectsタブを押し、 Object listに先ほどのNext.jsのファイルをドラッグ＆ドロップする。
バケットへのファイルアップロード（Nextjsのデプロイ）
あとは、Permissionsで「All objects are public and read-only」を選択してsaveすれば、公開されるようになる。 作成された後は、Domainに書かれているアドレスにアクセスすれば、デプロイしたものを見ることができる。
バケットのアクセス権限の設定
３.Content Delivery Network（CDN）の利用
Amazon Lightsailでは、CDNも簡単に利用できる。
CDNとは簡単に説明すると、世界中の代理サーバー（キャッシュサーバー）を利用して負荷分散し、効率的にコンテンツを配信するものである。
今回でいうと、バケットに保存したデータが世界中のキャッシュサーバーから配信できるようになる。
Amazon LightsailでのCDNの利用は極めて簡単である。
CDNで配信したいバケットを選び、「create distribution」を押す。
CDNで配信したいバケットを選ぶ
データ転送サイズを選ぶ（50GB/月は初年度無料）。
データ転送サイズを選ぶ
名前をつけて「create distribution」を押す。これだけである。
名前をつけて「create distribution」を押す
４.まとめ
Next.jsのAWS Lightsailへのデプロイは、バケットにファイルをコピーするだけで簡単にできる。 加えて、CDNの設定も非常に簡単である。AWS自体の設定はかなり細かく難しいことも多いので、 まずは、LightsailでライトにAWSを活用し、大枠の仕組みを学ぶという使い方もありである。
▼参考図書、サイト
Lightsailでオブジェクトストレージが利用できるようになったけど、とっつきやすさが異常（CDN連携も簡単）
Developers IO
［AWS］S3でReact.jsを超爆速簡易型Webホスティングする
Qiita
【図解】CDNとは？仕組みと技術の基礎知識
Qiita