Next.jsとLaravelで作ったアプリをAWSにデプロイ出来なかった話

はじめに

• 今回のお話はAWSにアプリをデプロイ出来なかった話です。
  あんまり技術的な学びはないので、真面目な気持ちでクリックしてしまったあなたはブラウザバックしてください。
  逆に仕事が捗らなくて技術記事読むフリして休憩したいそんなあなたにはピッタリの内容になっております。

どんなアプリを作ったか

• 今回の本筋ではないのですが、デプロイ出来なかったのでここでアプリを供養しておきます。
  簡単なTodoアプリで、以前Nuxt.jsとFirebaseで作ったものをNext.jsとLaravelで作り直したという感じです。
  未経験からエンジニア転職する際に作ったポートフォリオだったので、思い入れのあるアプリです。
• CSSフレームワークとしてChakraUIを使いました。
  class名でスタイリングしていくわけではなく、スタイリングされたcomponentを使う形式です。
  型定義バッチリされてるし、propsで値渡せばそこそこ柔軟にスタイル変えられるし最高でした。
• リポジトリはこちら
  ローカルでの立ち上げ方もREADME付けているので、是非触ってもらえたら嬉しいです。
  

やろうとしたこと

• Next.jsをVercelにデプロイ。
• LaravelとMySQLをAWSのEC2にデプロイ。
  • 初めてAWSを触るので、学習コストを少しでも下げるためにRDSは使わない。

出来たことと挫折したこと

• Next.jsをVercelにデプロイ。
  • 簡単とは聞いていたが、ビックリするくらい簡単だった。何回かクリックしたらデプロイが終わった。
  • masterブランチにpushする度に自動デプロイされて、便利なことこの上なかった。
• LaravelとMySQLをAWSのEC2にデプロイ。
  • タイトル詐欺と言われそうだが、実はEC2にLaravelとMySQLをデプロイ自体は出来た。
    もう少し言うとローカルのフロントからEC2上のLaravelのAPIを叩くところまでは出来た。
  • CORSエラーに苦しんだが、nginxでリクエストにheaderを付けることで解消出来た。
  • ELBを使っていなかったので、EC2はhttpのままで、Vercelはhttpsだったので、プロトコルが違って通信出来なかった。今回ここで挫折。

そもそもやらなかった（が今後やりたい）こと

• Next.js
  • getStaticPropsとgetServerPropsは使わずじまいだった。useEffectで誤魔化してました。
  • 初めてのNext.jsだったので、Recoilは使わず。useContextで行きました。
  • パフォーマンスの意識。とにかく動けばOKの精神で作ってしまった。
• Laravel
  • ステートフルにしたかったが、Laravelのsessionの使い方がよく分からず見送り。
  • 以前の記事でも書きましたが、モダンフロントとLaravelの組み合わせの記事が本当に少なくて、Blade前提のものばかりで参考にならない・・・。
  • CORSとCSRFはどちらもちゃんと対策できず、セキュリティガバガバアプリになった。

今後勉強しないといけないなと思ったこと

• Linux
  • 参考文献のコマンドをコピペで打ってデプロイしただけなので、あんまりコマンドの意味も分からずやっていた。
  • 普段意識しないようなパーミッションの概念が全然分かっていなかった。
• nginx(別にapacheでも良いけど）
  • 前述の通りCORSエラーにめっちゃ苦しめられた。サーバーアプリはちゃんと勉強しておかないとインフラの理解なんて出来る訳がないなと痛感した。
• AWS
  • 当たり前だけど、AWS自体も全然分かっていなかった。一度に色んなことをやろうとしたのが敗因。
  • 基本的なVPC、EC2、Route53、ELBあたりを一つずつちゃんと学習するべきだった。

さいごに

• 暗い記事になってしまいましたが、初めてNext.js、AWSを触れたので学びは多かったです。
• 休憩ということで、次はバックエンドとインフラをAmplifyとかFirebase使って、フロントに集中したアプリを作りたい。

参考文献

• 【AWS入門】EC2+NGINX+MySQL環境へLaravelをデプロイする手順
• nginxのadd_headerでレスポンスヘッダが付かない時の対処法
• 【初心者向け】AWSのサービスを使ってWebサーバーをHTTPS化する