장고 서버와 리액트 프런트를 연동하자(django-cors-header)

안녕하세요.

장고와 리액트를 연동하도록 하겠습니다.

장고 프레임워크를 백엔드로 사용하고 리액트를 프런트엔드 사용하고 있습니다.

장고 서버에서는 rest api를 만들고 리액트에서는 이를 호출합니다.

장고 프레임워크에서는 뷰를 만들지 않고 모든 뷰는 리액트에서 담당하게 되는 것이죠. 리액트(뷰 단) -> 장고(서버 단)로  API 호출을 합니다. 

로컬 주소는 localhost 또는 도커를 사용한다면 서버는 0.0.0.0이 될 것입니다. 포트는 리액트는 3000번, 장고는 8000번을 사용하게 됩니다. 개발할 때는 프런트-서버 모두 구동한 상태로 개발을 하지만 실서버에서 사용할 8000번 포트를 사용하게 됩니다.

우리가 해야 될 것은 1) 개발에 필요한 리액트에서 장고로 API 호출을 할 수 있게끔 만들고, 2) 실제 상용에서는 8000번(장고 서버)만 구동해도 프런트엔드가 나오게끔 만들어야 됩니다.

그럼 작업을 시작하겠습니다.

 

1.

python 패키지 중 django-cors-headers 패키지를 설치해주세요.

django는 자신 이외 다른 도메인이 리소스에 접근하는 것을 허락하지 않습니다. 이를 컨트롤하기 위해서 패키지를 설치하는 겁니다.

pip install django-cors-headers

 

2.

문서의 따라 base.py로 들어가셔서 앱과 미들웨어에 django-cors-headers를 추가해주세요.

## base.py

# app에 추가
INSTALLED_APPS  = [
	...
	' corsheaders ' ,
	...
]

# 미들웨어에 추가
MIDDLEWARE  = [
	...
	' corsheaders.middleware.CorsMiddleware ' ,
	...
]

# 맨 아래 위치에 추가
CORS_ORIGIN_ALLOW_ALL = True

위의 내용들을 설정을 위해서 추가를 해주시면 됩니다 :)

 

3.

다음으로 우리는 8000번(장고)만 구동해도 프런트가 보여야 됩니다. 프런트단에서 빌드를 하게 되면 빌드 파일이 만들어집니다. 빌드 파일 안에는 statice파일이 만들어지는데 이를 장고가 가리키도록 해야 됩니다. 장고가 가리키는 방법은 간단합니다.

base.py 안에 STATICFILE_DIRS = [ ... ] 라인이 있습니다. 여기에 빌드된 프런트 파일을 담아주시면 됩니다.

예시를 들자면 다음과 같습니다.

STATICFILES_DIRS = [
    str(APPS_DIR.path("static")),	# 기존 존재
    str(ROOT_DIR.path('front', 'build', 'static')),	# 추가
]

기존에는 장고에서 생성된 static파일이 있었습니다. 하지만 우리의 프런트를 사용하기 위해서 빌드된 static 위치를 위와 같이 추가로 작성을 해주시면 됩니다.

 

4. 

root URL에 url을 추가를 해주세요.

path("", views.ReactAppView.as_view()),

우리는 프런트에서 만든 경로들을 프런트로 보내주기 위해서 가장 아래쪽 위치 작성을 해주세요.

서버에서 만든 api들은 방금 작성한 코드 위에 위치할 것이고 맨 아래 작성한다면 장고에 없는(매칭이 안 되는) url들은 이곳을 경유하여 view를 호출할 것입니다.

 

5.

위에서 호출할 수 있게끔 뷰 파일을 만들어주세요.

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),
                                    'front',
                                    'build',
                                    'index.html')) as file:
                return HttpResponse(file.read())

        except:
            return HttpResponse(status=501,)

작성을 하시면 장고 서버만 구동해도 프런트 쪽으로 호출이 됩니다. (프런트를 빌드 후에 front/build/ 위치에 파일이 있는지 확인을 하고 실행을 시켜주세요.)

 

6.

마지막으로 리액트 package.json 파일에 proxy를 추가해주세요.

"proxy": "http://0.0.0.0:8000",

프런트에서도 3000번에 url이 없는 경우에 8000번으로 연결이 됩니다. (저는 도커로 구동하여 0.0.0.0입니다. 디폴트 구동 시 localhost로 되어 있습니다.)

이를 설정을 해주시면 로컬에서 프런트-서버 api 호출이 가능하겠습니다.

 

이상 없이 서버 구동이 되었으며 8000번 호출 시 프런트엔드 뷰가 보이는 모습을 확인하였습니다.

도움이 되셨으면 좋겠습니다.

감사합니다 ^^

 

 

참고자료

* django-cors-header 패키지

https://github.com/adamchainz/django-cors-headers

 

* Cross-origin Resouce Sharing 설명

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS