[AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[6]-Front 배포 & 탄력적 IP고정

back server에서 npm install pm2를 설치한 것 처럼

기존 프로젝트 front 경로도 pm2를 설치 후 pull해주자 ! 

 

 

|  알고 가야하는 점 !

첫 번째, 지금 프로젝트는 nextjs 로 진행했기 때문에

getServerSideProps와 같은 backend에서 먼저 data를 받아와야 하는 함수가 들어있다

따라서 backend 가 무조건 켜져있어야지만 front를 켤 때 오류를 방지할 수 있다 !

 

두 번째, 현재 나는 saga 로 상태관리를 하고 있는데, saga 폴더의 index.js에서 나는 axios의 defaults 값으로 baseURL을 지금까지는 axios.defaults.baseURL = 'localhost:3001'; 이렇게  적어주고 사용해왔었다.

하지만 지금 우리가 배포를 진행하면서 서버는 총 2대 ( 프론트 / 백앤드 ) 컴퓨터가 2대라고 생각하면 되기 때문에

IP가 서로 다르다.

즉, 백엔드 IP를 입력해서 요청을 보내야하므로 이 부분을 수정해야한다.

 

 

---

먼저

 

프로젝트 경로에 pm2 설치!

 

그 후 axios defaults baseURL을 수정해주자 !

saga-index.j 안의 backUrl 수정 & package.json 배포모드 port 80으로 변경 ! 

저 ip는 ec2에서 생성한 backend 인스턴스의 퍼블릭 IPv4의 주소이다 !

 

 

(* 탄력적 IP를 고정 안 하게 되면 밑에 IP가 계속 바뀌게 될것인데 그걸 방지하기 위해서는 탄력적 IP 설정이 필요하다. 밑에서 설명 )

 

프로젝트의 front - package.json start port 번호 수정

 

aws git pull 받고 build 꼭 하기~!

aws server front에서 (backend 아님 )  헷갈리지 말자 ! 

---

중요 !

front는 build 과정이 반드시 필요하다 !

backend는 build 과정이 따로 필요 없다

 

 

 

 

가만보자 pm2로 front server를 켜야하는데 package.json에는 pm2를 명시해주지 않았다 !

이럴 경우에는 터미널을 통해 pm2 front를 실행 시킬 수 있다 !

sudo npx pm2 start npm -- start 

이제 ec2 front ip 주소로 접속해보면 front server로 접속이 될 것이다 !

 

 

 

 

중요한점 하나 더 !

앞에서 backend origin 설정 과정에서 빼먹은 부분이 있다!

지금은 아직 도메인을 구입하지 않았기 때문에 polodingo.com 과 같은 주소를 사용할 수 없다.

 

따라서 backend 에서는 front ip를, front 에서는 backend ip를 넣어주는 과정이 필요 하다!

 

 

main.ts  ( node 일경우 app.js)

backend쪽 cors 설정에 내 ec2의 front 주소를 추가해줬다! ( 커밋 & 푸시 , aws pull 받는 거 잊지 말기 )

 

하 또 이과정에서 고난과 역경을 겪었는데

 

프론트 pm2 까지 잘 실행 후 sudo npx pm2 list 를 실행하면 자꾸 status가 error 상태로 바뀌어져 있는것이었다

 

이걸 해결하려고 얼마나 진을 뺐는지 

 

해결법은 sudo git pull 받은 뒤 sudo npm i 로 다시 의존설을 설치 후 

(  필자는 aws 우분투에서도 sudo npm i pm2 설치또 함 )

기존에 pm2 kill로 다 죽인다음

재실행하니 됐다

 

백앤드쪽은 sudo git pull 받고 sudo npx pm2 reload all 만 해주면 된다 !

 

| Aws pull받을 시 front 와 backend의  차이점

front에서는 pull 받고 build 후 패키지 추가 내용이 있으면 npm install  없으면 sudo npx npm2 reload all 이지만.

 

백앤드는 build가 필요 없다 !! 바로 reload all 때리자 !  ( app.js OR main.ts 에서 항상 port 번호 보자 80으로 되어있는지 !)

 

이점 유의하자

 

 

 

 

 

 

 

---

 

 

 

뙇 !!

 

 

정상적으로 나온다 행복하다 기쁘다 경이롭다 신기하다 

 

 

아 또 ㅡㅡ

 

나는 카카오 지도 api를 사용한게있는데 카카오 역시 aws ip를 등록해줘야한다.. 진짜 마지막이다 니네 ..

링크 : developers.kakao.com/console

 

허용했다.

안되면 취업이고 뭐고 컴퓨터 끈다 이제. 

그러니까 되게 해라.

두 번 말 안 한 다 ^ ^ 

 

 

 

다음편은 도메인을 이용해서 cookie 공유를 해보자

지금은 서버가 2대가 cookie 공유가 안되는데

이처럼 setCookie로 쿠키를 저장하려고 하지만 느낌표 모양이 뜨면서 같은 사이트가 아니라고 경고가 뜬다.

 

해결법은 도메인을 구입하거나 서버를 1대를 둬서 공유하는건데 보통은 도메인을 구매해서 공유한다 !

보면 Request URL하고 response 주소가 다르다..

 

도매인 구입하러 가자!

 

예외)

| 탄력적 IP 고정하기

주의할점은 이게 스타벅스나 카페 같은 ip가 유동적으로 계속 변하는데 aws에서 계속 바꿔줘야한다.

예전에 이 아이피로도 뻘짓한 기억이 있는데 연결이 안됐던걸로 안다

 

 외부에서는 보통 핫스팟 사용을  추천한다.

 

탄력적 IP는 인스턴스끼리 매치시켜줘야 하고 이 설정을 잘못하면 비용이 발생할 수 있기 때문에

꼭 인스턴스끼리 매칭이켜줘야한다 아니면 비용이 지불된다 매칭시키면 지불이 안됨.

위 사진처럼 연결시켜주면 IP가 고정인된다 !

사용하지 않을 때는 연결 해제하면 된다 !

나중에 프리티어 기간이 끝났을 때 꼭 여기도 삭제해줘야 비용 지불이 안된다.

 

그럼 20000