Netlify
-
정적 웹 사이트 (js/html/css만 존재하는 형태)로 서비스 제공이 필요할 때 가장 편하게 배포할 수 있는 사이트
-
빌드/배포/호스팅까지 정적 웹 사이트를 제공하기 위한 모든 기능을 쉽고 편하게 제공
-
github 에 연동해서 해당 소스코드를 바탕으로 배포를 진행, 변경사항이 생기면 그에 따라 자동으로 간단하게 재배포 가능
Netlify 공식 페이지
Netlify 배포하기
- 프로젝트 배포용 새로운 repository 생성
- Import an existiong project 클릭
- Github 로 배포하기 클릭
- 배포를 진행할 Git 레포지토리 선택
- 배포를 진행하기 위한 Build Command 와 프로젝트 폴더 경로 입력
- 프론트 단에서 사용되는 설정된 env 환경변수들 입력
- 현재 프론트 코드에서는 API 요청관련 로직에 백엔드 주소를 환경변수로 설정하여 사용 중임
- 해당 환경변수를 Netlify 설정에 추가
- 이후 Build 과정을 거쳐서 최종적으로 배포가 완료되면 제공되는 주소로 웹페이지 접속이 가능해짐
-
문제는 해당 주소로 엔드포인트 요청을 통해 페이지 접속을 하면 위와 같이 Mixed Content 에러가 발생
-
현재 배포된 주소는 https 로 보안이 강화된 형태로 접속을 진행함
-
그러나 렌더링 후 실행되는 GET 메서드에 대한 axios 요청의 백엔드 주소는 http로 설정되어 있음
-
즉, https와 http 통신방식이 같이 쓰이고 있기에 브라우저가 이 차이를 캐치하여 해당 에러가 발생한 것
기본적으로 https 는 https 하고만 리소스를 공유하며 이것은 보안과 안정성을 위한 규칙임
해결방안 - Proxy 를 이용한 우회
- 우선 프론트엔드 엔드포인트 주소를 PROXY 환경변수 값으로 설정해 줌
- 다음으로 API 요청관련 백엔드 주소 부분을 앞서 설정한 PROXY 주소로 변경해 줌
-
이후 public 폴더 내에
_redirects파일을 하나 만들고, 위와 같이 작성 -
이는 Netlify 에서 지원하는 redirect 기능으로 앞부분의
/api/*는 받게 될 요청의 경로 타입을 의미하며 뒷부분의 주소는 해당 요청을 넘겨보낼 주소를 의미 -
:splat 은 앞의 요청 경로를 해당 주소 뒤에 붙이는 것을 의미
-
뒤의 200은 상태코드 200을 나타냄
-
이 과정을 통해 프론트에서 API 요청을 날리게 되면 이는 바로 백엔드로 가지 않고, redirect 되어 Netlify 에서 지정한 백엔드 주소로 대신 요청을 보내게 되기 때문에 Mixed Error 가 발생하지 않게 됨
- 프론트 코드가 수정되었기 때문에 재배포를 위해 git 에 수정사항을 push
- 배포된 사이트 설정 탭에 들어가서 앞서 설정했던 PROXY 환경변수를 추가 후 재배포를 진행
- 이후 배포 주소로 들어가면 mixed Error 가 사라지고, 데이터 로드도 정상적을 되는 것 확인가능
에러 발생 - Build 실패
11:14:39 PM: $ next build
11:14:39 PM: ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
11:14:39 PM: Linting and checking validity of types ...
11:14:39 PM: ▲ Next.js 14.0.4
11:14:39 PM: Creating an optimized production build ...
11:14:41 PM: ✓ Compiled successfully
11:14:41 PM: Collecting page data ...
11:14:42 PM: > Build optimization failed: found page without a React Component as default export in
11:14:42 PM: pages/main/index.styles
11:14:42 PM: See https://nextjs.org/docs/messages/page-without-valid-component for more info.
11:14:42 PM: error Command failed with exit code 1. (https://ntl.fyi/exit-code-1)
11:14:42 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
11:14:42 PM:
11:14:42 PM: "build.command" failed
11:14:42 PM: ────────────────────────────────────────────────────────────────- 이후 배포 진행 과정에서 Build 관련 실패 로그가 출력됨
Build optimization failed: found page without a React Component as default export in
11:14:42 PM: pages/main/index.styles-
pages 폴더 경로 내 main 폴더 안에 렌더링 컴포넌트 용 js 파일, 해당 컴포넌트에 적용할 emotion styled 코드를 모아 놓은 js 파일로 각각 분리해 두었는데 이 style 관련 js 파일에서 문제가 발생
-
알고 보니 Netlify는 Build 과정에서 page 폴더 내 경로 상의 모든 컴포넌트들이 함수형으로 작성되어야 하는데 해당 styled 파일은 따로 함수로 묶은 것이 아닌 각 style마다 개별적으로 export default 하는 식으로 구성되어 있어 문제가 발생한 듯함
해결방안
-
방법 1 = styled 내의 형식을 개별적인 export default 로 내보내는 게 아닌 일반 react 컴포넌트 방식처럼 하나의 함수에 담아서 해당 함수를 export default
-
방법 2 = Pages 경로 바깥에 styled 관련 코드들을 모아놓음 (문제가 된 해당 js 파일을 상위 디렉토리로 이동)
에러 발생 - 프론트에 설정한 환경변수를 읽어들이지 못함
- 위와 같이 백엔드 주소를 환경변수로 대체한 후
yarn dev로 실행했을 때process.env.BACKEND_URL을 받아오지 못해 undefined로 출력되며 axios 통신 에러가 발생
해결방안
- Next.js 에는 Next 만의 환경변수 설정 규칙이 있었고 해당 규칙을 따르니 정상적으로 동작
문제 해결방법
