事前準備
node,npmをインストールしておく。
Macのローカルで環境構築
create-react-appコマンドで、サンプルアプリを立ち上げるのが便利。
どこのディレクトリで実行しても開発環境localhostを立ち上げるのは問題なさそう。
npx create-react-app react-sample-app
cd react-sample-app
# ローカル開発環境の立ち上げ
npm start
本番用にビルドする
npm run build
作成されたbuild配下のファイルをサーバにアップする。
package.jsonでファイルをアップしたディレクトリをhomepageに指定しないと、各種ファイルがルート指定になっていて読み込みに失敗する。
"homepage": "/test/react/", #例
本番サーバの確認
ブラウザでアクセスして確認。
CSPエラーが出ているが動作は問題なさそう。
Content Security Policy of your site blocks the use of 'eval' in JavaScript`
The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.
To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.
If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.
⚠️ Allowing string evaluation comes at the risk of inline script injection.
1 件のディレクティブ
ソースの場所 ディレクティブ ステータス
script-src ブロック中