웹팩 번들을 장고에 서빙하기

날짜:
1. 3000번 포트에서 8000번 포트로 프록시 설정하기
    3000번 포트는 리액트로 프로젝트를 생성했을때, yarn start를 통해서 전달되는 서버의 포트.
    우리는 이것을 장고 백엔드 서버로 올려놔야 하기때문에 프록시서버를 통해서 :3000 으로 들어오는 요청을
    :8000번으로 돌려줄 필요가 있다.

    .package.json 파일에 "proxy" : "http://localhost:8000",
    프록시 설정을 하게되면 fetch와 같이 api요청을 시도할 때 일단 리액트 앱 포트 3000번에서 
    요청을 하게되고 경로를 찾지 못할 경우 프록시로 설정한 경로로 가서 api 경로를 찾게된다.
    장고로 설정한 백엔드 서버가 8000번 포트로 돌고 있기 때문에 이와같은 설정을 해 준다.

2. django-cors-header 설치
    장고는 :8000을 사용하기때문에, 프록시 설정을 통해서 :3000의 요청이 들어오게되면,
    자신의 서비스가 아니기때문에 요청을 차단하게 된다.
    이렇게되면 우리가 원하는 서비스를 실행할 수 없기떄문에, 이 라이브러리를 설치하는데,
    이는 간단히 말해서 장고가 다른 주소에서의 요청이 와도 거절하지 않도록 만든다
    
    #> pip3 install django-cors-headers

3. 'corsheaders' INSTALLED_APPS에 추가하기

4. 'corsheaders.middleware.CorsMiddleware' MIDDLEWARE에 추가
    CommonMiddleware 이전에 추가를 시켜줘야, 요청이 들어왔을 때 cors가 먼저 반응을 하고 요청을
    거절하지 않는다

5. CORS_ORIGIN_ALLOW_ALL = True 추가

6. STATICFILES_DIRS 의 경로에 웹팩이 번들한 경로를 추가
    str(os.path.join(ROOT_DIR,'frontend','build','static'))

7. 프로젝트 디렉터리에  views.py 생성
from django.views.generic import View
from django.http import HttpResponse
from django.conf import settings
import os
class ReactAppView(View):
    def get(self,request):
        try:
            with open(os.path.join(str(settings.ROOT_DIR),'frontend','build','index.html')) as file:
                return HttpResponse(file.read())
        except:
            return HttpResponse(
                """
                index.html not found! build react app
                """,
                status=501,
            )

8. 프로젝트 urls에 프로젝트 views 추가
from project import views
url(r'^',views.ReactAppView.as_view()),

댓글

댓글 쓰기