Express를 사용하여 서버에 나타나는 HTML을create react 응용 프로그램에 주입하는 방법
서버에서 생성된 HTML을 렌더링할 때 Next와 유사한 것을 사용할 수 있습니다.js나 Express+Webpack 샘플 파일을 사용하면 저는 Express+Create React 프로그램을 계속 사용할 수 있는지 보고 싶습니다. 제 동료처럼 튀어나오지 않습니다. 저는 모든 Webpack, babel, eslint 등 설정을 계속 유지하고 싶지 않습니다. 우리는 Express를 둘러싸고 방대한 모듈 생태계를 구축했습니다.create-react-app docs describe the ability to render data into the index.html 파일이지만, 이 기능을 어떻게 실제적으로 실현하는지에 대해서는 모호하기 때문에, 나는 그것이 나의 용례에서 일하기 위해 한 일을 공유할 것이라고 생각한다.
create react 응용 프로그램을 사용하여 초기화
우리가 해야 할 첫 번째 일은create react 프로그램을 실행하는 것입니다.다음 명령을 실행하여 프로그램을 생성합니다.
npx create-react-app my-app
추가 종속성 설치
다음에 우리가 해야 할 일은 응용 프로그램에 사용할 추가 의존 항목을 추가하는 것이다.
다음 명령을 실행하여 이러한 종속성을 추가합니다.
yarn add cra-build-watch express express-es6-template-engine npm-run-all reload serialize-javascript
nodemon을 설치한 경우 이 단계를 건너뛸 수 있습니다. 그렇지 않으면 nodemon을 설치해야 합니다.yarn add nodemon -D
cra 제조 시계
react scripts start를 실행하지 않고 이 패키지를 사용해서 start 스크립트를 대체합니다.만약 우리가
./src 또는 ./public 디렉터리를 변경한다면, 이것은 파일을 생성하여 디스크에 기록하고 파일 모니터를 설정하여 재구성할 것입니다.표현
우리는express를 사용하여 생산과 개발에서 우리의 응용 프로그램에 서비스를 제공할 것이다.이것은 시작 스크립트를 실행할 때create react app를 사용하는 것과 다르다. 웹 패키지 dev 서버를 사용해서 파일을 제공하지 않기 때문이다.
express-es6-template-engine
react 프로그램을 만드는 데 사용되는
public/index.html 파일에 자리 표시자를 주입합니다.이 파일이 build/index.html으로 변환될 때, 우리는express에서 이 파일을 제공하고,express-es 6-template-engine를 사용하여 우리가 사용하고자 하는 모든 서버에서 보여 주는 HTML로 자리 표시자를 바꿉니다.npm 모든 실행
이것을crabuild watch와express 서버를 병행적으로 실행할 것입니다.이 스크립트를 실행할 때, 우리는
./src에서 프로그램을 편집하고 파일을 재구성할 수 있으며,express는 ./build에서 파일을 제공할 것입니다.노드몬
nodemon은 node 개발을 돕는 도구입니다.디렉터리에 있는 파일 변경 사항을 감지할 때 노드 프로그램을 자동으로 다시 시작합니다. js 기반 프로그램을 실현합니다.
./server 디렉토리 또는 ./build 디렉토리를 변경할 때마다 이 명령을 사용하여 서버를 재부팅합니다.실제로, 우리는 ./src 디렉터리에 대한 변경 사항을 무시할 것입니다. 왜냐하면 우리는 ./src 디렉터리에 대한 변경으로 생성된 구축 디렉터리의 변경 사항을 감시하기를 원하기 때문입니다.이는 ./build 디렉토리가 ./src 디렉토리로 업데이트되기 전에 애플리케이션을 다시 로드하지 않도록 하는 데 도움이 됩니다.다시 로드
express 서버나 react 프로그램을 변경할 때 브라우저를 다시 불러올 수 있도록 express 프로그램과react 프로그램에서 이 옵션을 사용합니다.
자바스크립트 서열화
이것은 프로그램을 안내하는 데 사용할 수 있는 모든 JSON 데이터를 서열화하는 데 사용되며, 방법은 JSON 데이터를 색인에 있는 서버의 스크립트 표시에 직접 보여주는 것이다.html 파일.자세한 내용은 다음을 참조하십시오.
https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0
npm 스크립트 업데이트
다음은 npm 스크립트를 바꿉니다.현재 npm 스크립트를 삭제하려면:
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"start": "npm-run-all -p build:watch server:watch",
"server": "node server/app.js",
"server:watch": "nodemon --ignore './src/' server/app.js",
"build": "react-scripts build",
"build:watch": "cra-build-watch",
"test": "react-scripts test",
"eject": "react-scripts eject"
패키지에 홈 키를 추가합니다.json 파일
기본적으로 Create React Apps는 구축을 생성합니다. 응용 프로그램이 서버 루트 디렉터리에 위탁 관리된다고 가정하십시오.
이 옵션을 덮어쓰려면 패키지에서 홈 페이지를 지정할 수 있습니다.json.이렇게 하면 Create React Apps가 생성된 HTML 파일에서 사용할 루트 경로를 정확하게 추정할 수 있습니다.정적 자산을 제공할 때 Express 응용 프로그램에서도 이 키를 사용합니다.
우리는 계속해서 우리의 방안에 다음과 같은 내용을 설정할 것이다.json 파일:
"homepage": "/",
https://create-react-app.dev/docs/deployment/#building-for-relative-paths
공용/인덱스를 업데이트합니다.html
우리가 해야 할 일은
public/index.html의 HTML 주석을 삭제하는 것입니다.express-es 6-template-engine가 이 주석에 걸려 넘어진 것 같습니다.그리고 express에서 응용 프로그램에 서비스를 제공할 때, 서버가 보여 주는 HTML에 자리 표시자를 주입하는 자리 표시자를 추가할 것입니다.인덱스
<body>에서html 파일, 다음을 추가합니다.<%= '${header}' %>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<%= '${footer}' %>
<script>var bootstrap = <%= '${bootstrap}' %>;</script>
${header}, ${footer}과 ${bootstrap}에 자리 차지 문자를 만들 것이다.다음 부분은 개발 모드나 비생산 모드에서 프로그램을 실행할 때만 필요합니다.
색인에 다음 줄을 추가합니다.
</body> 태그 이전의 html을 닫습니다.<% if(process.env.NODE_ENV !== 'production'){ %>
<script src="/reload/reload.js"></script>
<% } %>
빠른 애플리케이션 설정
다음은 Express 응용 프로그램을 설정하는 것입니다.
서버/애플리케이션js
우선 루트 디렉터리에
server이라는 디렉터리를 만들 것입니다.다음은 app.js 디렉터리에 server이라는 파일을 만들고 다음 코드를 추가합니다.const express = require('express');
const http = require('http');
const path = require('path');
const reload = require('reload');
const es6Renderer = require('express-es6-template-engine');
const serialize = require('serialize-javascript');
const packageJson = require('../package.json');
const router = require('./api');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// Api Routes
app.use(`${packageJson.homepage}api`, router);
// view engine setup
app.engine('html', es6Renderer);
app.set('views', path.resolve(__dirname, '../build/'));
app.set('view engine', 'html');
// Serve static files
app.use(packageJson.homepage, express.static(path.join(__dirname, '..', 'build'), {
index: false
}));
const server = http.createServer(app);
server.listen(3000, () => console.log('App is running on localhost:3000'));
// Wire up reload behavior if app is not running in production mode
if (process.env.NODE_ENV !== 'production') {
// Wires up handler for /reload/reload.js route
reload(app);
}
// For all requests besides /api, serve the index template based on create-react-app's public/index.html file
app.get('*', (req, res) => {
res.render('index', {
locals: {
header: '<header class="express-header">Custom Header from Express</header>',
footer: '<footer class="express-footer">Custom Footer from Express</footer>',
bootstrap: serialize({ bootstrap: 'data' }, { isJSON: true }),
},
});
});
./build)우리는express-es6-template-engine가 있는 ./build/index.html을 사용하여 페이지의 눈썹, 꼬리, 안내 자리 표시자를 대체할 것입니다.또한 Express에서 제공하는 API에 대한 라우팅도 설정했습니다.서버/api/인덱스.js
그런 다음 API용 라우팅 프로세서를 설정합니다.
api 디렉터리에 server이라는 디렉터리를 만듭니다.그리고 index.js 디렉터리에 api이라는 파일을 만듭니다.index.js에 다음 코드를 추가합니다.const express = require('express');
const router = express.Router();
// Api routes
router.get('/ping', (req, res) => {
return res.json({ text: 'pong' });
});
module.exports = router;
응용 프로그램 시작
start npm 스크립트를 처음 실행하기 전에
yarn build을 실행하여 ./build 디렉터리를 생성해야 합니다.이상의 정보가 있으면 우리는 응용 프로그램을 시작할 수 있다.다음 명령을 실행하여 프로그램을 개발 모드로 시작합니다.
yarn start
프로그램을 시작하고 브라우저에서 http://localhost:3000을 탐색할 때,express에서 색인을 주입하는 사용자 정의 눈썹과 꼬리를 볼 수 있습니다.html 파일.
색인에express 서버에서 제공하는 데이터를 보여 주는 내장 스크립트도 볼 수 있습니다.html 파일.이것은 클라이언트 응용 프로그램이 서버에서 데이터를 사용하도록 안내하고 페이지가 로드될 때의 초기 데이터를 가져오기 위해 API 요청을 저장하는 데 사용됩니다.
./src, ./public 또는 ./server의 파일을 변경하면 브라우저에서 응용 프로그램이 다시 로드됩니다.생산에 들어가다
운영 모드에서 애플리케이션을 실행할 준비가 되었으면
yarn build을 실행하여 운영 자산을 구축한 다음 yarn server을 실행하여 애플리케이션을 시작할 수 있음을 기억하십시오.GitHub 재구매
여기서 코드가 있는 예제 응용 프로그램을 찾을 수 있습니다.
https://github.com/bjankord/express-create-react-app-custom-template
Reference
이 문제에 관하여(Express를 사용하여 서버에 나타나는 HTML을create react 응용 프로그램에 주입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bjankord/how-to-inject-server-rendered-html-into-create-react-app-with-express-1k0c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
