今回発生したこと
AWS Amplifyを使用し、Reactのアプリケーションを作成していた際、Reactの公開領域(public/)直下にpdfファイルを配置しました。
画像ファイルの場合は配置した場合、https://hogehoge.com/file-name.jpegのようなURLで画像データを取得することができます。
ただ、pdfファイルの場合はhttps://hogehoge.com/file-name.pdfのようなURLで値を取得しようとしてもデータが存在しない状態となってしまいました。
- 画像ファイルの場合 ：公開領域のURLにアクセスすると、ファイル内容を確認できる
- 画像ファイル以外の場合：公開領域のURLにアクセスしてもファイルが存在しない
また、ローカル環境では再現せず、Amplifyの環境でのみ発生していました。
- ローカル環境の場合 ：ファイルが表示できる
- Amplify環境の場合：ファイルが存在しない
原因
Amplifyの方で公開しても良いファイルの形式を指定しており、デフォルトでは画像系や、js、cssなどのファイル形式以外は公開できないようになっている
解決策
Amplifyの管理画面を開き、「対象のアプリケーション」→「ホスティング」→「リライトとリダイレクト」を選択し、画面の右上に存在する「リダイレクトを管理」を押下します。
statusが200番の送信元を選択し、下記の添付画像のように「pdf」を追加し、保存します。
正常に保存されていれば、下記の画像のように表示されます。
これで、https://hogehoge.com/file-name.pdfのようなURLにアクセスした際にPDFファイルを表示することができます。
最後に
Amplifyを使い慣れている方についてはなんてことのない話ではありますが、初めてAmplifyを使用していたりすると意外と原因箇所がわからないため、そういった際に少しでもこの記事が参考になれば幸いです。