🚀Make Migrations

Make Migrations: 태양계이주센터

지구를 떠나 태양계의 다른 행성으로 이주한다는 컨셉의 커뮤니티.
딥페이크를 통한 움직이는 사진을 넣은 시민증을 발급해주고, 이주한 행성에 아파트처럼 층과 호수를 골라 나만의 공간을 가지고 꾸밀 수 있도록 했으며, 동네 커뮤니티로서의 역할을 할 수 있도록 행성별 게시판을 제공한다.

프로젝트에 대한 나의 역할 → “보러가기👀”

🔗시연영상 (피드백 반영 전)
🔗시연영상 (피드백 반영 후)

프로젝트 기간

• 프로젝트 진행기간 : 2022-07-07 ~ 2022-08-16
• 사용자 피드백 기간 : 2022.08.08 ~ 2022.08.11 (사용자 피드백 내용 )
  (웹페이지에 방문한 사용자에게 설문조사를 통해 받은 피드백을 토대로 새로운 기능 추가 및 버그수정)

주요 기능

• JWT를 이용한 로그인
• 딥페이크를 통한 움직이는 프로필 사진 생성
  • 이미지 저장 - AWS S3 활용
• 게시판 및 방명록 기능
  • 게시판 및 방명록 CRUD
  • 게시글 좋아요, 검색, 페이지네이션
  • 댓글 및 대댓글 CRUD
• 유저 간 좋아요, 팔로우
• 바닐라 JS로 구현한 방 꾸미기 기능
  • 상점 기능 - coin을 이용해 가구를 구매

프로젝트 기록

🔗Team Github - backend
🔗Team Github - frontend
🔗Starting Assignment (tistory)

팀 구성 및 역할

스킬 및 사용툴

프로젝트에 대한 나의 역할 및 경험

나의 역할

백엔드

• 백엔드 배포
  • docker 와 AWS(EC2, ACM, Route53) 을 이용하여 백엔드 배포
• 회원가입/로그인 페이지의 백엔드
  • JWT를 이용한 로그인 기능

프론트엔드

• 프론트엔드 배포
  • AWS(S3, Cloudfront)을 이용하여 프론트엔드 배포
  • GitHub의 Git action을 이용한 CICD
• 회원가입/로그인 페이지의 프론트엔드
• 행성 선택 페이지의 프론트엔드

🛠사용자의 피드백과 대응

• 이미지를 포함한 게시글이 포스트가 안되는 현상 (해결과정)
• 사용자 편의성 증진
  • 회원가입시 중복된 닉네임, 아이디 알럿으로 표시
  • 사이트 소개 및 설명이 부족 → 사이트, 메뉴 및 행성 선택시 설명문구 추가
  • index.html로 돌아왔을 때 로그인을 다시 해야하는 경우 방지 (해결과정)
• XSS 공격으로 인한 게시판 마비 (해결과정)
  • 사용자에게 입력받는 텍스트 중 부등호 기호를 html 특수문자 코드로 변환

블로그에 남겼던 사용자 피드백 반영

1. index.html로 돌아왔을 때 로그인을 다시해야하는 경우 방지

로그인 후에 토큰 유효시간이 남아있더라도 기본 주소로 들어갈 경우 index.html로 이동되어서 로그인을 다시 해야만 메인 페이지로 접근 가능한 경우가 있어 불편하다는 사용자 피드백이 있었다. 그래서 index.html 페이지에 접근할 경우 사용자가 발급받은 토큰의 시간과 현재시간을 비교해서 토큰 유효시간이 남아있을 경우 메인 페이지로 바로 이동시키도록 수정하였다.

코드 보기👀

2. XSS 공격 차단

XSS 공격으로 인해서 전체게시판이 마비된 상태라는 제보를 받아서 우선 문제가 되는 게시글을 삭제처리했다. 공격을 빠르게 막기 위해서 입력된 텍스트 중에 부등호 기호 < >를 html 특수문자 코드< >로 변환하는 방법을 사용하기로 했다. 이 방법은 유저가 입력한 내용을 훼손하지 않으면서 스크립트의 동작도 막을 수 있다는 장점이 있다.

  def validate(self, data):
  content_data = data.get('content')
  if '<' in data.get('content'):
      content_data = content_data.replace('<', '&lt;')
      if '>' in data.get('content'):
          data['content'] = content_data.replace('>', '&gt;')             
  return data

