Nodejs express로 에어비앤비 클론코딩 해보기 5.
도시별 숙소 보여주기
도시별 숙소 라우터
1 |
router.get('/city', async (req, res, next) => { |
숙소의 주소 중 도시 컬럼의 값을 비교하여 해당 도시의 숙소를 가져오는 방식이다.
1 |
router.get('/city', async (req, res, next) => { |
숙소의 주소 중 도시 컬럼의 값을 비교하여 해당 도시의 숙소를 가져오는 방식이다.
1 |
// 프론트 코드 |
회원 가입 페이지에서 가입 정보를 받아온 후 User모델에 새로운 데이터를 생성하여 회원을 생성한다.
가입 전 회원을 구분할 수 있는 이메일로 기존의 데이터와 일치한 정보가 있는지 확인을 하고 없을 때 생성하는 방식으로 진행했다…
회원 가입을 할 정보를 입력한다.
서버에서 처리 후 json형식으로 보낸 데이터에 따라 성공 실패 여부를 확인 한다.
입력한 데이터가 없는 회원이기 때문에 성공이라는 메시지를 띄웠고 성공했다는 것을 알수있다..✌✌
users 테이블을 확인하면 아까 입력한 데이터가 성공적으로 생성 된 것을 확인 할 수 있다. 👍
로컬 계정 회원 가입 처리 코드 작성은 간단하게 구현해서 어렵게 느껴지지는 않았지만… 페이지에서 데이터를 보낼 때 검사하는 방법이 너무 많고 어려운게 많아서 간단하게 검사 후 서버로
데이터를 보내는 방식으로 진행했다…
자바 스크립트를 이용해서 데이터를 검사해서 보내야 하는 방법에 치여서 조금 어려움을 느꼈다 자바스크립트의 공부가 필요하다는 것을 느끼는 과정 이였다.
혼자 하는 프로젝트라서 많은 것을 축소해서 진행 하려 하다 보니 회원 가입 과정이 너무 단순하다는 생각이 들었다. 많은 사이트들을 참고해서 비슷한 과정으로 만들고 싶었지만
본인 인증 부분을 제외 시킨 것이 조금 아쉽다.
본인 인증 구현도 공부해서 사용해봐야겠다.
Nodejs express로 에어비앤비 클론코딩 해보기 4.
https://hanjuren.github.io/2021/08/31/project/airbnb/Nodejs-express로-에어비앤비-클론코딩-해보기-4/
1 |
try { |
숙소 업로드 라우터는 숙소 정보를 담는 Host모델과 숙소의 사진을 담는 Image모델을 사용하여 업로드를 진행한다.
사진 파일들은 multer 모델을 사용하여 업로드했고 이미지의 파일 이름을 Image모델에 담아 주었다.
이미지 업로드는 이미지의 갯수 만큼 생성하도록 반복문을 사용하여 진행했는데 더 좋은 방법이 있을 수 도 있지만 간단하게 구현 했다.
Mysql 데이터베이스를 사용하며 Sequelize를 통해 데이터 관리를 했다. 시쿼라이즈를 통한 데이터베이스 사용을 위해 모델을 구축하는 과정을 기록합니다.
User 1 : N Host
User 1 : N Review
User 1 : N Reservation
User 1 : N Favorite
Host 1 : N Image
Host 1 : N Favorite
Host 1 : N Reservation
Host 1 : N Review
많은 모델을 설계하지는 않았지만 각각 필요한 모델이라고 생각하는 모델을 구축했다.
기본적으로 유저와 게시글을 기준하여 예약 기능에 필요한 모델 찜 모델, 리뷰 모델 정도로 구성했다.
자세한 코드는 깃헙에 올렸으니 기본적인 관계 설정과 모델 구조는 깃에서 확인하면 될 것 같다.
Model file :
github
Nodejs를 학습하고 학습한 내용을 바탕으로 무언가를 만들어봐야 겠다는 마음 하나로 무턱대고 혼자 진행했던 프로젝트입니다.
실제 서비스까지의 구현을 목표로 하지 않고 node.js와 express를 이용한 앱을 만들어보고자 진행했던 프로젝트라 많이 힘들었고 좋은 결과물이 나오지는 못했지만 처음으로 스스로 처음부터 만들어본 것 이기 때문에 이후 다른 어떤 프로젝트에서도 기본적인 개념을 알고 진행하는데 있어 충분한 학습 효과가 있었던 프로젝트 입니다.
Github : https://github.com/hanjuren/Node
node.js의 기본적인 학습만 진행하고 바로 작업을 진행하며 하나씩 붙여나가는 과정이 스스로 무언가를 만들어낸다는 것에 의미가 큰 과정이였습니다.
비록 작업을 계속 해나가며 프로젝트의 과정이 설계를 하지 않고 혼자 추가해보고 싶은 기능을 구현하다보니 두서 없는 과정으로 진행되었지만 기능 하나하나 스스로 만들며
막히는 부분을 해결해 나가는 과정이 의미있었습니다.
하지만 이 과정을 겪고서 작고 사소한 프로젝트라도 시작 전 설계의 중요성과 구조를 잡고 시작해야하는 중요성을 크게 느끼게 되었고 무턱대고 작업을 한다고 해서 그저 돌아가기만 하는 기능을 만드는 것이
무의미 하다는 것도 느끼게된 프로젝트 였습니다.
아쉬웠던 점은 클론코딩을 하다보니 스스로 생각해내는 기능은 적고 클론코딩의 대상이 된 웹의 기능을 어떤식으로 구현해볼지에 대해 고민을 하던 시간이 대부분이였던 것에 아쉬움을 느꼈습니다.
스스로 만들어나가는 과정은 뿌듯했지만 새로운 것을 만들어 낸다는 느낌보다는 기능을 가능한 수준에서 모방하기만 한다는 느낌이 컷던 만큼 이후 프로젝트에서는 하나의 기능을 만들더라도
많은 고민과 보다 좋은 기능을 만들 수 있는 측면까지 고민하며 작업해야겠다라고 생각하게 되었습니다.
또한 이 프로젝트의 결과물에 대해 다시 한번 글을 작성하며 이런 부분은 지금보니 이렇게 개선하면 되겠다는 부분을 생각을 많이 하게되었던 프로젝트 입니다.
이 프로젝트에서 했던 내용을 기록하며 다시 공부한다는 마음으로 진행 부분을 기록하려 합니다.
인스턴스 접속을 끊고 나면 mysql 서버가 자동으로 종료되어 실행이 되지 않는 문제가 있었다. 프로젝트 내에서 TypeORM을 통해 mysql과 연결을 해야 하는데 서버가 꺼져있으니 연결이 되지 않아 프로젝트가 실행되지 않는 문제였다.
이 문제는 인스턴스에 연결 시 자동으로 mysql server가 자동으로 실행 되도록 설정을 해주는 방법으로 해결을 했다.
1 |
systemctl |
해당 명령어를 통해 서버 부팅 시 실행되는 프로그램들의 목록을 확인 할 수 있다. 이 목록에 mysqld를 추가해 주면 된다.
1 |
sudo systemctl enable mysqld |
다시 목록을 확인해보면 프로그램이 등록된것을 확인 할 수 있다.
프리티어로 사용중인 EC2 t2.micro에 mysql을 설치하여 구동하니 mysql이 메모리를 상당히 잡아 먹는 다는 것을 알게되었다… 자동으로 swap 영역을 지정해주지 않는 다는 것… 또한 메모리가 1GB인데 모두 사용하지 않는다는 것 이문제를 해결해보고자 swqp구성을 직접 해주었다.
1 |
dd if=/dev/zero of=/swapfile bs=1M count=1024 |
위의 명령어들은 swqp영역을 직접 할당해주는 명령어들이다. free -m 명령어를 실행해보면 swap 영역 할당 전에는 swqp영역의 메모리가 0인데 할당 시 지정 한 만큼 늘어난 것을 확인할 수 있다.
배포 단계시 무한 Pendding 상태가 지속되는 경우가 발생했다.. 그래서 또 무한 구글링…
찾아낸 해결법은 그냥 인스턴스에서 codedeploy-agent를 재실행 하라고 한다. 물론 이방법으로 해결이 안되면 다른 방법을 찾아야 겠지만 이방법으로 해결을 했다.
먼저 codedeploy-agent를 중지해준다.
1 |
sudo systemctl stop codedeploy-agent |
이후 다시 시작해주면 된다. 이렇게 간단?
1 |
sudo systemctl start codedeploy-agent |
그리고나서 다시 실행 상태를 확인해주면 끝!
이전의 과정들을 거친이후 실제로 배포가 되는지 테스트를 진행해보도록하자.
테스트 과정은 비교적 간단하다. 로컬 환경에서 작업한 코드를 깃 레파지토리에 올리기만 하면 배포가 실행될 것이다.
작업코드를 깃 레파지토리에 올리기전 실행이 되는지 테스트를 진행해준다. 코드의 내용은 간단히 인사말을 출력해주는 구성으로 진행했다.
실행결과 정삭적으로 화면에 글이 보여진다. 실행이 되는것을 확인했으니 메인 브랜치로 push를 해주면 우리가 작성한 workflow가 실행될것이다.
push를 해주고 레파지토리로 들어가 action탭으로 가면 커밋메시지의 이름으로 실행중인 워크플로우를 확인 할 수 있다.
workflow를 통해 S3에 프로젝트를 업로드하고 Codedeploy가 배포를 정상적으로 실행하는지 확인을 해보자.
새로운 배포 목록이 보이고 진행중이라는 상태를 확인할 수 있다. 해당 내용을 클릭하여 과정을 상세하게 볼 수 있으니 확인해보면 좋다. 또한 배포 실패시 에러또한 상세정보에서 확인이 가능하니 참고하면 좋을 것 같다.
상세정보 화면이다. 모든 과정이 성공적으로 완료 되었고 이제 Ec2에 내용이 있는지 실행중인지 확인 후 접속을 하면 마무리 된다.ㅠㅠ
프로젝트 디렉토리가 생겼고 내부 파일도 정상적으로 생성이 되었다. pm2 list명령어는 pm2로 실행중인 프로젝트의 목록을 확인 할 수 있는 명령어이다. 정상적으로 실행중이라는 상태가 확인이 돠었으니 접속을 하면 된다.
IPv4 퍼블릭 IP를 통해 접속을 하면 된다. 프로젝트에서 설정한 포트를추가하여 접속을 한면 정상적으로 배포가 된것을 확인 할 수 있다.
일단 처음 배포를 하고 실행해보니 정상적인 상태인 것을 확인 했다. 이제 코드 내용을 수정하여 다시 배포를 진행해서 수정사항이 반영이 되는지 테스트를 진행해보자.
과정은 위에서 진행한 내용과 똑같으니 수정 내용과 결과를 통해 확인하면 될 것 같다.
코드를 수정하고 다시 메인 브랜치로 push를 해준다. 이후 잠시 기다렸다가 다시 접속을 하여 수정사항이 반영되었는지 확인을 해보자.
수정사항까지 정상적으로 반영이 되었고 자동배포를 할 수 있게 되었다. 모든 과정을 마치고 테스트를 진행하며 겪은 수많은 실패들에 대해 해결했던 방안을 따로 정리하도록 하겠다.
모든 것이 처음부터 잘될 수는 없으니 차근차근 진행해보는 것이 정답인듯 하다. 👍
AWS의 설정을 모두 마치고 git에서 git action을 통해 자동배포를 진행해보도록 한다.
자동 배포를 진행하기위해 진행해야 하는 과정은 다음과 같다.
3가지의 과정을 하나씩 진행해보자.