create-react-app v5

最初動かなかったので
@craco/craco をremove (v5に対応してなかった)
これを参考にproxyの設定を変えた facebook/create-react-app#11762

package.json

@@ -4,7 +4,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.4.1",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -23,19 +22,19 @@
     "react-lazy-load-image-component": "^1.5.1",
     "react-router": "^6.0.2",
     "react-router-dom": "^6.2.1",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "5.0.0",
     "react-transition-group": "^4.4.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "tslib": "^2.3.1",
     "typescript": "^4.5.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "craco start",
+    "start": "react-scripts start",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
     "build": "GENERATE_SOURCEMAP=false craco build",
     "deploy": "GENERATE_SOURCEMAP=false craco build && gh-pages -d build",
-    "test": "craco test",
-    "eject": "craco eject",
     "lint:css": "stylelint --fix **/*.{css,scss,sass}"
   },
   "eslintConfig": {
@@ -66,6 +65,5 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-csstree-validator": "^2.0.0",
     "stylelint-prettier": "^2.0.0"
-  },
-  "proxy": "http://localhost:3000"
+  }
 }

src/setupProxy.js

@@ -8,4 +8,18 @@ module.exports = function (app) {
       changeOrigin: true
     })
   );
+  app.use(
+    process.env.REACT_APP_api_URI,
+    createProxyMiddleware({
+      target: 'http://localhost:3000/',
+      changeOrigin: true
+    })
+  );
+  app.use(
+    process.env.REACT_APP_api_URI,
+    createProxyMiddleware({
+      target: 'http://localhost:6000/',
+      changeOrigin: true
+    })
+  );
 };