🧨TroubleShooting

1. python 버전에 따른 호환 문제

① python_alpine 버전을 사용하면서 패키지 관리자를 apt-get 사용
알파인 리눅스는 초경량화된 배포판이므로 docker에서 자주 사용되는 리눅스 이미지인데, 도커와 이미지 버전에 대해서 잘 모르는 상태로 도커를 공부하던 참고영상에서 사용한 버전을 그대로 사용했다. 알파인 버전에서는 패키지 관리자로 apk를 사용한다는 사실을 모르고 apt-get을 사용했고 계속 apt-get을 찾을 수 없다는 에러가 발생해서 구글링을 통해 버전에 대한 정보를 얻고 다시 공부하여 수정하게 되었다.

② python_alpine 버전에서는 pytorch, tensorflow 사용불가하여 python_buster 버전으로 수정
위에서 알파인 버전으로 Dockerfile 을 작성하여 1차 배포를 마치고 머신러닝을 추가하여 2차 배포를 앞두고 테스트를 했다. 그런데 pythorh 와 tensorflow 가 들어가면 인식을 못하고 패키지를 설치하지 못하는 에러가 발생했다. 알파인 버전에서는 두 패키지를 설치하는 데 필수요소가 들어있지 않아서 설치 불가능 한 것으로 예상을 하고, buster 버전으로 바꾸어주니 에러없이 설치되었다.

2. pytorch, tensorflow run 명령어로 설치

docker container를 올릴 때, Requirements.txt 로 한번에 설치하려고 하면 pytorch, tensorflow 가 설치되지 않고 MemoryError 가 발생했다. 이전에 pycharm 에 tensorflow 를 설치할 때 유사한 에러가 났던 것이 기억나서, 이 패키지를 설치할 때는 캐시를 사용하지 않도록 하는 –no-cache-dir 옵션을 추가해주었다. 또한 두 패키지가 용량이 크기때문에 Requirements.txt 설치 단계가 오래걸려서 Dockerfile 에서 설치하도록 따로 설정해주었다.

# Dockerfile
RUN pip install --no-cache-dir tensorflow==2.9.0 
RUN pip install --no-cache-dir torch==1.11.0+cpu torchvision==0.12.0+cpu torchaudio==0.11.0 --extra-index-url https://download.pytorch.org/whl/cpu

3. bucket 사용시 권한문제 발생

기능을 구현할 때 팀원들이 맡은 역할에 따라 각자의 bucket 계정을 사용하고 있어서 권한 에러가 발생했다. 그래서 EC2 에서 bucket 권한 설정을 해주었는데도 불구하고 계속 bucket을 사용하는 곳에서 여전히 같은 에러가 발생했다. 왜 권한 에러가 발생하는지 모르겠던 와중 docker container 안에서 권한을 인식 못하고 있다는 것을 깨달았다.

awscli 가 docker 내부에 설치안되어 있었던 문제
① dockerfile 에 RUN pip install awscli 명령어 추가 - docker 내부에 aswcli 설치 ② docker-compose.yml 에서 web container 의 volume 설정에 aws 권한인증 저장 폴더 위치를 추가 /home/ubuntu/.aws/:/root/.aws/:ro

4. 프론트 CICD 한 내용이 바로 반영이 안되는 문제

