ついにAWSデビュー！

今回のお話のサイト ポートフォリオについてです。

https://portfolio.atsmile.dev/?v=full

このポートフォリオサイトはNext.jsを作ったVercelでの運用が簡単だったので、Vercelにおいていたんですが、ついに今回AWS EC2への移行を決めました！！！！！

なかなか手を出せなかったAWSをとうとう使い始めることに！

理由は2つあります。

1つ目は、カラオケ喫茶HPに導入予定のVRT（reg-suit）にAWS S3が必要だったこと。

そのためにはもちろんAWSを契約する必要が出てくるので、どうせアカウントを作るなら無料期間のお試しでポートフォリオをAWSで実装してしまおう！ってことですね！

2つ目は、インフラ周りの経験を積みたかったこと。

VercelはNext.jsを実装するには非常に便利ですが、EC2・Nginx・CI/CDなどサーバー周りも触っておきたいなと思い、ポートフォリオを題材に挑戦することにしました！

EC2セットアップを始めてみる

さて、EC2セットアップを始めますが、構成はこんな感じです。

• EC2（Ubuntu 24.04 / t3.micro）
• リージョン：大阪（ap-northeast-3）
• Elastic IPで固定IP
• Node.js 22（nvm管理）/ PM2 / Nginx

リージョンは大阪を選びました。

Ubuntu 24.04はLTSで2029年までサポートがあり情報も多いので選択しました。
最初に26.04が選ばれていたのですが、最新すぎるのと情報が少ないので24.04に変更しています。

Elastic IPはEC2に固定のIPアドレスを割り当てるサービスです。
再起動のたびにIPが変わるらしく、必須の設定のようです。

PM2はNode.jsアプリのプロセスマネージャーです。
アプリが落ちたとき自動で再起動してくれるのと、EC2再起動後も自動でアプリを起動してくれます！これは便利！
これがないとEC2を再起動するたびに手動でアプリを起動しないといけないので必須ですね！

GitHub Actions CI/CDでつまずいたこと

mainブランチにpushしたら自動でEC2にデプロイされるようにGitHub Actionsを設定しました！

そううまく行くわけもなく、下記のようなことで躓いてしまいました。

URLの末尾スラッシュ問題

no such host エラーが出て少し悩みましたが、シークレットを確認したら原因がわかりました。GitHub ActionsのシークレットにEC2のIPアドレスを登録する際、ブラウザのURLバーからコピーしてhttpを消すと言う対応をしたせいで、末尾にスラッシュが残っていたと言う初歩的なミスを。。。orz

nvmのパスが通らない問題

SSH経由でコマンドを実行する場合、.bashrc が読み込まれないのでnvmのパスが通らず。。。
export NVM_DIR で明示的にパスを指定することで解決しました。

EC2でビルドしたらSSH接続すら受け付けなくなった

最初はEC2上でビルドする構成にしていたのですが、t3.microはメモリ1GBなのでNext.jsのビルド中にCPU・メモリがほぼ100%になってしまいました。

それに気づかずその結果SSH接続すら受け付けない状態になり、20分以上待つことに。。。
さすがにずっと待ってたわけでなく、他作業終わって戻ってきたら「まだやってる！？」と。。。

解決策としてビルドをGitHub Actionsに移して、EC2にはビルド済みのファイルをデプロイする方式に変更しました。これでEC2の負荷が大幅に減って安定しました。

Nginx + HTTPS設定

HTTPSはブラウザとサーバー間の通信を暗号化する仕組みですね。
対応していないサイトはブラウザに「保護されていない通信」と表示されてしまうので、今どきのWebサイトには必須の設定です。

Nginx

みんなだいすき 「えんじんえっくす」 がきました

NginxはWebサーバー兼リバースプロキシとして使われるソフトウェアです。

今回はブラウザからのリクエスト（80/443番ポート）を受け取って、Next.jsアプリが動いている3000番ポートに転送する役割で使っています。

ブラウザ → Nginx → Next.js というイメージですね！

Next.jsは3000番ポートで動いているので、Nginxをリバースプロキシとして設定してブラウザからのアクセスを転送するようにしました。

proxy_pass http://localhost:3000;

設定後にブラウザでアクセスしたところ、HTTPで開こうとしても自動でHTTPSにリダイレクトされて表示されないという現象が起きました。

原因はブラウザのHSTS（HTTP Strict Transport Security）キャッシュで、HTTPSの証明書がまだない状態だったためです。

Let's EncryptとCertbot

Let's Encryptは無料でSSL証明書を発行してくれるサービスで、CertbotはそのLet's Encryptの証明書取得・設定を自動化してくれるツールで、コマンド1つでNginxの設定変更まで自動でやってくれます。

sudo certbot --nginx -d portfolio.atsmile.dev

証明書の自動更新も設定済みなので、期限切れを気にしなくてよいのは助かりますね！

やってみて

いろいろやってみてよかったことや大変だったことがありましたね

よかったこと

Vercelに隠れていたインフラ周りを一通り自分で触れたのがよかったです。NginxやPM2、Let's Encryptなど名前は知っていたものの実際に設定したのは初めてで、それぞれの役割が体感としてわかりました。

GitHub ActionsでのCI/CD構築も、EC2でビルドしたら落ちるという失敗を経て「ビルドはGitHub Actionsで、EC2はアプリを動かすだけ」という構成に行き着けたのはいい経験でした。

大変だったこと

t3.microのスペック不足は想定外でした。Next.jsのビルドがあんなにメモリを使うとは思っておらず、EC2がビルド中に完全に固まってしまったのは焦りました。

次やること

さて、次やることですが、カラオケ喫茶ホームページにのVRT環境構築のためにS3の設定などをやっていく予定です！