先日、ReactとAWS AmplifyでSPAをデプロイしようとしたところ、いくつかのエラーに見舞われました。
今回はそれらをどのように修正したかを紹介します。
以下のようなエラーが出ている方は参考にしてください。
- “ERR_ABORTED 403" in manifest.json
- “Uncaught SyntaxError: Unexpected token ‘<’“ in index.html
このような場合は、以下の対処法をお試しください。
“package.json”を確認する
もし、package.json にGitHubのgh-pagesにデプロイするためのコードが含まれている場合は、AWSへのデプロイに支障をきたしている可能性があります。↓この部分は削除するのが良いでしょう。
“homepage”: “https://user-developer.github.io/project_name"
amplify publish をもう一度試して、パスを確認する。
amplify publish と yarn build の2つのコマンドを試すとよいでしょう。パスの間違いでエラーになることがあります。index.htmlのhrefとsrcのパスを確認することができます。
下記はサンプルですが、この中にパスを見つけることができます。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>React App</title>
<link href="/static/css/main.feda3d3d.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script> ...... </script>
<script src="/static/js/2.3c825274.chunk.js"></script><script src="/static/js/main.69363c5f.chunk.js"></script>
</body>
</html>
yarnのビルドコマンドyarn build
amplifyのデプロイコマンドamplify publish
もし、
「プログラミングを体系的に学びたい」
「エンジニア転職を頑張りたい」
「独学に限界を感じてきた...」
「コミュニティで仲間と共に学びたい」
などと感じられたら、ぜひ検討してみてください。
まずは様子見...という方は、公式LINEにぜひご登録下さい。
学習や転職ノウハウに関する豪華特典11個を無料配布しています！
LINE紹介ページで特典を確認する
