293일차 AWS - 장고(Django), 리액트(React) 함께 배포

오늘부터 대략 6일 동안은 장고 + 리액트로 웹을 배포하면서 느낀점이나 진행 과정들을 적어 놓을 예정이다. 현재 결과물은 완성한 상태지만, 다음은 협업 프로젝트를 해볼 예정이라서 이에 대한 아이디어 구상과 인원 모집 때문에 시간이 없을 것 같다.

< 장고(Django) + 리액트(React) 배포 성공 >

대략 12시간을 헤딩해서 나에게 맞는 리액트 배포 방법을 찾아냈다.
아무리 구글링을해도 내가 원하는게 안나와서 개인적으로 생각해봤을 때, 가능할 것 같은 방법들을 전부 검색해서 자료들을 수집해서 방법을 찾아냈다 휴.. 다행히 하루만에 알아내서 만족스럽다.. 정답을 알려줄 사람이 없으니 언제 해결될지 몰라서 막막했는데ㅠㅠ 다행이다.

< 시도했던 방법들 >

1. EC2 서버 하나 파서 Dockerfile로 리액트 이미지 만든다음에 stack에 올려서 nginx와 함께 배포
-> Dockerfile로 여러 방법을 시도해서 이미지를 올리는 것에 성공하고나서 깨달았다. 리액트에서 npm run build는 장고의 python manage.py runserver와 같이 개발서버를 제공하는게 아니라, 빌드 파일을 만들어준다는 것을.. 그래서 npm run start로 서버를 올렸지만, 이는 내가 원하는 Django와 React를 함께 배포하는 방식이 아니여서 좀 더 나에게 맞는 방법을 모색하기로 결정

2. 기존의 Django 프로젝트에서 React 파일들을 함께 업로드
-> 기존의 Django에서 리액트 npm run build를 통해 생성된 파일들을 static 폴더와 templates 폴더에 분배한 다음에 경로가 필요한 파일을 검색해서 찾아낸 다음에 경로를 /static/을 포함해서 수정했다. 그리고 배포를 했더니 내가 원하는 방법과 딱 맞아떨어졌다!
처음에는 분명 자바스크립트로 이루어졌으니까 잘 동작될거라고 생각했지만 막상 보니 빈 화면만나와서 어디가 문제인건지 생각하면서 크롬 개발자모드로 뜯어봤더니 정적파일들의 경로를 찾지 못하는 문제였다.

< 느낀점 정리 >

Django를 Dockerfile로 이미지 올리는 것과 마찬가지로 React도 똑같이 하면 될거라고 생각했다. 하지만, 내가 리액트에 대한 숙련도가 부족했기 때문에 간과했던 게 있다. React와 Django의 개발 서버는 다르다고. 너무 1차원적으로 생각해서 실수했던 게, React와 Django를 각각의 이미지로 만들어서 stack으로 함께 올리면 결국 내부 개발서버가 2개가 돌아가게 된다. 물론 이렇게해도 아무 문제가 없지만, 나는 장고와 리액트를 하나의 서버로 올리고 싶었다. 각각의 서버가 아니라.
애초에, 리액트에 대해 숙련도가 쌓이고 리액트를 이해했다면 이런 실수는 안했을 것 같다. npm run start만 해보고 장고와 똑같이 생각했지, npm run build를 안해봤었다..;; 이번에 배포를 위해서 구글링을 하다가 npm run build가 자주 나와서 직접 해보고난다음에, 아... 그냥 이 파일들을 Django 프로젝트에 넣으면 되겠네.. 라고 생각했다.
덕분에 어제 오늘 시간 날려먹었다. EC2 서버 새로하나 판다고.. 그래도 다시 서버를 개발하니까 기억도 좀 보완되고 나름 유익했다. 특히나.. ./ssh 폴더에서 authorized_keys 파일을 실수로 삭제했는데, 이거때매 ssh로 ubuntu에 접속이 안됐다. 알아보니까 authorized_keys파일에 들어있는게 바로... 키파일에 관한 정보다..
AWS EC2에서 직접 인스턴스 도스창에 접속한다음에 authorized_keys파일을 만들고 내용물에다가 *.pem 키파일을 해독한 내용들을 직접 하나하나 적어서 저장해봤지만 역시나 안된다... 여기서 시간을 좀 잡아먹고 멘탈나갔다가, 그냥 인스턴스 지우고 다시 새로 파서 환경설정 맞춰주니까 30분정도 걸렸고 해결했다...
처음부터 이렇게 하지 않았던 이유가, 혹시라도 만약에 내가 나중에 지금 이 테스트서버가 아니라 진짜 중요한 서버에서 저 파일을 삭제했을 때, 해결할 수 있는 방법을 알고있으려고 했다.
아주 개떡같지만 그냥 백업 잘 해두고, 나중에 authorized_keys파일 실수로 삭제하게 되면, 백업해둔 authorized_keys파일을 복사해서 붙여놔줘야겠다..;;

