Cafe24 호스팅 에로사항(1)
내가 예상치 못하게 애를 좀 먹었던 Cafe24 호스팅에 관한 글이다.
호스팅 신청 ⇒ 공용키 설정 ⇒ 도메인 확인 ⇒ create-react-app ⇒ express SSR 설정
- 호스팅 신청 -절약형
앱 실행 시 , 카페24 Default 창 확인
-
앱 공용키 생성 - ssh keygen -t rsa -C "키 이름"
id_rsa.pub에 저장된 공용키를 cafe24 에서 앱키로 등록
⇒>>
-
git 저장 소 연결 및 add, push - remote add 를 통해서 직접 연결 해줘야 함
git remote add cafe24 저장소 이름
git add .
git push cafe24 master
push 후 앱 중지 후, 실행
-
server side rendering (express 설치)
server.js 파일에서 APP.tsx 바로 rendering 불가
⇒ "type" : "module" 하면 에러 메세지 안뜸
- Unknown type 에러 발생
-
yarn build 후 index.html파일 rendering
package.json 설정
es module error
⇒ create-react-app으로 빌드한 PRoject의 Esmodule 버젼, type 등의 Config 파일과 express.js 간의 Config가 맞지 않음.
⇒ es module error시 해결 방법
- CommonJs 로 구현:
- 웹팩(Webpack)
- 롤업 → ?
- CommonJs 로 구현:
-
Webpack
npm install @babel/preset-env @babel/preset-react @babel/preset-stage-0 @babel/preset-typescript express nodemon npm-run-all webpack-dev-server webpack-merge webpack-node-external npm i -D @types/express @types/react @types/react-dom @types/node sass-loader ts-loader typescript webpack webpack-cli nodemon npm-run-all webpack-node-externals babel-loader @babel/polyfill css-loader node-sass style-loader
Webpack, babel 모듈 설치
App.tsx 변경
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); ReactDOM.hydrate( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
ts파일만들어서 Webpack 설정
webpack.config.js
package.json webpack config 추가
"dev:server": "nodemon --watch build --exec \"node build/bundel.js\"",
"dev:build:server": "webpack --config webpack.server.js --watch",
"dev": "run-p dev:build:server dev:build:client dev:server*",
문제 1. Webpack config를 코드 조각 형식으로 집어넣으면 Es module 에러가 여전히 발생
⇒ 프로젝트 빌드 단계에서 Create-react-app 대신 webpack을 빌드해야 됨
⇒ tsconfig 파일 과의 우려
Author And Source
이 문제에 관하여(Cafe24 호스팅 에로사항(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@harrysci/Cafe24-호스팅-에로사항저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)