Web制作、Web開発の歩き方

サーバー、データベース、インフラに関するトピックス

■第3話:AWS LightsailにReactをデプロイしよう

(最終更新日:2022.06.28)

データベースのイメージ
この記事は4分で読めます!
(絵が小さい場合はスマホを横に)

「ReactってAWSにどうデプロイすれば良いの?」

Vercelへのデプロイは分かるものの、AWSにReact(Next.js)をデプロイする方法は分からないというケースも多い。 今回はそんなAWSへのデプロイの中でも、AWS Lightsailへのデプロイについて説明する。 今回は説明しないが、AWSのS3へのデプロイも(細かい設定はできるものの)ほぼ同様の操作で行えるので、学んでおいて損はない。


1.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の変更

package.jsonの設定変更

RDBMSの比較表

出力された静的HTMLファイル(outディレクトリ内)

2.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に書かれているアドレスにアクセスすれば、デプロイしたものを見ることができる。

バケットのパーミッション

バケットのアクセス権限の設定

3.Content Delivery Network(CDN)の利用

Amazon Lightsailでは、CDNも簡単に利用できる。 CDNとは簡単に説明すると、世界中の代理サーバー(キャッシュサーバー)を利用して負荷分散し、効率的にコンテンツを配信するものである。 今回でいうと、バケットに保存したデータが世界中のキャッシュサーバーから配信できるようになる。

Amazon LightsailでのCDNの利用は極めて簡単である。 CDNで配信したいバケットを選び、「create distribution」を押す。

CDNの設定1

CDNで配信したいバケットを選ぶ

データ転送サイズを選ぶ(50GB/月は初年度無料)。

CDNの設定2

データ転送サイズを選ぶ

名前をつけて「create distribution」を押す。これだけである。

CDNの設定3

名前をつけて「create distribution」を押す

4.まとめ

Next.jsのAWS Lightsailへのデプロイは、バケットにファイルをコピーするだけで簡単にできる。 加えて、CDNの設定も非常に簡単である。AWS自体の設定はかなり細かく難しいことも多いので、 まずは、LightsailでライトにAWSを活用し、大枠の仕組みを学ぶという使い方もありである。

▼参考図書、サイト

   Lightsailでオブジェクトストレージが利用できるようになったけど、とっつきやすさが異常(CDN連携も簡単)  Developers IO
   [AWS]S3でReact.jsを超爆速簡易型Webホスティングする  Qiita
   【図解】CDNとは?仕組みと技術の基礎知識  Qiita