node js 를 활용해서 트위터 비스무리하게 만들어서 배포를 해봤다.
그동안은 만들기만 해봤지 직접 이렇게 배포해본건 처음이었는데 생각보다 만만치 않았다...
프론트 배포
우선 프론트는 리액트로 짰고 정적으로 배포하기 위해 netlify를 이용했다.
netlify로 배포하는건 생각보다 매우 간단했다.
New site from Git 클릭
그럼 이렇게 깃 레포지토리와 연동할 수 있는 화면이 나온다.
깃 아이디 인증하면 내 레포지토리 목록이 쭉 나오는데 그 중에 배포하고자하는 레포지토리를 선택하면 된다. (미리 레포지토리를 생성해둬야한다.)
이후 설정은 Build command와 퍼블리시 할 디렉터리를 정해주면 된다.
git에 build를 하고 push 했었는데 저걸 입력하라는걸 보면 netlify에서 따로 빌드를 진행하나보다
이제 Deploy site를 누르면 배포가 진행된다.
빌드 로그도 이렇게 확인할 수 있다. 만약 코드에 수정사항이 생긴다면 아까 연동한 깃 레포지토리에다가 git push 만 해주면 알아서 자동으로 재빌드가 진행된다. (진짜 편하다....)
서버 배포
서버 배포에서 애를 많이 먹었다..
platform.sh로 배포를 하려다가 좀 윈도우에 친화적이지 않아서 걸리는 부분이 많았다. 중간 정도 진행했을때 platform.sh는 한달간만 무료로 지원한다고 하여 다른 방법을 찾아봐야했다.
그렇게 찾은 두번째 방법 AWS에 배포하기!
AWS에 노드js를 배포하려면 크게 두가지를 해야했다.
1. EC2 인스턴스 생성
2. 생성한 인스턴스에 nodejs 코드 올리기
EC2 인스턴스 만드는거야 뭐,, 쉽게쉽게 진행하고 우선 EC2에 접속을 해야하는데 나같은 경우에는 putty를 썼다.
puttyGen 을 통해서 pem 파일을 ppk 파일로 변환한 뒤 putty로 EC2에 접속할때 키로 등록했다. Load 버튼 누르고 pem키 선택한 뒤에 Save private key하면 끝!
EC2에 접속하고 나서는 nvm 설치하고 nvm을 통해서 node lts 버전을 깔았다. lts 버전 깔고나서 내 로컬 node 버전이랑 비교해봤는데 똑같았다 ㅋㅋㅋㅋㅋㅋ 편-안
node js 코드를 EC2에다가 올리는건 FileZilla 툴을 써서 올렸다. sftp 프로토콜을 활용하는 툴이고 EC2가 기본적으로 22번 포트를 열고있어서 따로 추가적인 설정 없이 간단하게 업로드가 가능했다. 업로드 하고 나서는 바로 npm start로 서버를 구동했다.
하지만....
netlify는 https고 EC2는 http 였기 때문에 mixed content 문제가 발생했다... 이전에 진행했던 프로젝트도 이런 문제를 겪었었다.. 그때는 S3에 올린 정적인 프론트 코드와 EC2에 올린 서버코드가 통신해야하는데 S3는 https 프로토콜을 사용하다보니 mixed content 문제가 발생했던 것이었다. 저때는 학교에서 지원금이 나와서 돈 드는건 신경안쓰다보니 ssl을 로드밸런서에 붙여서 해결했는데 이건 무료로 할 방법을 찾아야했다.
결론은 Heroku
heroku 배포는 생각보다 어려웠다. EC2 처럼 인스턴스를 만들어서 접속하여 조작하는게 아니고 netlify 처럼 git을 써서 heroku에 업로드를 하면 heroku에서 알아서 빌드를 진행하고 배포해주는 방식이다.
먼저 heroku에 로그인하고 Create new app을 통해 새로 앱을 하나 생성한다.
간단한 설정들을 진행하고 나면 가이드가 나온다.
방법은 3가지가 제공되는데 netlify처럼 깃허브와 연동하는 방법도 있는 듯 하다. 내가 진행한 방법은 첫번째 방법 Heroku Git으로 배포하는 것이다. 위의 가이드라인을 정리하면
1. cmd 열고 heroku login 입력 -> 로그인 진행
2. 배포하고자 하는 프로젝트로 이동
3. git init 을 통해 git 파일 생성. 이미 있다면 .git 파일 지우고 다시 git init을 하도록 한다.
4. heroku git:remote -a [app 이름] 을 입력하여 해당 git을 방금 홈페이지에서 만든 app 과 연동한다. (예제라고 너무 아무거나 막쳤나 .. jdbfbl... ㅋㅋㅋㅋ ㅠㅠ)
5. Procfile을 하나 만든다. Procfile은 heroku에 push 했을때 만약 Procfile이 있다면 heroku는 저 파일안에 있는 명령어를 실행해서 빌드를 진행한다. 없다면 디폴드 명령어가 있긴하다. 자신의 빌드 명령어를 저기에 입력해준다.
6. 그후 add commit push 한다. push 할때에는 위의 가이드라인에서도 보이듯 git push heroku ~ 라고 해야한다.
7. 여기서 만약 에러난다면 node_modules 를 삭제하고 다시 진행해보자. heroku는 자체적으로 npm install을 진행하기 때문에 삭제하고 push 하는것이 에러가 안날수도 있다.
8. 성공적으로 빌드가 되었다면 heroku logs 를 통해 로그를 확인할 수 있다. 물론 웹페이지에서도 확인 가능하다!
9. cors 문제가 발생한다면 이는 코드레벨에서 해결하도록 하자! (서버코드 손보기)
배포 성공!!