Reactの練習：Build先の変更
create-react-appで出来た最初のappを「npm run build」をやると、buildフォルダができていて、そのフォルダをサーバにアップロードすると動きます。というのが「売り」で、serve -s buildをやればすぐに確認できます。という紹介が多いのですが、私のようにレンタルサーバの一部にその「buildフォルダ」をアップすると、動きません。
その結果がこれ（https://www.wsmeguro.jp/tools/react/build/）です。
buildフォルダ内を見てみると、htmlがなんか変です。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
<link rel="manifest" href="/manifest.json"/>
<title>React App</title>
<link href="/static/css/main.012cfbd2.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={2:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script>
<script src="/static/js/1.fa92c112.chunk.js"></script>
<script src="/static/js/main.f4997dba.chunk.js"></script>
</body>
</html>
という感じで、実は、出力先が「/static/」という感じで一番上のフォルダから見た絶対パスで表示されている。なんだなんだと、「/static/」を「./static/」と相対パスに変えて保存したのがこちら（https://www.wsmeguro.jp/tools/react/build1/）です。面白かったので残しておきます。
どうしたらいいのか、調べるとこちら（https://www.yoheim.net/blog.php?q=20180418）にありました。build先の変更ができるようです。
package.jsonに「”homepage”: “./”,」を追加して、「npm run build」すれば、こちら（https://www.wsmeguro.jp/tools/react/build2/）の通りちゃんと動きました。
{
"name": "first-react",
"version": "0.1.0",
"homepage": "./",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}