💻

AWS AmplifyでReactアプリをデプロイする際に起きたエラー

2022/02/26に公開

AWS

先日、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

Discussion