[5/22 TIL] netlify 배포

kind J·2022년 5월 22일

netlify 배포 팀과제

오늘은 여태 과제로 만들었던 검색기능을 netlify를 이용해서 배포를 해보았다.

netlify를 사용하려면 먼저 가입을 해야한다.

원하는 것으로 가입을 한다. 나는 깃허브의 팀 레포지토리를 올릴것이기 때문에 github 로 가입을 했다.

배포를 맡아서 하기로 했어서 개인 레포로 시도 해봤었는데, 창이 잘 넘어가서 에러만 수정하면 될것 같다고 생각했는데,

팀 레포지토리는 좀 달랐다. 넘어가지가 않고 흰 창이 떠서 계속 시도를 해보다가 팀원들에게 도움을 요청했다.

해결방법은, 깃 레포지토리를 만든 사람이 관리자 권한을 주면되었다. 관리자 권한이 생기면 setting 이 뜬다.

저게 뜨면 다시 돌아가서 시도해보면 창이 멈추지 않고 잘 넘어가진다.

가져올 레포지토리랑, 브랜치를 선택하고

deplay site 버튼을 클릭하면

요런 창이 뜬다.

아래의 'production deploy'에서 log 를 볼수 있다. 저기서 진행상황을 볼 수 있다.

클릭해서 들어가보면 아래와 같다.

내가 처음 마주한 에러는

요거였는데 정규 표현식 때문에 린트 에러가 났다.
정규 표현식이 있는 파일로 가서

> // eslint-disable-next-line

린트가 해당 줄을 무시하도록 주석을 달아주었다. 그랬더니 에디터에 있었던 노란 줄도 사라졌다.

그리고 콘솔도 에러를 낸다고 해서 꼭 띄워야 하는 콘솔에 가서는

// eslint-disable-next-line no-console

를 추가해주면 된다.

그렇게 하고 푸쉬를 해보니

성공 메세지가 뜨면서 링크를 던져줬다.

링크에 들어가보니 페이지는 잘 열리는데 api 호출이 잘 안 되었다.
일단 env 파일에 api 키는 깃허브에 올리지 않게 해놨기 때문에,

deploy settings 를 클릭,

api 호출에 필요한 key와 value를 입력 하고 'save'하면

위와 같이 등록된다.

그리고

다시 여기로 와서 'Retry deploy' 를 클릭한다.

그럼 다시 로그가 활성화 된다. 다시 빌드를 해서 봤더니 아직도 api가 호출을 실패했다.
프록시 문제였다.

프록시란?
Proxy 는 '대리', '대신, 이라는 뜻이다. 보안상의 문제를 방지하기 위해 직접 통신하지 않고 중계자를 거친다는 개념이다. 이 때 중계의 기능을 하는 것이 '프록시 서버'이다.

클라이언트와 서버 사이에 프록시 서버가 중계를 해주면 클라이언트의 Request 와 서버의 Response 를 연결해준다.

프록시 서버를 사용하는 이유는
1. 시간절약 : 클라이언트가 프록시 서버에 요청한 내용을 프록시 서버에서 캐시로 저장해 두면 나중에 다시 데이터를 요청시 캐시된 데이터를 사용하면 되므로 전송 시간을 절약할 수 있다.
캐싱 기능을 제공하면서 동시에 특정 사이트는 접근 불가하도록 제한 걸수도 있다.
2. 보안
클라이언트가 바로 서버에 데이터를 요청하여 받아볼 수도 있지만 중요한 데이터가 있는 DB가 노출될 수 있으므로 중간에 프록시 서버를 두고 내부망을 보호하는 역할을 담당하게 한다. 클라이언트가 프록시서버에 데이터를 요청하면 프록시 서버는 실제 내부 서버에서 데이터를 가져와 클라이언트에게 전달해 준다.

API 요청 error 해결 방법

요청할 api 주소가 달라지고 있기 때문에 그걸 해결하기 위해서,

1) package.json 으로 가서 proxy 를 설정한다.

 "proxy": "http://apis.data.go.kr",

를 추가해주면
해당 프로젝트에서 호스트가 지정되지않은 API 요청이 있을때 proxy 설정 주소를 root URL 요청이 가게 되고 CORS 에러를 해결할 수 있다.

2) root 에다가 netlify.toml 파일을 생성

[[redirects]]
from = "/proxy/*"
  to = "요청주소(ex. http://apis.data.go.kr/B551182/diseaseInfoService/getDissNameCodeList)"
  status = 200
  force = true

를 입력

[참고 : 아래 reference 링크에서 확인]
from: 리디렉션하려는 경로.
to: 리디렉션하려는 URL 또는 경로
status: 해당 리디렉션에 사용하려는 HTTP 상태 코드
force: 경로의 기존 내용을 재정의할지 여부. false가 기본값

api를 쓰는 곳에 와서

    const { data } = await axios.get<IClinicalTrials>(
      `/B551182/diseaseInfoService/getDissNameCodeList?ServiceKey=${process.env.REACT_APP_API_KEY}`,
      {
        ...
      }
    );