React ビルド時の static フォルダ作成
解決したいこと
DjangoとReactを連携させたく思っています。
書籍を見ながらローカルの自作サイトで試すとうまくいったのですが、
同じ内容で公開中の自作サイトで試すと失敗しました。
Django + Nginx + gunicorn で作成したサイトです。
自作サイトはDjango側でアプリを作成してあり、Reactのプロジェクトと連携しようと、まず
npm create-react-app react-app
でReactのプロジェクトを作成しました。次に、
npm run eject
で「config」フォルダが作成されるはずができなかったので、ローカルでうまくいった時の「config」フォルダをSCPで転送して配置しました。(Scriptsフォルダも同様に転送しました。)
react-app/
README.md build config node_modules package-lock.json package.json public scripts src
その状態で
npm run build
としたところ、
> react-app@0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
46.61 kB (+41 B) build/static/js/main.03fee2c2.js
1.78 kB build/static/js/787.b701888c.chunk.js
541 B (+39 B) build/static/css/main.073c9b0a.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
https://cra.link/deployment
と表示され成功したと思い、「bookproject/static」フォルダ内に新しく作成されるべき「static」フォルダを見にいくとできていませんでした。
エラーが出ているという感じではありません。
(「bookproject/static/static」フォルダ内に「css」「js」「media」といったフォルダもできるはずなのですが。。)
react-app/config/paths.js
'use strict';
const path = require('path');
const fs = require('fs');
const url = require('url');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const envPublicUrl = process.env.PUBLIC_URL;
const buildPath = process.env.BUILD_PATH || '../bookproject/static';
function ensureSlash(path, needsSlash) {
const hasSlash = path.endsWith('/');
if (hasSlash && !needsSlash) {
return path.substr(path, path.length - 1);
} else if (!hasSlash && needsSlash) {
return `${path}/`;
} else {
return path;
}
}
const getPublicUrl = appPackageJson =>
envPublicUrl || require(appPackageJson).homepage;
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
return ensureSlash(servedUrl, true);
}
module.exports = {
dotenv: resolveApp('.env'),
//appBuild: resolveApp('build'),//
appBuild: resolveApp(buildPath),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveApp('src/index.js'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveApp('src/setupTests.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
};
自分で試したこと
こまめに、npm cache clean --forceを実行。
ここに行き着くまでに一度「npm uninstall -g create-react-app」でアンインストールし入れ直してます。
解決方法をご教授いただければ幸いです。
0