Day 22 | 프로젝트명 변경/가배포

프로젝트명 변경

왜? 이제와서?

기존의 Life Is a Sentence, 즉 LIS 는 독특하고 기억에 남기 때문에 좋은 옵션이지만, 웹이 무엇을 하는지 처음에는 사용자에게 명확하지 않을 수 있다고 생각했다.

제작 하면서도 더 좋은 제목을 생각했고 SentenceU는 문장 공유 서비스에 대한 명확한 목적을 보여줄 것 같았다.

그래서 최종적으로 SENTENCE U 센텐스유로 결정했다.

무료 라이선스 폰트로 일단 간단하게 로고도 만들었다. 나는 프론트엔드 개발자가 될꺼다. 디자이너가 아닌.

---

서버 배포

처음부터 서버는 클라우드타입을 통해 배포를 하려했다.

모두의 플랫폼팀, 클라우드타입

프로젝트 생성 후 서비스를 생성 할 때 요구하는 설정들이 있다.

• 깃허브 레포
• 환경변수
• npm ci 설치 명령어 (npm ci --production) https://trustyoo86.github.io/npm/2018/03/28/npm-ci-command.html
• 서버 실행 명령어 (node server.js)

배포에 성공하면 Complete라는 문구와 함께 몇 분 지나면 서버가 실행 중인 Running을 보여준다.

문제는 지금부터

다른 도메인간 쿠키 전송하기(withCredentials, credentials, sameSite, secure)

 

React + Express | CORS 설정하기

서버와 클라이언트의 도메인이 달라도 쿠키전송이 가능하다는 글을 봐서 클라이언트는 gh-page로 배포를 해봤다.

유저가 로그인 후 접속을 유지하고 정보를 쿼리에 저장하기 위해 쿠키를 이용했다.

여러 글을 찾아보면서 withCredentials설정과 CORS설정도 다 해봤지만. 결국 도메인이 다르면 현실적으로 쿠키 전송이 어렵다는 결과를 도출했다.

쿠키를 가져와야 유저가 내가 만든 모든 기능들을 사용 할 수 있단 말이다!

도메인을 구입하다

결국 서버와 클라이언트의 도메인을 맞추기 위해 호스팅케이알에서 도메인을 구입했다.

글로벌 IT 파트너 - 호스팅케이알(HK)

도메인 구입 후 클라우드타입의 도메인에 연결시켰다.

웹팩 빌드 시 문제 발생

문제 1. 빌드 후 자바스크립트 파일 로드 중 에러 발생

Uncaught ReferenceError: $ is not defined

해결방법

"build": "cross-env webpack" // 수정 전 
"build": "cross-env NODE_ENV=production webpack" // 수정 후

build시 NODE_ENV 변수를 배포모드를 적용하면 해결됐다.

---

문제 2. 빌드파일을 서버에서 불러오지 못함

분명 빌드된 index.html에서 경로도 제대로 되어있는 모습을 확인할 수 있었다.

뭐가 문제인지 도저히 알 수가 없어서 단체채팅방에 도움을 요청했다.

react-refresh(hot-reloading)의 단점

일부 코드는 Hot Reload가 실행될 때 해당 코드가 다시 실행되지 않기 때문에 페이지에서 상태를 초기화하는 코드를 변경하는 경우, 특히 Hot Reloading에서 제대로 재생되지 않는다.

두 가지 문제 모두 배포모드의 경우를 생각하지 않았다는 것이다.

해결방법

plugins: [
  ...(isDevelopment ? [['react-refresh/babel', { skipEnvCheck: true }]] : []),
]

react-refresh플러그인을 개발환경일 때만 사용하도록 설정한다.

react refresh 설정하기 ($RefreshReg$ is not defined 오류 해결!)

나중에 배포할 때 마주할 문제였던 것들 미리 해결해놔서 좋다.

---

서버에 빌드된 정적파일 전달

서버로 빌드폴더를 전달하고 서버를 깃허브에 커밋한다. 그리고 클라우드타입에서 다시 배포를 하면 문제가 없다면 성공하겠지..

1차 배포 테스트 성공!