AWSにデプロイしたNuxt×RailsアプリでS3を稼働させる
本番環境(AWS・ECS)でS３を使用する際にハマったのでこちらに記述します。
結論
S3用のVPCエンドポイントがなかった。
その際に出てたエラーはこちら
オリジン「https://www.foodcom.work」からの「https://foodcom-api.work/api/v1/posts」でのXMLHttpRequestへのアクセスは、CORSポリシーによってブロックされています：いいえ「Access-Control-Allow-Origin」 'ヘッダーは要求されたリソースに存在します。
https://blog.cloud-acct.com/posts/u-rails-rackcors/
https://qiita.com/mishiwata1015/items/4970abc58fae2eb2a769
このエラーのをみてクロスオリジン制約に引っかかているのかなと思い、rails側のcors.rbの設定や、nuxt側のcors設定を見直していました。
しかし、今回つまずいていたのはそれ以前の問題で、
VPCは Amazon Virtual Private Cloud (以下、VPC) は、AWS上に作成できるプライベート仮想ネットワーク空間です。AWSアカウント内に専用のネットワークを作成でき、このネットワーク内に「EC2」（Amazon EC2）などのAWSリソースを配置できます。
VPCはインターネットゲートウェイか、エンドポイントがないと外部とは通信できないというのがすっかり頭から抜けていました。
ローカルではできるのになんでできないんだろう・・・とずっと頭を悩ませていました。
今回のインフラ構成図
このrails とamazonS3の連携時がVPC内部と外部の通信のため、エンドポイントを作成してあげます。
awsコンソールを開きVPC＞エンドポイント＞エンドポイントの作成を選択します。
この様な画面になりますので、
検索でs3と検索し、
S3を選択し、今回rails がおいてあるVPCを選択肢し＞エンドポイントの作成ボタンをクリックします。
grobalとinterfaceでVPCエンドポイントはS３はどちらにも対応していますので用途によって使い分けてください。
私はgateway型で使用しました。
これによりS３と通信することが可能になりました。
インフラ周りの知識がある人なら引っかからないのでしょうが、まだまだ駆け出しの私はこれで何時間も悩んでしまいました。
もし同じ悩みを抱えている人がいて、この記事が助けになったら嬉しいなと思います。
それでは失礼いたします。