파일 구조
한꺼번에 관리하기 위해 일단 한 컨테이너에 backend, frontend 폴더를 만들었다.
github 연결
이제 github을 연결할 차례.
마찬가지로 repository는 두개를 만들어주었다. backend와 frontend.
각각의 폴더에 연결해줄 생각이다.
git init위 명령어로 각각의 폴더에 .git을 만들어 초기화해준다.
git remote add origin (github repository 주소)미리 만들어둔 github repository와 연결해준다.
git remote -v잘 연결됐는 지 확인해본다.
github 연결 성공!
NodeJs 초기 세팅
Backend부터 시작.
NodeJs로 구성할 생각이라 애초에 구름 container도 NodeJs가 심어진 걸로 만들었다.
보이다시피 잘 설치되어 있다.
npm init 명령어로 간단하게 만들어줬다.
Express도 설치해주자
npm install --save expressexpress는 전역으로 설치해주자
초기 파일을 다음과 같이 index.js에 만들고 실행해봤다.
const express = require('express');
const app = express();
app.get('/', function(req, res){
res.send('hello NodeJs');
})
app.listen(80, () => console.log('80번 포트 대기'));아차
여긴 사지방이다.
3000번 포트로 들어가면 연결이 안된다. 아마 이 브라우저에서 막아놓은 거 같다. 방화벽 문제일 수도 있다.
아니지!
난 구름IDE를 쓰고 있다는 걸 깜빡했다...이걸 깜빡하다니 반성해야겠다
구름IDE에서 실행할 주소를 정할 수 있도록 방법을 마련해놨을 거 같았다.
찾아봐야지.
바로 찾을 수 있었다.
https://velog.io/@eldpswp99/%EA%B5%AC%EB%A6%84-ide-React-localhost-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-%EC%82%AC%EC%A7%80%EB%B0%A9
컨테이너 설정에 이렇게 URL 설정이 있었다. 난 그대로 쓰려고 한다.
원리는 아직 정확히 모르겠다.
브라우저에서 localhost로 띄우는 거를 이렇게 URL로 만들어줘서 접속할 수 있게 해주는 거 같은데, 그럼 매번 배포해주는 건가? 아직 잘 모르겠다.
우선 정상적으로 돌아가는 걸 확인했다.
Post 포트 정리
Nodejs를 띄우는 건 성공했다. 근데 80번 포트에 서버를 띄우는 게 맞나ㅋㅋㅋ
테스트 용도였고, 정리해야 한다.
그 전에, 아직 백엔드 밖에 없으니 프론트도 만들어주고 포트 정리를 하는 게 맞을 거 같다.
프론트
NEXT.JS를 사용하려고 한다.
SSR을 지원하기도 하고,
트렌드에 뒤떨어지는 거 같아서 배워보고 싶은 마음도 있다.
자세한 설치 방법은 여길 참고하면 될 것 같다.
https://nextjs.org/docs/getting-started/installation
설치 방법대로 설치 한 후 npm run dev로 실행해봤다.
하지만 역시나 제대로 실행되지 않았다.
터미널 상으로 실행되는 듯 보였지만
무한 로딩 중이었다.
문제 원인 파악
실행은 되는데 브라우저에 안뜨는 걸 보아하니 왠지 구름IDE 문제인 거 같아서
우선 서버에 코드를 올려서 돌려보고 돌아가는 지를 확인해야겠다는 생각이 들었다.
그래서 github에 front코드만 push 하고 ec2 인스턴스에 접속해 front 코드만 받아서 실행해보았다.
next라는 command가 없다고 오류를 내뱉는다.
npm install을 안해줬으니 node_modules가 있을리 없지...
npm install을 해줬더니 
정상적으로 동작한다!!
하지만 접속은 여전히 안된다...
아 잠깐
AWS EC2 인스턴스의 방화벽은 풀어줬었나?
3000포트를 쓴 적이 없는데...
그렇네. 안 풀어줬네.
보안규칙에 3000포트를 풀어주니 바로 해결됐다.
(사진 추가)
그럼 NEXTJS는 문제가 없고 구름IDE쪽에서의 문제!
문제 해결
구름 IDE 문제가 맞는데 어떻게 해결할까...
그러던 와중 3000포트는 구름 IDE의 기본 포트로 설정되어 있다는 걸 확인했다.
아
난 그럼 지금까지 aaa.com:3000:3000을 치고 있었던 것이다. 그냥 aaa.com:3000만 치면 되는데..
결국 성공!!
포트 정리부터는 다음 게시글에 연재할게요~
