반응 라우터를 Express 서버와 함께 사용

간단한 Express 서버에서 제공하는 React 응용 프로그램이 있습니다. React 앱은 server.js 파일이있는 루트 디렉토리의 dist 디렉토리에 webpack입니다. dist 폴더에는 index.html 진입 점, main.min.js JavaScript 번들 및 기타 모든 정적 애셋 (CSS, 이미지 등)이 포함됩니다.반응 라우터를 Express 서버와 함께 사용

예를 들어, localhost:3000/ 사이트의 루트 디렉토리를 방문하면 index.html이 제공되고 JS 번들을로드하고 다른 모든 자산을 정상적으로 찾습니다. 앱은 react-router을 사용하여 버튼 클릭을 통해 정상적으로 이동하며 localhost:3000/feature으로 연결되는 링크가 정상적으로 작동합니다. 내가 수동으로 localhost:3000/feature의 주소 표시 줄에 입력에 가면

그러나, 서버는 예상대로 index.html은 제공하지만, 또한 main.min.js 대신에 index.html를 제공합니다. 이는 익스프레스 서버의 와일드 카드 경로가 index.html을 반환하도록 매핑되기 때문입니다. 이것이 내가 어떤 기사에서 다룬 것을 본 것입니다. 그러나이 경우가 고려되었는지 확실하지 않습니다. 이 서버 라우팅을 정의하는 것을

app.use(express.static(path.join(__dirname))); 
app.get('*', function response(req, res) { 
    res.sendFile(path.join(__dirname, 'dist', 'index.html')); 
});

입니다 :

다음은 관련 서버 코드의 조각입니다. 수동 주소 변경을 허용하는 더 좋은 방법이 있습니까? 도움이된다면

여기 내 파일 구조입니다 : index.html의

|-root 
    |-server.js 
    |-webpack.config.js 
    |-dist/ 
    |-main.min.js 
    |-index.html 
    |-a2cea76fae187add3c974dcacf446eab.jpg 
    |-...etc

내용 :

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

<body> 
    <div id="root"><!-- React app --></div> 
    <script src="dist/main-631cea2c7e308b1dfb26.min.js"></script> 
</body> 
</html>

출처

2017-01-11 Alan Thomas

아마 당신은 [이] (https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md) –

@IslamIbakaev이 유일한 솔루션입니다해야합니까? 가능한 경우 서버 측 렌더링 (지금은)을 피하고 싶습니다. –

다른 솔루션을 모르는 경우에는 반응 라우터에서 실제로 "서버 측 반응"을하지 않고 설정합니다. –

상대 경로를 사용하여 스크립트를 참조하는 것 때문입니다. http://localhost:3000/feature의 브라우저는 물론, 따라서 express.static 미들웨어는 다음 미들웨어를 통해 요청 가을시키는되고, 존재하지 않는 http://localhost:3000/feature/dist/main-631cea2c7e308b1dfb26.min.js에 스크립트를 해결할 예를 들어

따라서 root relative 경로로 정의해야합니다.

<script src="/dist/main-631cea2c7e308b1dfb26.min.js"></script>

출처

2017-01-11 22:31:28 riscarrott

@Alan Thomas - 또한'express.static'로'__dirname'을 제공하지 않아야합니다. 그렇지 않으면 브라우저에서 서버 코드와 webpack 설정에 액세스 할 수 있습니다. 'path.join (__ dirname,') dist ')'스크립트 참조를'/ main-631cea2c7e308b1dfb26.min.js'로 변경하십시오. – riscarrott

상대 경로가 문제입니다. webpack을 사용하는 경우 HtmlWebpackPlugin을 사용하여 청크 스크립트 태그를 html 파일에 삽입 할 수 있습니다.이것은 기본적 '플러그인 의해 명시 적 경로 설정한다 [ 새로운 HtmlWebpackPlugin ({ 템플릿 '뷰/index.html을' 분사 '신체' 파일명 : 'index.html을' }) ]를 ' – bsyk

@riscarrott 상대 경로를 사용하여 스크립트를 참조하는 것이 효과가있는 것처럼 보입니다. 나는 이것을 테스트하기위한 기본 앱을 만들었습니다. https://react-express-alanqthomas.c9users.io/. 출처 : https://ide.c9.io/alanqthomas/react-express. 이것은 상대적 경로 지정을 사용하며 의도 한대로 작동합니다. –

반응 라우터를 Express 서버와 함께 사용

답변

관련 문제