🤬 나오기 힘들었던 502의 지옥

AWS의 Elastic Beanstalk를 통하여 내가 만든 웹를 배포할 때 502에러를 계속해서 만났었다..

일단 부딪혀보자는 생각으로 EB에서 애플리케이션을 만들어 배포했던 것인데 클라우드 서비스를 한번도 접해보지 못했던 나로서는 대체 어디서 왜 막힌 것인지 답답했고 이것을 해결하지 못하면 잠을 절대 못 잘 거 같아서 반드시 해결하고 싶었다

이를 해결하고자 구글에서 다양한 글을 검색하였지만 한글로 검색해서는 도저히 방법을 찾을 수 없었고
우리들의 친구 스택오버플로우에서 여러글을 검색한 결과 몇가지 해결방법을 찾을 수 있었다.

💩 이 글은 초보개발자가 온갖 똥을 싸며 찾은 몇 가지 방법이므로 절대 정답은 아닙니다.

당시 보았던 댓글을 정리하여 노션에 적어두었던 것을 토대로 글을 작성하겠습니다.
이 방법과 반대로 해도 작동이 잘 되는 분도 많으실겁니다.
참고로 번역은 제 멋대로 한 것이므로 틀릴 수도 있..

다만 이 글은 저처럼 이것저것 해봐도 도저히 안되는 분들이 한 번쯤 시도해보셨으면 좋겠으면 해서 쓰게되었습니다.

---

🤦🏻 몇 가지 해결 방법

1. 포트를 변수로 작성할 때 port(소문자)가 아닌 PORT(대문자)로 작성할 것!

Don't make a new variable in elastic beanstalk called "port"! Amazon already sets the environment variable for you...but they set the variable "PORT", not "port". So in your app.js code change "process.env.port" to "process.env.PORT" and things will work properly..

NodeJs로 서버 파일을 만들 때 server.js 혹은 index.js로 만들텐데 그 안에 포트 변수를 만들어 몇번 포트를 쓸지 지정할텐데
이때 const port가 아닌 const PORT로 하라고 합니다.

이유는 우리가 Elastic Beanstalk에서 애플리케이션을 만들고 환경을 생성하게 될텐데 이때 AWS에서 환경변수로 포트를 같이 만들어줍니다 이때 PORT 대문자로 만들어 주기 때문에 우리는 코드 안에서

const PORT = process.env.PORT || 8080;

이렇게 써주면 돼요.

2. 로컬 환경에서 'npm start'를 했을 때 정상적으로 작동하는지 체크할 것

Except they won't. For a lot of you, you're still getting a 502 error. But that isn't because of the port; your application simply can't start, with or without AWS. The issue is that AWS is trying to run a command like "npm start" but it isnt working. On your local machine navigate to the project directory in your terminal and try "npm start". If that fails, then you've found the problem. Here's how you fix it.

다른 거 다 똑바로 한 거 같은데 잘 안된다?
그럼 AWS말고 로컬 폴더로 돌아가서 npm start를 한 번 해봅시다.

AWS에서 여러분이 업로드하고 배포한 애플리케이션을 실행할 때 npm start로 명령을 하기 때문에 이거 체크하는 게 중요하다고 합니다.

저 같은 경우는 클라이언트와 서버를 한번에 작동시키고자 package.json의 script에서 dev를 따로 만들어서 nodemon으로 서버 돌리고 클라이언트도 함께 실행시키느라 정작 start가 제대로 작성되었는지 체크를 하지 못했었습니다.

  "scripts": {
    "start": "node server.js",
    "backend": "nodemon server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
  },

저는 이런식으로 하곤 하는데 당시 서버파일을 처음에 index.js로 만들어서 "node index.js"로 입력되어 있었습니다..
가끔 이런 멍청한 오타에서 한참을 고생하죠..

아무튼 이렇게 npm start가 제대로 써져있었는지와 npm start로 실행했을 때 로컬에서 오류없이 잘 실행되는지 찾아보면 됩니다.

실행했는데 잘 안된다면 AWS에서 생긴 에러가 아닌 로컬에서 생긴 문제니깐 거기서 해결하면 됩니다.

3. 파일명은 되도록 server.js로 작성하여 저장할 것

npm start, by default, looks for a file called "server.js", not "app.js" like he told you to name your file. There are two solutions. The first is to change the settings in your project to make it look for "app.js" instead. The second solution is to simply change "app.js" file name to "server.js". I recommend the second option.

NodeJs로 서버환경을 만들 때 보통 index.js, app.js, server.js 이렇게 이름을 짓더라고요.
저도 유튜브를 통해 여러 강의를 들을 때 보면 매번 달라서 어떻게 지을지 헷갈리는 경우가 있었습니다.

근데 npm start로 실행을 하게되면 디폴트 값으로 가장 먼저 server.js 파일을 찾는다고 합니다.

그래서 여기서 두가지 해결방법이 있는데
app.js로 이름을 짓는 대신에 프로젝트 세팅을 바꿔주는 방법과
그냥 처음부터 server.js라는 이름으로 파일을 만드는 방법입니다.

저 댓글을 쓰신 분은 두번째 방법을 추천한다고 하는데 app.js로 하고 프로젝트 설정 바꿔주고 뭐 하는 것보다
그냥 server.js로 만들면 편하니깐 저는 이 방법 쓰고 있습니다.

4. .ebignore 파일을 만들어준다.

이거는 그냥 단순합니다 .gitignore파일과 같은 역할이라고 생각하면 되시는데 로컬 폴더에서 .ebignore 파일을 만드시면 deploy될 때 여기에 적힌 파일들을 무시하고 업로드를 해줍니다.

저는 클라이언트로 주로 리액트를 쓰기 때문에 여기에

.git
.gitignore 
/src 
/public 
/node_modules

이것들을 적어서 디플로이 명령어를 입력했을 때 저기 있는 것들을 무시하도록 했습니다.

이 방법은 처음 aws cli를 설치하여 터미널에서 eb deploy로 처음 디플로이를 시도했을 때 겪으실 수도 있는 상황이라고 생각되어 같이 쓰게 되었습니다.

🤷🏻 마무리

클라우드 서비스는 정말 봐도봐도 헷갈리는 게 많고 한글로 된 글이 많지 않아 해결방법 찾는 게 쉽지 않았었는데
그래도 계속 찾고 해결되는 것을 보니깐 또 쾌감이 있더라고요.

저 처럼 처음 AWS를 접했을 때 502 Bad Gateway를 만나는 분들이 이 글을 통해 조금이라도 도움이 됐으면..합니다