今回は自作のフロントエンドアプリケーションを
AWS Fargate上で初めて動かしてみたので、
その際に詰まった箇所と解決策についてまとめてみました。

「なんかエラーが出て上手く動かない…」という方の手助けになれば嬉しいです！

アプリケーションの概要

今回作成したのはReact製のwebアプリケーションで
現在は非推奨ですがCreate React Appを使って作成したシンプルなアプリケーションになります。
開発にはmacOSを使用しています。

(※本アプリケーションを作成した当時は非推奨となっていなかったため、
ここではCreate React Appを使用した例をそのまま掲載しています。)

AWS構成

今回構築した環境は以下のような構成になります。
高可用性を意識して、複数のAZにReactアプリケーションを配置し、
ALB(Application Load Balancer)で負荷分散する構成を目指しました。

コンテナに関しては先述の通りAWS Fargateを使用しています。

💥つまづきポイント1 「exec format error」

さあ、Fargate上でアプリを動かそう！と意気込んで
Dockerイメージを作成し、ECRにプッシュ。
タスク定義も作成して、いざサービス起動…

すると終了コード255でコンテナが停止してしまいました。
ログを確認すると「exec format error」と出力されておりコンテナの起動が
上手くいってないことが分かります。
ECSタスクの停止状況画面

解決策

macOSでイメージをビルドしてECSで使用する場合には
オプションで--platform linux/x86_64を指定する必要があるみたいです。
以下の形式でイメージをビルドすることでタスクを実行することができました。

docker build -t kakuda-coda-ecr --platform linux/x86_64 . --no-cache

💥つまづきポイント2 「504 Gateway Time-out」

コンテナが起動したのでALBのオープンアドレスからアクセスを試みたのですが、
なぜか「504 Gateway Time-out」の文字が表示されて上手くいきません。

解決策

こちらはセキュリティグループの設定で
意図した接続が許可されていなかったため発生したエラーでした。

今回のシチュエーションではブラウザからALBにアクセスする際に80番ポート(HTTP)
そしてALBからコンテナにアクセスする際に3000番ポートを使用するので、
該当するルールが存在するか確認、なければ追加する必要があります。

ALB側では80番ポートで待ち受けているので問題なし。

Fargateで使用していたセキュリティグループで3000番へのアクセスを許可してあげましょう。
（この設定が正しく行われていませんでした）

アクセスに成功

上記の解決策を実践することで無事にFargate上で
アプリケーションを動作させてブラウザ経由でアクセスすることができました！

まとめ

初めてFargateを触ってみて思わぬつまずきもありましたが
無事に解決することができました！
Fargateは一度設定してしまえば、サーバーの管理が不要で
非常に便利なサービスなので、皆さんもぜひ触ってみてください