はじめに
CloudFront+S3構成でreact.jsの静的ウェブサイトをデプロイしています。
構築時にS3上の静的ウェブサイトホスティングURLでは正常だったのですが、CloudFrontを追加したところ、一部URLで、
「This XML file does not appear to have any style information associated with it. The document tree is shown below.」のエラーが出力されるようになりました。
今回は、このエラー対処法について解説します。
エラー内容
下記ではS3/CloudFrontともに正常にブラウジングできています。
https://xxxx.com/
しかし、下記のようにするとCloudFront経由だとエラーとなり403が返ってきます。
https://xxxx.com/yyyy
解決方法
CloudFrontのエラーページ設定を追加することで解決します。
CloudFrontの下記タブから作成が可能です。
403:Forbiddenが来た場合に、index.htmlを200で返すように設定を行います。
下記のように作成しましょう。
これで無事ブラウジング出来ました。
React.jsのルーティング関連部分でindx.htmlを参照させないといけないようです。
AWSの効果的な学習方法は？
最後に、AWSの効果的な学習方法をご紹介します。
自学自習はUdemy講座
オンラインプラットフォームであるUdemyは安価で手軽にAWSの学習が可能です。
しかし、上記で紹介したような実際のAWSエンジニアが実施している構築スキルまでは教えてくれません。初心者～中級者向けの講座が多くなっています。
私も受講した、初心者向けAWS講座を下記記事でまとめています。ご参考ください。
1人で学習が難しい場合はオンラインレッスン
1人で学習が難しい場合はオンラインレッスンがおすすめです。
最近では、AWS講座を提供するオンラインレッスンも増えてきました。
料金は高くなりますが、現役エンジニアからAWSについて学ぶことができます。
本ブログ執筆者のメンタリングも受付中
本ブログを執筆している[KAITech]もメンタリングを受け付けています。
オンラインレッスンは高くて手が出せないという方は私までお気軽にご相談ください。
下記から承っております。
