Cafe24 호스팅 에로사항(1)

내가 예상치 못하게 애를 좀 먹었던 Cafe24 호스팅에 관한 글이다.

호스팅 신청 ⇒ 공용키 설정 ⇒ 도메인 확인 ⇒ create-react-app ⇒ express SSR 설정

1. 호스팅 신청 -절약형

앱 실행 시 , 카페24 Default 창 확인

2. 앱 공용키 생성 - ssh keygen -t rsa -C "키 이름"

   id_rsa.pub에 저장된 공용키를 cafe24 에서 앱키로 등록

⇒>>

3. git 저장 소 연결 및 add, push - remote add 를 통해서 직접 연결 해줘야 함

   git remote add cafe24 저장소 이름

   git add .

   git push cafe24 master

   

   push 후 앱 중지 후, 실행

4. server side rendering (express 설치)

   

   server.js 파일에서 APP.tsx 바로 rendering 불가

   

   ⇒ "type" : "module" 하면 에러 메세지 안뜸

   • Unknown type 에러 발생

5. yarn build 후 index.html파일 rendering

   

   package.json 설정

   es module error

   ⇒ create-react-app으로 빌드한 PRoject의 Esmodule 버젼, type 등의 Config 파일과 express.js 간의 Config가 맞지 않음.

   ⇒ es module error시 해결 방법

   1. CommonJs 로 구현:
      1. 웹팩(Webpack)
      2. 롤업 → ?

6. 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 파일 과의 우려