先日、ReactとAWS AmplifyでSPAをデプロイしようとしたところ、いくつかのエラーに見舞われました。
今回はそれらをどのように修正したかを紹介します。
以下のようなエラーが出ている方は参考にしてください。

  1. “ERR_ABORTED 403" in manifest.json
  2. “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

デプロイ時のエラーは、アプリ側の問題かビルド設定の問題かを切り分けるところが最初の関門になります。切り分けの考え方から学べる場としてSiiDを運営しています。

AIプログラミングスクール「SiiD」について

AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。

SiiDの特徴

  • 現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師
  • 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導
  • 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル
  • Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援
  • 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜
  • 学割あり（35%オフ）

こんな方におすすめ

  • 未経験・文系・社会人からITエンジニア転職を本気で目指したい方
  • 独学に限界を感じている方
  • 費用を抑えながら実務スキルと転職サポートを両立したい方

「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。