[한국의 Goodreads 개발하기] Day 6. 프론트엔드 배포해보기

오전 11시 59분

제로초님의 넥스트로 노드버드 만들기 강좌를 참고로 프론트엔드만 일단 먼저 배포해보기로 한다.

 

오후 12시 20분

next와 express 서버를 연결중. 물론 server.ts 파일로 작업하고 있고 그래서 nodemon에서 오류가 났다.

 

오후 12시 42분

ts-node server.ts 하는데 

Error: Cannot find module 'express'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/lelana/study_space/korean-goodreads/server.ts:1:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Module.m._compile (/usr/local/lib/node_modules/ts-node/src/index.ts:439:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/usr/local/lib/node_modules/ts-node/src/index.ts:442:12)
    at Module.load (internal/modules/cjs/loader.js:653:32)

이런 오류가 뜬다.

 

멍청하게 express를 설치를 안했네.. @types/express 만 설치함.

 

이제 그 다음엔 다른 오류가 뜨는데 이거는 밥먹고 나서 수정좀 해야겠다.

ts-node 실행하면 내가 설정한 tsconfig.json 파일을 지맘대로 바꿈

 

오후 1시 26분

밥먹고 옴.

 

"isolatedModules": false,

"module": "commonjs",

 

두 설정을 이렇게 바꾸니까 되는데 문제는 ts-node가 실행을 하면 자동으로 얘네를 수정한다는게 문제다.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.module must be esnext (for dynamic import() support)
  - compilerOptions.isolatedModules must be true (requirement for babel)

이러면서 지들 멋대로 파일을 수정해버린다.

관련해서 찾아보니 이런 이슈가 작년부터 있었다. 

 

오후 1시 55분 

여러가지를 찾아봤는데 일단 문제가 되는 부분만 수정해서 커스텀 tsconfig.dev.json을 만들어서 nodemon을 돌려보았더니 잘 된다. (어떤 오류가 있을지는 아직 모르지만..)

 

오후 2시 4분

또 dotenv를 이용해서 COOKIE_SECRET 키를 읽어오려고 하는데 string | undefined는 string | string[] 타입 변수에 할당할 수가 없다고 나와서 좀 찾아봤더니 아래의 사이트에서 도움을 받았다.

 

https://gongzza.github.io/javascript/nodejs/typescript-definition-for-process-env/

TypeScript definition for process.env

node.d.ts 파일을 만들어서 필요한 타입은 직접 설정할 수 있다. 

그렇게 했더니 해결됨.

 

아 ts-node로 빌드하니까 깨져가지고 그냥 뒤에 as string으로 직접 넣어줬다. 이렇게 되면 node.d.ts 파일이 필요가 없다!

 

성공적으로 되었다. 이제 커밋하자.

 

오후 3시 20분

좀 쉬다가 다시 시작한다.

이제 AWS에 배포를 해볼 차례이다. 이것도 마찬가지로 제로초님 강의를 참고해서 진행하려고 한다.

 

오후 4시 10분

next.config.js 파일을 수정하고 build도 정상적으로 되는것을 확인했다. 이제 AWS에 올리려고 한다.

 

아마존 ec2 기존에 있던거 삭제하고 일단 간단하게 하나 그냥 만든다.

 

오후 4시 29분

 

yarn을 설치하고, nodejs도 설치하고 그리고 내 깃헙에서 clone 해온 다음에 yarn 으로 필요한 패키지들을 설치해준다.

역시 yarn이 빠르다..

 

오후 4시 48분 

 

pm2 start ts-node 이런 명령어가 오류가 나서 확인중이다.

권한 문제였네. start 명령어 설정해준 부분 앞에 sudo를 붙이면 해결이 되었다.

 

https://geunhokhim.wordpress.com/2016/03/29/nodejs-error-listen-eacces-0-0-0-0-80/

Node.js; Error: listen EACCES 0.0.0.0:80

이런 글이 있다. 일단 그냥 80port에 해놓고 나중에 nginx 도입할때 다른 포트로 바꿔야지.

역시. 다른 포트로 하니까 잘되네. 

 

문제는 잘 불러와지는데 CSS가 전혀 적용이 안된 모습으로 보여진다...내가 보기에 이것은 SASS가 어찌된 이유에서인지 적용이 안되서 그런것 같다.

 

참고로 next.config.js 에서 withSass를 적용했는데.. 이유는 아직 모르겠다.

 

지금 보니까 로컬에서도 안되네. next.config.js 파일 수정하면서 번들러하고 plugins를 수정했는데 그거때문인 것 같다.

 

오후 5시 19분

 

위 문제는 내일 해결하기로 함.