< 사용했던 명령어 간략 모음 >

1. pip install nodeenv ( 이거 안했더니 npx create-react-app {앱이름} 명령어가 안먹힌다. )

2. pip install whitenoise ( 예전에 static 때문에 한번 썼었던 건데, 자세한건 기억이 안난다. 차후에 알아봐야할 것 같아서 시간되면 찾아볼 리스트에 적어놨다. )

3. npm install -g yarn ( yarn {스크립트이름} 이 명령어를 통해서 자바스크립트 패키지 매니징을 도와준다. 현재는 npm도 많이 발전해서 yarn과 npm이 거의 차이가 안난다고 하니까 나중에 npm으로도 시도해봐야겠다. )

4. npm install react-router-dom ( 라우터 기능을 도와주는 라이브러리 )

5. npm install axios ( API 통신을 도와주는 라이브러리 )

6. npm install firebase ( 파이어베이스 연동을 위한 라이브러리 )

7. npm -i {폰트어썸} ( 폰트어썸 아이콘을 사용할 수 있는 방법 )

# 장고 settings.py MIDDLEWARE = [ "django.middleware.security.SecurityMiddleware", "whitenoise.middleware.WhiteNoiseMiddleware", "django.contrib.sessions.middleware.SessionMiddleware", "django.middleware.common.CommonMiddleware", "django.middleware.csrf.CsrfViewMiddleware", "django.contrib.auth.middleware.AuthenticationMiddleware", "django.contrib.messages.middleware.MessageMiddleware", "django.middleware.clickjacking.XFrameOptionsMiddleware", ] # 아래 주석처리 된 코드도 하나의 방법이지만, 내 서버와는 맞지 않음. 참고용 # TEMPLATES = [ # { # "BACKEND": "django.template.backends.django.DjangoTemplates", ## Tell Django where to find Reacts index.html file # "DIRS": [os.path.join(BASE_DIR, "build")], # "APP_DIRS": True, # "OPTIONS": { # "context_processors": [ # "django.template.context_processors.debug", # "django.template.context_processors.request", # "django.contrib.auth.context_processors.auth", # "django.contrib.messages.context_processors.messages", # ], # }, # }, # ] # STATICFILES_DIRS = [ ## Tell Django where to look for React's static files (css, js) #os.path.join(BASE_DIR, "build/static"), # ] # STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage" STATICFILES_DIRS = [ BASE_DIR / "static", ] # 리액트 package.json "scripts": { "relocate": "react-scripts build && rm -rf ../backend/build && mv -f build ../backend" } # 장고 ../test/view.py def test_view(request): return render(request, "index.html") # static파일들 모아놓고 whitenoise 라이브러리 잘 적용되는지 확인 # 실제 배포할 때는 기존 방법대로 함. 아래는 그냥 참고용. python manage.py collectstatic python manage.py runserver --nostatic