こんにちは。
今回はNext.jsで作成した簡単なアプリケーションをAWSへデプロイします。

現在のデプロイに対するイメージは

・ローカル環境をそのままAWSのEC2で作ればいいの？
・URLの公開とかどうするんだろう
・EC2だけでできるのかな

といったバリバリの初心者思考です。
コード書いたことあるけど1人でサービス作れないエンジニアです。
今回の目標としては、Next.jsで作成したページを私のスマートフォンで見られるようにする！

それでは早速、どこかのサイトを参考にすれば何とかなるでしょ思考でやっていきましょう。

　

参考サイト
Next.jsをAWS EC2にデプロイする方法(さくらのドメイン、さくらのメール)

いい感じのサイトがあったので、そのまま使って進めていきます。

　

早速、EC2以外の要素IAMが出てきました！
AWSはAWS Cloud Questの無料分をクリアしただけの知識があります。

AWS Cloud Quest | インタラクティブなロールプレイングゲーム | AWS

確か、フル機能アカウントとは別に必要な権限を設定できるサブアカウントを作成できる機能だった気がします。
個人開発なので、必要ではないですが、機能に慣れるために使いたいと思います。

　

とりあえず、AWSのIAMを開きました。

　

　

右上の「ユーザーの作成」からできた気がするので、なんとなくで進めていきます。
IAMは無料なので、失敗してもお金がかからないのがいいところです。

　

　

今回使うであろう、EC2、RDS、Route53のフルアクセスを付けました。
※結局使ったのはEC2とVPCだけです。

　

　

無事にログインできました。
AWS Cloud Questでやった内容なので、簡単でした。
それではルートユーザ(フル機能アカウント)に戻ります☺

　

サイトでは次に必要であればS3バケット作成とのことですが、
大きなデータを置くつもりはないので飛ばします。
EC2で大きなデータ置けるようにするとお金が沢山かかるから、安く使えるサブフォルダ的なものだと勝手に思っています。違ったら後で作成しましょう。

　

次はVPCの作成のようですね。
VPCは確かバーチャル　プライベート　クラウドだった気がします。
違ったらごめんなさい。※合ってました

EC2の2つのインスタンスを繋げたりとかそんな役割だった気がします。
使い方はよく分かってないので、上の画像を参考に適当に触ってみます。
もちろん料金は怖いので値段は意識します。

VPCにいるだけで利用料金がかかってしまうリソース – fu3ak1’s tech days

　

料金を見たらパブリックサブネットにはお金がかかるみたいなので使わないことにしました。

　

　

できなかったらその時に考えます。

　

次はセキュリティグループの設定みたいですが、
パブリックサブネット作ってないのにHTTPS通す意味があるのでしょうか……。

よく分からないので飛ばします！

分かるところからするのが大切って誰かがいってました。

　

　

みんな大好きインスタンスの作成です。
分かりやすいと思います。

　

　

作るだけ作りましたが、どうしよう状態です。

これを外部からアクセスできるようにしたいです。

　

とりあえず、このまま進めていきます。

　

　

どうやらNext.jsのプロジェクトを作成してGitHubにアップロードする必要があるみたいです。

　

Gitコマンドの復習がてらGitHubへアップロードしました。
参考サイト
【GitHub】基本の使い方！初心者がPushするまで🚀 #初心者向け – Qiita

　

そして次も問題です。

　

説明が少ない！！

どこで打つコードなのかもさっぱりです……。

　

ローカルのコマンドプロンプトで入力したらなんかできました。
私のPCとEC2が繋がったのでしょうか？

RDSの接続はいったん飛ばします。必要になったら戻ってきます。

Node.jsインストールです。
これは間違いなくEC2で実行するものでしょう。

どうやら先ほどのSSHですが、EC2のインスタンスへ接続するものらしいので、
先ほどの私の画面で入力すればインストールできるのではと思います。
(私の画面でインストールコマンド入力→EC2のインスタンスでインストール)

　

とりあえず、言われた通りに進めました。
これは私のコマンドプロンプトでのスクショです。

サイト通りなら、これでEC2のIPアドレスに接続すれば公開されているとか……。
そんな上手くいくわけ。

　

　

！！

上手く、いってる！？

めちゃくちゃ感動しますね。
ここ数年で一番感動したかも……、言い過ぎですね（笑）

　

gitコマンドが見つかりませんってエラーが出たんですけど、
gitのインストールが必要みたいでした。

sudo yum install git -y

さすがChatGPTさん頼りになる！

　

順調に進んでいます。
Nginxの設定も問題なくできました！

嘘です。EC2のIPアドレスの箇所を{xx.xx.xx.xx}って書いたらエラーが出ました。
xx.xx.xx.xxが正解みたいです。

　

　

　

いよいよ！

　

　

これを実行することでできるみたい！
npx prisma migrate deployはDB使ってないので今回は使いません。

　

はたして……。

　

　

完成しました！
感動です😢

　

私のスマホからもきちんとアクセスできました！

　

やったー！
お金がかかるのでEC2のインスタンスは使い終わったら停止させましょう。

この続きをするならhttpsでの接続と、ドメインの取得でしょうか。

投稿者プロフィール

InoTomoki

最新の投稿

• DeepSeek2025年1月29日【Deep Seek】時代を変えるAIの話
• 【AWS】2025年1月22日【新米エンジニア学習記録④】Next.jsのデプロイⅡ
• 【AWS】2025年1月16日【新米エンジニア学習記録③】Next.jsのデプロイ
• 【JavaScript】2025年1月9日【新米エンジニア学習記録②】TypeScriptの導入