빌드 및 배포5 Reverse Proxy를 거치기전의 IP를 WAS에서 알아내기 Goal Reverse Proxy를 거치기전의 Clinet의 IP를 WAS에서 알수 있도록 구성해봅니다. 개요 IP 차단 기능을 구현했는데, 배포환경에선 정상적으로 작동하지 않았습니다. 원인은, WAS측에서 요청한 클라이언트의 IP를 보고 필터링을 하도록 구현했는데, WAS는 실제 Client가 아닌, 본인입장에서 Client인 중간에 있는 리버스 프록시(NGINX)의 IP를 알게되기 때문입니다. 해결 리버스 프록시에서 X-Forwarded-For Header 추가 X-Forwarded-For Header 는 엄밀하게는 표준이 아니지만, 이런 상황에 대해서 사실상 표준처럼 쓰이는 헤더입니다. 리버스 프록시(NGINX)쪽에서 X-Forwarded-For Headerd의 값으로 클라이언트 IP를 넣어줍니다... 2021. 10. 3. 프론트엔드 배포 일지 언젠가는 배포에 관해 공부를 해야겠다고 생각을 했다. 하지만 자바스크립트 공부만 하기에도 너무 바빴기 때문에 미루고 미뤘었다. 만약 우테코가 아니었더라면 취업하기 전에 배포를 직접 만져볼 일이 있었을까 싶기도 하고. 맨 땅에 했더라면 굉장히 막막했을텐데, 같은 팀의 백엔드 크루인 '현구막'이 도와줘서 수월하게 마칠 수 있었다. 이전 포스팅에서도 말했듯이, 디스코드로 화면공유하면서 거의 아바타 소개팅처럼 배포를 진행했던 기억. 기존에는 배포할 일이 있어도 조그마한 토이프로젝트 정도였기 때문에 그냥 Netlify에다가 올려놓기만 했었다. 그래서 이번에도 처음에는 빠른 배포를 위해 Netlify를 사용했는데, 프로젝트의 사이즈가 점점 커지기도 하고 캐싱, 최적화 세팅 등등 설정할 세부사항들이 많아져서 마냥 N.. 2021. 8. 24. 프론트 배포를 위한 잡다한 사전 지식 얼마 전까지만 해도 프론트 배포라고 하면 Netlify밖에 떠오르지 않았다. (놀랍게도 실화) 하지만 프로젝트를 진행하면서 S3 + Cloudfront로 배포를 진행해야하는 상황이 발생했다. 백엔드 크루의 도움을 받아 배포를 진행하면서도 웹 관련 기본 지식이 부족했기 때문에 무슨 아바타 소개팅마냥 하라는 대로 하면서 필기만 하는 수밖에 없었다. 사실 Netlify를 통한 배포는 별도의 공부를 하지 않고도 정말 편하게 배포할 수 있다는 장점이 있지만 그 말은 곧, 인프라와 관련해서 배울 수 있는게 전혀 없다는 말이기도 했다. (근데 나중에 알고보니 Netlify도 S3보단 제한적이지만, 설정할 수 있는 옵션들이 굉장히 다양하더라.) 최근 들어 프론트엔드가 백엔드와 완전히 분리되기 시작하면서, 더 이상 배포.. 2021. 8. 23. React S3, CloudFront에 배포하기 summary babble 팀 서비스를 배포한 후로 새로고침을 할 때나 초기 페이지를 거치지 않고 URL로 직접 페이지를 이동하는 경우 계속해서 403 FORBIDDEN 에러를 마주쳤다. 왜 그런지 이유를 찾던 중, 얼핏 들었던 "React는 HTML 파일을 하나로만 구성해서 개발한다."가 떠올라서 React SPA에 대해 알아봤다. React는 SPA(Single Page Application)를 지원한다. SPA는 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다. 대게 react-router-dom을 이용해 SPA.. 2021. 8. 19. 웹팩으로 리액트 개발환경 구축하기 이번에 우아한테크코스에서 진행한 프로젝트의 개발환경을 처음 세팅할 때, 같은 팀 프론트엔드 크루와 함께 기준으로 삼았던 것은 바로 CRA였다. '우리가 CRA를 쓰던 때와 비슷하게, 아무런 불편함 없이 코딩할 수 있을 정도'로 세팅을 하자는 것. 그러면 그냥 CRA를 쓰면 되지, 왜 굳이 처음부터 세팅을 하느냐? CRA를 사용하면 불필요한 기능들까지 한 번에 딸려오기 때문에 가지치기 작업을 해줘야하는데, 그럴바에 차라리 직접 리액트 개발환경을 세팅하면서 공부를 해보자는 것이 공통된 의견이었다. 더불어 CRA를 사용하는 것이 불가능한 조건이었다는 건 비밀. ■ package.json 우선, 당연히 npm init을 통해 package.json을 만드는 것부터 시작된다. npm init 📦 웹팩(Webpac.. 2021. 8. 18. 이전 1 다음
