web-dev-qa-db-ja.com

％PUBLIC_URL％を取得するノードエクスプレスを使用したcreate-react-app

Expressサーバーでcreate-react-appを試しています。リクエストを押したときにサーバーを設定した後、

GET http://localhost:3333/%PUBLIC_URL%/favicon.ico 400 (Bad Request)

エラープレビューでそれは私に与えます

URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
    at decodeURIComponent (<anonymous>)
    at decode_param (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:172:12)
    at Layer.match (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:123:27)
    at matchLayer (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:574:18)
    at next (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:220:15)
    at jsonParser (/home/owaishanif/code/flashcard-app/node_modules/body-parser/lib/types/json.js:103:7)
    at Layer.handle [as handle_request] (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:317:13)
    at /home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:335:12)

これがサーバーコードです

var express = require('express');
var bodyParser = require('body-parser');
var path = require ('path');

var data = {};

express()
    .use(express.static(path.resolve(__dirname, '..', 'public')))
    .use(bodyParser.json())

    .get('/api/data', (req, res) => res.json(data))

    .post('/api/data', (req, res) => res.json(data = req.body))

    .get('*', (req, res) => res.sendFile( path.resolve( __dirname, '..', 'public/index.html')))

    .listen(3333, function(){
        console.log('server running at 3333');
    });

サーバーでcreatereactアプリを使用したい。オンラインの記事がありますが、古くなっています。ヘルプのヒントやコツは大歓迎です。

javascriptnode.jsreactjsreact-routercreate-react-app
7
bawa g

ビルドフォルダを作成するcreate-react-appbuildを使用してこれを解決しました。また、%public_url%文字列は、舞台裏でいくつかのヤーンスクリプトに置き換えられています。そのため、そのフォルダを直接提供することはできません。代わりに、buildを使用して生成する必要があります。

yarn buildまたはnpm run buildを使用します。これにより、asset、manifest、およびその他のファイルを含むビルドフォルダーが生成されます。

その後、そのビルドフォルダーを使用して、本番用にファイルを静的に提供します。

4
owaishanif786