NUXT server init azure 운영서버 배포 시 에러 처리
현재 vue 3 + 타입스크립트 + 넉스트를 사용하여 사용자 페이지를 만들었다.
영업팀에서 제안이 하나 들어왔다. 현재 우리 사용자사이트와 saas 모드로 제공 가능한 홈페이지를 분리시켜달라고!
하나의 소스로 각각의 페이지로 보여야하는 사이트를 제공하기 위해서 ...
패키지 json 에서 스크립트 부분을 수정하였다
요런식으로 node_env 셋팅 후 ! yarn 으로 실행 시 분리하여 배포도 가능하게 만들기 위해서
빌드 쪽도 추가 해준다.
기존의 나는 vue2로 관리자를 유지보수 하는 개념으로만 수정하여 타입스크립트와 넉스트에 익숙하지 않았지만
클라이언트 쪽 언어는 구글링 하면 거의 대부분 이해가 쏙쏙 간다 ㅎㅎ(아마도 리액트 하신분들은 더쉬울것이다. 스토어 개념, es6, 웹팩 등등 만있으면 다 똑같은듯 싶다! 최근에 리액트 공부도하는중인데 리덕스 next 쿼리.js 재밌댜..어렵지만..)
추가로.. 윈도우 쪽에서만 작업을 하다보니 npm 이 익숙했지만 이번에 새로 mac에서 작업을 시작하여 yarn 을 사용하여 프로젝트를 진행하여 비슷무리? 해서 이것도 그닥 어렵지 않았다!
saas 로 실행 시킬경우 이런식으로 셋팅을 하여 쓰면 된다!
무리없이 진행하다가 관리자에서 셋팅한 값들이 api 호출 하여 돔이 그려지기 전 인 시점인 process.server 에서 실행하여 꼭 가져와야하는 데이터들이 있엇다 사이트 색상이라던지 디스플레이에 뿌려줄 정보라든지 등등 화면이 깜박거리면서 다른색으로 변경되는걸 방지 하기 위해서 store/index.ts 에서 스토어에 정보를 셋팅 해준뒤 가져다 쓰는 식으로 변경을 해야했다.
요런식으로 대강 작성해주고 가장 중요한부분!
개발쪽과 운영쪽에서에 환경은 틀리다.
지금 개발쪽은 회사 자체내에 서버를 구축해서 사용중이다. 리눅스에 vm 을 뛰운후 거기서 nginx 를 사용하여 개발서버에서 테스트를 진행중이다. 운영쪽은 azure 클라우드를 사용중이다!!
실제로 저장된 스토어를 사용하기 위하여 셋팅을 준비한다!
async asyncData(context: Context) {나는 컴포넌트 데이터를 로드하기전에 뿌려줄 데이터라서 asyncData 를 사용하였다!
reqRootDomain = DnsUtils.rootDomain(saasStore.contextDataUrl);요런식으로 값을 담고!~
await SaasStoreUtils.siteNameAct(reqRootDomain, context);이렇게 호출을 하였다!
문제가 하나있었다. !.. 운영과 개발에 배포후 실행한결과 개발서버는 너무 잘됐지만 운영서버에서
해당에러가 뜬다.. 난해했다.. 왜이러지 왜이러지 하면서 계속 프론트 소스에서만 잘못이 있겟거니 하면서 서버 미들웨어에서 호출하는등..엄청난 삽질했지만 동일한 에러가 계속 떳다.. 왜이러누...하다가 애저 쪽에서 로그(애저 접속 컨테이너 클릭 로그 클릭~)를 보니
넉스트서버init 은 내가찍었고..
context.req.headers.host에서 127.0.0.1 이 찍힌후 그뒤에는 설정한 도메인명이 마구마구 찍혓다..
문제점이 프론트소스가 아니라 애저에서 뭔가 던지는 느낌?! 엄청난 삽질과 백엔드 개발자분에 도움으로찾아낸결과
프론트 소스도 젠킨스에 설정후 ci/cd로 애저에 컨테이너로 띄우고있는 형태라서 조금 더 힘들었다!
프론트개발자지만.. 애저 공부좀 해야겠다.. 애저를 모르니 ㅠㅠ 엄청난 삽질을 ....
추후에..! 백엔드 개발도 할거긴 하니깐! 애저공부도 틈틈히 해야겠당!
이렇게 이해한후 실험으로 127.0.0.1 에대한 예외처리를 하거나 하면 되지만!~ 나는
딱히 예외처리가 필요없어서 127.0.0.1 이들어올시 백엔드 api 를 호출을 안하였더니
성공적!으로 운영에서도 실행이 되었다~ 운영과 개발쪽에서는 이런식으로 다차이가 나므로 프론트쪽에서만 문제점을 찾지 말고 클라우드쪽 로그도 유심히 보는게 좋을듯 싶다~ 이상으로 강코인의 개발일기 끄읏!~