0

React로 간단한 앱을 만들고 간단한 경로를 설정했습니다. 내 로컬 호스트의 클라이언트에서 제대로 작동합니다. 모든 JS 코드는 하나의 파일에 번들되어 index.html 파일로 액세스됩니다. 서버에 배포하면 모든 것이 클라이언트 쪽이기 때문에 경로 요청이 작동하지 않습니다.React SSR : Error Uncaught SyntaxError : 예기치 않은 토큰 <

이 문제를 해결하기 위해 ExpressJS를 사용하여 색인 파일을 제공하는 방법에 대한 자습서를 보았습니다. 따라서 어떤 경로에서도 클라이언트 응용 프로그램을로드 할 수 있습니다. 문제는 인덱스 파일을 제공 할 때 html 파일을 다시 제공하고이 오류가 발생한다는 것입니다. app.js:1 Uncaught SyntaxError: Unexpected token < 그리고 왜 이런 일이 일어나고 어떻게 해결할 수 있는지 잘 모르겠습니다. 스크립트 태그를 제거 할 때마다 파일이 올바르게 제공됩니다. 나는이 시점에서 무엇을해야할지 모르겠다. 내가 찾은 다른 출처도별로 도움이되지 않는다. 이 문제를 해결하려면 무엇을해야합니까?

여기 내 서버 파일입니다

const express = require('express') 
const path = require('path') 
const port = process.env.PORT || 3000 
const app = express() 

app.use(express.static(__dirname + '/dist')) 

app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, '../dist', 'index.html')) 
}) 

app.listen(port) 

그리고 여기 내 인덱스 파일은 명시 적으로 제공됩니다 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
    <title>app</title> 

    <!-- build:css css/app.min.css --> 
    <link rel="stylesheet" href="css/main.css"> 
    <!-- endbuild --> 
</head> 
<body> 

<div id="app"></div> 

    <!-- build:js js/app.min.js --> 
    <script src="js/app.js"></script> 
    <!-- endbuild --> 
</body> 
</html> 

감사합니다!

답변

0

번들링이 올바르게 작동하지 않는 것 같습니다. create-react-app (반응 작성자가 제공)을 사용하는 것이 좋습니다. 이 작업을 수동으로 시도하면 모든 의문점이 제거됩니다. 수동으로 관리하려는 경우에는 npm run eject을 사용하여 모든 권한을 부여 할 수 있습니다.

tutorial on how to integrate with a node backend도 제공됩니다.

마지막으로 서버 측 렌더링 (SSR)으로 마이그레이션하려는 경우 여기에 a guide on the steps needs coming from create-react-app이 있으며 여기에는 코드 샘플과 함께 github 저장소도 제공됩니다.

관련 문제