반응형
[Django][React] Django와 React 설정하기
이 글은 http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ 를 번역한 글입니다.
- 사용 언어
- Django 1.11.22
- Python 2.7
- ReactJS ^16.8.6
1. Virtualenv 및 Django 설치
backend폴더 생성 후 virtualenv 설치 및 활성화$ mkdir backend $ cd backend $ virtualenv venv $ source venv/bin/activate- virtualenv에서 django 설치 한 후
backend프로젝트 생성(venv) $ pip install django (venv) $ django-admin startproject Dreact - 프로젝트 폴더로 이동 후 마이그레이션
(venv) $ cd Dreact (venv) $ ./manage.py migrate
2. ReactJS , Webpack 설치
- create-react-app 설치
$ sudo npm install -g create-react-app 또는 $ yarn add create-react-app frontend이름을 갖는 React 프로젝트 생성 한 후eject실행.$ create-react-app frontend $ cd frontend $ npm run eject 또는 yarn eject- run하여 React가 정상적으로 실행되는지 확인.
$ npm run start 또는 $ yarn run start
- 만약
Cannot find module '@babel/plugin-transform-react-jsx'~에러가 발생할 경우 아래 명령어를 실행해서node_modules삭제 후 재 설치$ rm -rf node_modules && rm yarn.lock && yarn
- 현재까지 전체 폴더 구조
├── ProjectFolder
│ ├── backend
│ │ ├── venv
│ │ ├── Dreact
│ ├── frontend
│ │ ├── config
│ │ ├── src
3. Django와 ReactJS 연동
Django webpack_loader설치
$ pip install django-webpack-loaderDjango 프로젝트 폴더 내
settings.py파일 수정.
- INSTALLED_APPS에 webpack_loader추가
- WEBPACK_LOADER추가
- TEMPLATES에 DIRS수정
- STATICFILES_DIRS추가
INSTALLED_APPS = [ # ... 'webpack_loader', ] WEBPACK_LOADER = { 'DEFAULT': { 'BUNDLE_DIR_NAME': 'bundles/', 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.dev.json'), } } TEMPLATES = [ { # ... 'DIRS': [os.path.join(BASE_DIR, "templates"), ], # ... }, ] STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'assets'), )
- 테스트를 위한
index.html템플릿 파일 추가
- Dreact(프로젝트폴더)/templates/index.html
{% load render_bundle from webpack_loader %} <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Dreact</title> </head> <body> <div id="root"> </div> {% render_bundle 'main' %} </body> </html>
urls.py파일 수정
- 방금 만든 index.html파일 접속을 위한 URL생성
- Dreact(프로젝트폴더)/Dreact/urls.py
from django.conf.urls import url from django.contrib import admin from django.views.generic import TemplateView urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^', TemplateView.as_view(template_name="index.html")), ]
- webpack-builder-tracker 설치
$ npm install webpack-bundle-tracker --save-dev - react 프로젝트내
config/paths.js파일 수정
- frontend/config/paths.js
- 하단에
statsRoot추가module.exports = { // ... statsRoot: resolveApp('../backend/Dreact'), };
webpack.config.js파일 수정
- frontend/config/webpack.config.js
- publicPath와 publicUrl 값 변경
const publicPath = isEnvProduction ? "/static/bundles/" : 'http://localhost:3000/'; const publicUrl = 'http://localhost:3000/'; - webpack-bundle-tracker 모듈 추가
- module.exports의 entry와 plugins에 추가
- output의 filename과 chunkFilename에
static/제거 - moule.rules.oneOf의 options.name에
static/제거const BundleTracker = require('webpack-bundle-tracker'); module.exports = { entry: [ // ... require.resolve('webpack-dev-server/client') + '?http://localhost:3000', require.resolve('webpack/hot/dev-server'), ], plugins: [ // ... new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}), ], output: [ // .. filename: isEnvProduction ? 'js/[name].[contenthash:8].js' : isEnvDevelopment && 'js/bundle.js', chunkFilename: isEnvProduction ? 'js/[name].[contenthash:8].chunk.js' : isEnvDevelopment && 'js/[name].chunk.js', module: [ rules: [ { oneOf: [ // ... { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: require.resolve('url-loader'), options: { limit: 10000, name: 'media/[name].[hash:8].[ext]', }, }, // ... { loader: require.resolve('file-loader'), // Exclude `js` files to keep "css" loader working as it injects // its runtime that would otherwise be processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/], options: { name: 'media/[name].[hash:8].[ext]', }, }, ] } ] ] }
webpackDevServer.config.js파일을 열어서 수정
- frontend/config/webpackDevServer.config.js
- module.exports의 host요소와 동등한 위치에 추가
headers: { 'Access-Control-Allow-Origin': '*' },
1) development(dev) 모드로 React 실행
webpack.config.js파일 수정
- frontend/config/webpack.config.js
- plugins부분에 BundleTracker 추가
plugins: [ // ... new BundleTracker({ path: paths.statsRoot, filename: "webpack-stats.dev.json" }) ]
- reactjs 실행 후 django 실행
# frontend 폴더에서 reactjs 실행 $ yarn start # backend 폴더에서 django 실행 $ python manage.py runserver
2) Production(prod) 모드로 실행
- Django의 settings.py와 동일한 위치에
production_settings.py파일 생성
- 프로젝트 루트에 있는 assets폴더 내 static파일들을 사용한다.
from .settings import * STATICFILES_DIRS = [ os.path.join(BASE_DIR, "assets"), ] WEBPACK_LOADER = { 'DEFAULT': { 'BUNDLE_DIR_NAME': 'bundles/', 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.prod.json'), } }
- 프로젝트 루트에
assets/bundle폴더 생성$ mkdir -p assets/bundles webpack.config.js파일 수정
- frontend/config/webpack.config.js
- plugins부분에 BundleTracker 추가
plugins: [ // ... new BundleTracker({ path: paths.statsRoot, filename: "webpack-stats.prod.json" }) ]
- reactjs 빌드 후 django 실행
# frontend 폴더에서 reactjs 빌드 $ yarn build # backend 폴더에서 django 실행 $ python manage.py runserver --settings=dreact.production_settings
- 전체 폴더 구조
├── ProjectFolder
│ ├── backend
│ │ ├── venv
│ │ ├── Dreact
│ │ │ ├── assets
│ │ │ │ ├── bundles
│ │ │ ├── templates
│ │ │ ├── Dreact
│ │ │ │ ├── settings.py
│ │ │ │ ├── production_settings.py
│ │ │ ├── webpack-stats.dev.json
│ │ │ ├── webpack-stats.prod.json
│ ├── frontend
│ │ ├── config
│ │ ├── src
[참고] http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/
반응형
'Python > Django' 카테고리의 다른 글
| [Django] SCSS/SASS 사용하는 방법 (0) | 2019.08.14 |
|---|---|
| [Django][fancytree] ajax로 서버에서 데이터 불러오기 (0) | 2019.08.06 |
| [Django] Django Rest API 특정 필드 제외하고 검색하기 (0) | 2019.07.31 |
| [Django][RestAPI] Image Path로 서버에 이미지 업로드하기 (2) | 2019.07.24 |
| [Django] static 파일 불러오기 (0) | 2019.07.01 |
