풀스택 앱을 배포하는 과정을 연습해보기 위해 진행했는데, 아무리 찾아도 제대로 정리해놓은 글이 없어서.. 내가 작성하기로 했다.
React 와 Node.js의 Express 프레임워크를 이용해 만든 프론트, 백엔드를 각각 다른 툴로 배포하여 연결할 것이다.
프론트엔드는 Netlify, 백엔드 배포는 AWS의 Elastic Beanstalk를 이용한다.
DB는 몽고DB의 Atlas를 이용하였다.
만고의! 삽질 끝에 확실한 방법을 찾은 것이니 그대로 따라하기만 하면 된다.. ㅠㅠ
* AWS 프리티어(무료)에 가입했다는 전제로 진행한다 *
개발 환경
Frontend : React
Backend : Node.js Express
DB : MongoDB Atlas
배포 환경
Frontend : Netlify
Backend : Elastic Beanstalk
순서 :
① MongoDB Atlas 설정하기 => ② 백엔드 파일 압축하기 => ③ AWS Elastic Beanstalk 에 백엔드 업로드 => ④ 프론트엔드 파일만 Github에 업로드하기 => ⑤ Netlify에 React 업로드 => ⑥ 500원짜리, 또는 무료 도메인 구입하기 => ⑦ AWS의 무료 서비스를 이용하여 SSL 인증서 받기 => ⑧ 프론트엔드와 백엔드 연결하기 위해 프론트 파일 수정하기 => ⑨ 끝!
(모르겠으면 일단 따라하고 이해해도 됨!)
① MongoDB Atlas 설정하기
1. MongoDB Atlas 설정하기
우선 ' 모든 아이피에서 이 데이터베이스에 접근하는것을 허가해 주세요~ ' 라는 설정을 해 주어야 한다. 내 몽고디비의 아틀라스에 들어가서, Network Access의 [+ADD IP ADRESS] 버튼을 클릭한다.
2. 아래와 같은 창이 뜨면, [ALLOW ACCESS FROM ANYWHERE]를 클릭하고 [Confirm] 버튼을 클릭한다.
3. IP 목록에 아래와 같이 0.0.0.0 / 0 이라는 주소가 추가되었으면 성공한 것이다.
② 백엔드 파일 압축하기
4. 이제 백엔드 파일을 압축해준다. 압축해주기 전에, server의 index.js 파일에 PORT 설정이 아래와 같이 되어있는지 잘 확인한다.
const port = process.env.PORT || 8080;
app.listen(port, () => {
console.log(`Server Listening on ${port}`);
});
server, package.json, package-lock.json 파일을 압축해준다.
* 이때, 백엔드의 package.json에 nodemon이 Dependencies 또는 devDependencies에 등록되어 있는지 잘 확인한다. 만일 되어있지 않다면 npm install nodemon을 통해 디펜던시에 등록해준다.
③ AWS Elastic Beanstalk 에 백엔드 업로드
5. Elastic Beanstalk 서비스를 검색해 클릭한다.
6. Create Application을 클릭해 새로운 어플리케이션을 만들어준다.
7. 어플리케이션 정보를 설정해준다. 애플리케이션 이름은 마음대로 입력하고, 플랫폼에서 Node.js를 클릭한 다음 [플랫폼 브랜치] 의 버전을 잘 선택한다. 자신이 사용한 Node.js의 버전에 맞게 골라주면 된다.
8. 애플리케이션 코드에서 [코드 업로드] 를 선택한다.
9. 소스코드 오리진에서 [파일 선택] 을 눌러, 4번 단계에서 압축해준 백엔드 파일을 업로드한다. 초록색 체크마커와 함께 '파일이 업로드됨' 이라는 문구가 뜰 때까지 대기한다.
10. 설정이 잘 되었는지 보기 위해, [추가 옵션 구성] 버튼을 클릭한다.
11. [용량] 부분의 EC2 인스턴스 유형이 t2.micro 로 되어있다면 잘 된것이다. 해당 인스턴스가 무료 티어에서 사용되는 인스턴스이다.
12. 무료 티어가 적용된것을 확인했으니, 이제 서버를 생성해준다. 스크롤을 밑으로 내려 [앱 생성] 버튼을 클릭한다. 오른쪽 화면이 뜨게 될 텐데, 그동안 Netlify를 이용해 프론트엔드를 배포해주자.
④ 프론트엔드 파일만 Github에 업로드하기
13. 먼저, Github에 프론트엔드 폴더를 업로드한다. ( 아래 글을 보지 않아도 업로드할 줄 안다면, 바로 14 번으로 넘어간다. )
★Github 업로드 순서
ㄴ1. client폴더에서 쉬프트+우클릭으로 [파워쉘 열기]
ㄴ2. 아래 명령어 입력하기
git config --global user.email "이메일"
git config --global user.name "닉네임"
ㄴ3. VsCode로 프로젝트를 열고, [새 터미널] 을 열어 cd client 명령을 통해 client 폴더로 이동하기
ㄴ4. 아래 명령어 순차적으로 입력하기
git init
git add *
git commit -m 'client 커밋'
git branch -M main
ㄴ5. https://github.com/ 에 접속해 로그인하고, 새로운 레포지토리 만들기
ㄴ6. 주소 복사하기
ㄴ7. 다시 프로젝트로 돌아와 VsCode 터미널에 아래 명령어 입력하기
git push -u 복사한주소 main
ㄴ8. 깃허브에 프론트엔드 push 완료!
⑤ Netlify에 React 업로드
14. 깃허브에 Client 폴더를 push 하였으니, Netlify에 접속해준다. https://www.netlify.com/
로그인을 하고, [Sites] 에서 [Add new site] -> [Import an existing project] 를 클릭한다.
15. 깃허브를 사용할 것이므로, 깃허브 버튼을 클릭한다.
16. 깃허브 로그인을 진행해주고, 방금 전 프론트엔드 파일들을 업로드했던 레포지토리를 선택해준다.
17. 설정을 건드리지 않고 Deploy site 버튼을 클릭한다.
18. 프론트 엔드 배포에서 에러를 확인할 수 있을 것이다. 일부러 초반에 에러를 보기 위해 둔 것이니 괜찮다. Treating warnings as errors because process.env.CI = true. 는 Netlify 사이트에서 CI=false 라는 코드를 추가하라는 에러이다. 시키는대로 수정해보자.
[Deploy setting] 버튼을 클릭한다.
Build setting에서 [Edit settings]를 클릭하고,
Build command에 [CI=false yarn build] 또는, [CI=false npm run build] 를 입력한 뒤 [save] 버튼을 누른다.
19. 다시 Deploy로 돌아와, 프론트엔드의 배포를 재시도해본다.
20. 프론트엔드의 배포가 잘 실행되었다. Netlify에서 제공해주는 호스팅 주소에 들어가서 확인해보자.
프론트엔드의 배포가 잘 된 것을 볼 수 있다. 그런데 상세페이지를 보기 위해 영화 하나를 클릭해보면..
당연히 안된다. 아직 백엔드와 프론트엔드를 연결해주지 않았거니와, 프론트 배포에 필요한 설정도 덜했기 때문이다. 게다가 http와 https의 차이도 있다. 아래 사진에서 왼쪽은 AWS에서 진행한 백엔드 링크이고, 오른쪽은 Netlify의 프론트 링크이다. Netlify는 Http 연결이 되어 있는데, 백엔드는 그렇지 않은 것을 볼 수 있다. http와 https의 통신은 허용되지 않는다.
따라서 백엔드의 http를 SSL인증서 발급을 통해 https로 업그레이드 해 주어야 한다. SSL 인증서는 그냥 http 뒤에 s 하나를 달기 위한 자격증이라고 보면 된다. 이 자격증을 받기 위해서는, 도메인, 즉 나만의 웹주소를 하나 생성해야 한다. 원래는 무료로 해보려 했는데 무료 사이트인 Freenom이 먹통이어서 가비아의 500원짜리 도메인을 하나 구입하기로 했다.
⑥ 500원짜리, 또는 무료 도메인 구입하기
21. 도메인, 즉 나만의 웹 주소를 얻어와보자.
무료 - Freenom
550원짜리 도메인 - 가비아
라는 방법이 있는데, 이 글을 작성하기 위해 진행했을 때는 ㅠㅜ Freenom 사이트가 먹통이었다.
https://www.freenom.com/en/index.html?lang=en 는 자주 먹통이 된다..
Freenom - A Name for Everyone
Sorry, is not available. IMPORTANT NOTICE: Because of technical issues the Freenom application for new registrations is temporarily out-of-order. Please accept our apologies for the inconvenience. We are working on a solution and hope to resume operations
www.freenom.com
따라서 가비아라는, 유료 사이트를 이용할 것이다. 여기서 1년에 부가세 포함 550원짜리 도메인(웹주소)를 하나 얻을 수 있다. 1년이 지나면 왕창 과금되기 때문에 꼭 그 전에 해제해 주어야 한다.
사용할 주소명을 입력하고, 제일 싼것을 골라 구입한다.
⑦ AWS의 무료 서비스를 이용하여 SSL 인증서 받기
22. 도메인을 구입하였으니, AWS의 Route 53으로 이동한다.
23. [호스팅 영역]을 클릭하고, [호스팅 영역 생성]을 한다.
24. 도메인 이름에 '구입한 도메인' 을 입력한다. [퍼블릭 호스팅 영역]을 선택한 후, [호스팅 영역 생성] 을 클릭해 호스팅 영역을 생성한다.
25. 레코드를 생성해 주어야 한다. 이동된 창에서 바로 [레코드 생성]을 클릭한다.
26. 아래 내용을 모두 입력한다. [레코드 이름] 에는 www, [트래픽 라우팅 대상]에는 [Elastic Beanstalk] 을 선택한다.
리전의 경우 내가 Beanstalk을 생성한 리전을 고르면, 내가 업로드한 백엔드가 자동으로 뜨게 된다
레코드 생성을 누르고 나면 여러 주소가 있는 창으로 이동되게 된다. 해당 창을 끄지 말고 켜둔다.
27. 가비아 > My가비아 > 도메인 통합 관리툴 에서 구매한 도메인을 클릭하고, 네임서버를 변경해 주어야 한다.
이동된 창의 유형 - NS 라고 되어있는 곳의 값/트래픽 라우팅 대상에 있는 4개의 도메인을 가비아의 네임서버에 등록해준다. 끝의 . 은 빼고 넣어야 한다.
28. Elastic Beanstalk 은 기본적으로 s가 없는, http로 설정된다. 이제 이 주소를 http에서 https로 만들기 위해, s, 즉 SSL 인증서를 받아와 보자. AWS에서 [Certificate Manager]로 이동한다.
29. [인증서 요청]을 클릭하고, [퍼블릭 인증서 요청] 을 누른 뒤 [다음] 으로 넘어간다.
30. 도메인 이름에 '구입한도메인' 을 입력하고, [ 이 인증서에 다른 이름 추가 ] 를 두 번 눌러 다음 내용들을 입력한다.
*.구입한도메인
www.구입한도메인
따라서 총 입력해 주어야 하는 도메인 이름은 아래의 세개이다.
구입한도메인 //ex) movie.app
*.구입한도메인 //ex) *.movie.app
www.구입한도메인 //ex) www.movie.app
나머지 선택지는 [DNS검증-권장] 과 [RSA 2048] 을 선택하고 인증서를 요청한다.
31. [Route53에서 레코드 생성]을 클릭하고 진행한다. 자동으로 뜨는 창들이 있을텐데, 확인들을 눌러 넘어가면 된다.
32. 잠시 검증 대기중 상태에 걸린다. [Route 53에서 레코드 생성] 버튼을 눌러 과정을 완료했다면 10분가량 후에 발급된 상태로 바뀔 것이다.
33. 다시 백엔드를 파일 형태로 업로드했던 Elastic Beanstalk으로 돌아와서, '로드 밸런서' 를 편집해 주어야 한다. 로드 밸런서에서 지금까지 우리가 진행한 SSL 인증서를 넣어줄 수 있다. 지금은 '로드 밸런서를 포함하지 않습니다.' 라고 되어있다.
이를 활성화 해 주기 위해 [구성] -> [용량] 의 [편집] 을 클릭한다.
34. [Auto Scaling 그룹] 에서 [로드 밸런싱 수행] 을 선택하고, [온디맨드 인스턴스]를 고른 뒤 [적용] 을 클릭한다.
35. 서비스 메시지가 뜨면 [확인] 을 클릭한다.
36. 이제 [구성] 의 [로드 밸런서] 가 편집 가능으로 바뀌었을 것이다. 로드 밸런서의 [편집] 버튼을 클릭한다.
37. [리스너] 에서 [리스너 추가] 를 클릭한다.
38. HTTPS 통신은 433번 포트를 이용해 한다. 따라서,
1. [리스너 포트] 에 '433' 을,
2. [리스너 프로토콜] 에는 'HTTPS' 를,
3. [인스턴스 포트] 에는 '443' 을 입력한다.
4. [인스턴스 프로토콜] 또한 'HTTPS' 로 선택한다.
5. SSL 인증서의 드롭박스를 누르면 우리가 진행했던 과정을 통해 자동으로 발급된 SSL 인증서 목록이 뜰 것이다.
6. 해당 인증서를 선택하고 [추가] 버튼을 눌러, 적용한다.
⑧ 프론트엔드와 백엔드 연결하기 위해 프론트 파일 수정하기
39. 이제 거의 다 끝났다! 대망의 " 프론트엔드와 백엔드 연결하기 " 단계를 진행할 차례이다. 처음 할 때는 404 에러와 CORS의 벽을 마주치며 엄청난 삽질을 해야 하는데 그건 제가 대신 했습니다 ..........
둘을 연결하려면 '프론트엔드의 파일들을 수정' 해 주어야 하는데, 앞서 우리는 Netlify 에 깃헙을 연동하여 프론트를 배포하였다. 따라서 파일을 수정한 후 깃허브에 푸쉬해 주기만 하면 나머지는 Netlify가 알아서 해 줄것이다.
client 폴더에서, 아래 파일들을 편집해 준다.
40.
setupProxy.js
- target을 http://localhost:8080 으로 바꾸어준다.
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/api",
createProxyMiddleware({
target: "http://localhost:8080",
changeOrigin: true,
})
);
};
41.
package.json
- proxy와 hompage항목을 추가하고, 배포한 백엔드 주소를 넣어준다. 이때 넣어주어야 하는 백엔드 주소는 Elastic Beanstalk에서 확인할 수 있는 주소이다. http://아래빨간박스주소/ 의 형태로 넣어주어야 한다.
"proxy": "http://빨간박스주소/",
"homepage": "http://빨간박스주소/",
42.
_redirects
client 폴더의 /public 폴더에 , 확장자 없이 _redirects 라는 파일을 생성한 후 아래 내용을 작성한다.
/api/* 배포한백엔드주소/api/:splat 200
/* /index.html 200
43.
모든 과정이 완료되었다. 새 터미널을 열고, 바뀐 내용들을 깃허브에 올려주기 위해 add, commit, push를 진행한다.
git add *
git commit -m '커밋 메세지'
git push
배포 끝!!!
모든 배포 단계가 완료되었으므로, 무사히 동작하는지만 확인하면 된다!
배포된 사이트가 무사히 동작하는지 확인해보자! Netlify의 아래 부분이 무료 호스팅을 받은 주소이다. 클릭해서 접속해본다.
시범삼아 회원가입을 진행해 보았다.
가입한 아이디로 로그인을 시도하면...
무사히 로그인 되었다.
아무 영화나 골라 Favorite 버튼을 클릭하고, 나의 좋아요 창에 들어가보자..
몽고 db에 모든 기능이 정상적으로 저장되어 실행되고 있는 것을 알 수 있다. 길고 길었던 AWS 배포 끝! ㅠㅠ~~~~~~~~~~
댓글