인프런 커뮤니티 질문&답변

안녕하세요! 제로초님
[리뉴얼] React로 NodeBird SNS 만들기 강의의
섹션 6. AWS에 배포하기: 프론트 서버 배포하기 강의를 진행 중인 수강생 입니다!

우분투 프론트 서버는 구동이 되지만 프론트 IP 주소 사이트가 페이지 응답이 되지 않아 질문 올립니다!
'로컬 리소스를 로드할 수 없습니다' 에러가 콘솔에 출력 되었지만 새로 고침을 하면서 없어졌습니다!
Not allowed to load local resource: chrome-error://chromewebdata/#buttons


사전에 아래 사항을 정확히 확인 후 질문을 올립니다!
1. EC2 프론트 서버와 백엔드 인스턴스 상태는 잘 실행 중이며,
프론트 퍼블릭 IPv4가 틀리지 않았는지 확인하였습니다.

2. 로컬 프론트 경로에서 npm run build를 하였습니다.
-> 저의 경우 우분투 프론트 서버에서 npm run build를 하면 메모리가 부족해 멈춤 현상이 나타납니다.
-> 그래서 .next를 Git LFS로 관리하였고, 로컬 프론트에서 빌드에 성공하였습니다.


3. 윈도우 서비스에서 MySQL 서비스를 실행한 상태입니다.
4. 우분투 백엔드 서버 실행에 성공한 상태입니다!
5. 로컬 프론트 경로에서 node_module과 .next를 삭제했다가 npm i와 build를 통해 다시 만들었습니다.
6. about.js는 잠시 바탕 화면으로 옮겼습니다.

우분투 프론트 서버에 아래 명령어를 순서대로 입력하였습니다.
(우분투 프론트 서버의 경우 sudo를 붙이지 않아도 되었습니다.)
sudo git pull
>>> 메모리 부족 문제로 npm run build는 로컬 프론트에서 진행하고 아래 작업을 마저 진행했습니다. <<<
sudo npx pm2 reload all
npx pm2 start npm -- start
sudo npx pm2 monit
우분투 프론트 서버가 실행된 상태입니다.
우분투 백엔드 서버에 아래 명령어를 순서대로 입력하였습니다.
sudo git pull
sudo npx pm2 reload all
sudo npx pm2 monit
우분투 백엔드 서버가 실행된 상태입니다.back/app.js
실제 프론트 서버 주소의 CORS 요청을 허용하였습니다.
cors 요청 주소들을 변수로 빼서 작성하였습니다.

// 로컬 프론트 서버, 노드버드 닷컴, 실제 프론트 서버 URL IP 주소 요청만 허용
const corsOkUrl = ['http://localhost:3000', 'nodebird.com', 'http://52.79.86.100' ];
. . .
// 미들웨어 연결
app.use(cors({
  /* 특정 url에서 요청했을 때만 cors 허용 */
  origin: corsOkUrl,

  /* 사용자 인증이 필요한 쿠키 전달 허용 */
  credentials: true,
}));
. . .
// http://54.180.201.249 : 실제 백엔드 서버 URL IP 주소인 80번 포트로 서버 실행
app.listen(80, () => {
  console.log('서버 실행 중!');
});

back/config/config.js
실제 백엔드 주소가 들어가는 부분 코드에 모두 'backUrl'을 변수로 넣어주었습니다.

// 실제 백엔드 서버 URL IP 주소 내보내기
export const backUrl = 'http://54.180.201.249'; 

front와 back의 package.json
이 문제를 해결하기 위해 먼저 노드버드 커뮤니티를 살펴보았습니다.
https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49016&category=questionDetail&tab=community&q=164898

저와 비슷하게 프론트 서버 구동에 성공하였으나 페이지 응답이 되지 않는 작성자 분이 계셨습니다.
글과 똑같이 우분투 프론트 서버 터미널에서 ctrl+c로 sudo npx pm2 monit을 끄고
pm2 list를 입력하면 status가 errored 임을 확인할 수 있었습니다.

보안 그룹에서 http 80번 포트가 열려있음에도 status는 errored 였습니다.

Not allowed to load local resource 에러 해결,
우분투 프론트 서버 페이지 응답 등의 키워드로 검색하였으나
이미지 외부 경로 지정하기 관련 글들만 있어 방법이 맞는지 의심스럽습니다...

프론트 서버 구동 시 어떻게 하면 페이지 응답이 안되는 문제를 해결할 수 있을까요?
질문 글이 많이 김에도 끝까지 읽어주셔서 감사합니다
제로초님 강의 항상 잘 보고 있습니다!