프론트 팀 깃허브에서 master에 merge를 하게되면 git actions 을 통해서 자동으로 S3에 그 내용이 갱신되도록 해놓았다. 그런데 S3에 내용이 갱신되었더라도 누군가는 반영이 안된 웹사이트를 보고 있거나 새로고침을 하면 오히려 이전의 내용으로 돌아가는 등의 문제가 있었다. 프론트 배포를 할 때 S3를 CloudFront와 연결하여 배포하였기 때문에 merge를 할 때마다 CloudFront 무효화 메뉴에서 /* 경로의 파일을 모두 무효화하도록 했다. 그 결과 무효화가 끝나고 새로고침을 해주면 정상적으로 최신버전으로 출력되었다.

5. 이미지를 포함한 게시글이 포스트되지 않는 문제

① 어떤 상황에서 이미지가 업로드 되지 않는지 확인
어떤 사용자에게서 이미지를 포함해서 게시글 저장하면 알럿도 없이 무반응으로 게시글이 업로드 되지 않아서 답답했다는 제보가 들어왔다. 다른 사용자들은 이미지를 잘 업로드 하고 있어서 올리려던 이미지를 받아서 직접 테스트를 해보았다. 테스트 결과 이미지 용량에 따라 업로드 여부가 달라졌다.

② nginx 설정에서 파일 업로드 용량 늘려주기
구글링을 통해 Nginx의 파일 업로드 용량이 1MB로 기본 설정되어있다는 것을 알게되어서 5MB로 수정했다.

# nginx.conf  
client_max_body_size 5M;  
client_body_buffer_size 5M;  

[result] 5MB 이상 이미지 업로드시 CORS error, 2.5MB 이상 5MB 이하의 이미지 500 error, 2.5MB 이하 이미지 200ok

③ django 설정에서 파일 업로드 용량 늘려주기
nginx 설정을 수정했는데도 에러가 계속 되어서 docker container 중 nginx, web log를 봤지만 이상이 없었다. 그래서 django log를 보는 법을 찾아서 보았더니, 여기서 에러가 나고 있었다. stackoverflow 에서 나와 유사한 에러를 보이는 사례를 찾아서 django에서도 기본적으로 파일 업로드 용량을 2.5MB로 제한하고 있다는 것을 알았다. django settings.py 에서는 포맷이 byte 기준이어서 5MB를 5242880byte로 바꿔서 추가해주었다.

# settings.py  
FILE_UPLOAD_MAX_MEMORY_SIZE = 5242880

블로그에 남겼던 기록

회고

이 프로젝트에서 내가 맡은 역할은 배포였는데, 처음부터 끝까지 나혼자만 배포를 맡게되어서 좀 부담스러운 느낌이 있었다. 저번 프로젝트에서 배포와 관련해서 애로사항이 많아서 아예 프로젝트 초반부터 배포를 따로 준비하기로 한 건데, 이번에 원격강의로 도커를 배우게 되면서 도커로 배포를 하기로 결정하면서 더 팀원 중에서 도커를 아는 사람이 아무도 없어서 더 부담스러워졌다. 그래도 프로젝트 기간동안 따로 구글링과 유투브로 공부를 하고, 튜터님이 진행하신 도커 배포 특강을 통해 배포를 성공할 수 있었다. 오롯이 혼자 맡아서 성공하게 되서 여태껏 했던 프로젝트 중에 성취감이 가장 컸던 것 같다.

이번 프로젝트는 내일배움캠프에서 하는 마지막 프로젝트로 일주일 간의 사용자 피드백 반영기간이 있어서 구글폼으로 사용자의 다양한 요구와 시각을 받아 볼 수 있어서 정말 좋았다. 사용자 피드백을 읽고 깨달은 바가 많았다. 팀 코우미에서는 다수의 대중에게 친화적인 서비스보다는 컨셉이 있는 커뮤니티를 즐기는 소수의 사용자에게 익숙한 서비스를 제공하다보니 일반 사용자에게는 불친절한 면이 많았던 것 같다. 사이트를 처음 이용하는 사람들을 위해 사이트 이용 설명과 마이룸 꾸미기 도움말을 추가하고, 사용자가 눌러야하는 버튼에는 설명을 추가로 달고, 은유적인 표현을 쓴 곳은 직관적인 단어를 추가하여 사용자 편의성을 높였다. 그리고 최대한 이용하는 사람이 불편하지 않도록 UI부분도 일부 수정하였고, alert 창은 최대한 모달로 바꾸어 사이트를 이용하는 동안 일일이 alert창을 닫아야 하는 일도 줄였다.

이전에는 프로젝트들에서는 기획한 기능을 구현하는데 초점을 맞췄었는데, 이번에 사용자 피드백을 받아보니 사이트 이용시에 보안적인 문제와 사용자 편의 문제가 얼마나 중요한지 알게 된 것 같다. 앞으로 다른 프로젝트를 하게 되면 좀 더 기획단계에서부터 사용자를 고려하게될 것 같다.