{"id":49692,"date":"2023-02-15T00:30:00","date_gmt":"2023-06-20T21:09:07","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/"},"modified":"2024-04-29T14:39:19","modified_gmt":"2024-04-29T06:39:19","slug":"%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/","title":{"rendered":"\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883"},"content":{"rendered":"

\u76ee\u6807<\/h2>\n

\u6211\u5e0c\u671b\u672a\u6765\u80fd\u591f\u5728Docker\u73af\u5883\u4e2d\u5c06Django\u548cReact\u534f\u540c\u5de5\u4f5c\uff0c\u90e8\u7f72\u5230Google Kubernetes Engine\u4e0a\u5e76\u521b\u5efa\u4e2a\u4eba\u4f5c\u54c1\u96c6\u3002\u56e0\u4e3a\u6211\u5b8c\u5168\u662f\u81ea\u5b66\u81ea\u8fdb\uff0c\u6240\u4ee5\u82e5\u6709\u4efb\u4f55\u9519\u8bef\uff0c\u8bf7\u4e0d\u541d\u8d50\u6559\u3002<\/p>\n

\u73af\u5883<\/h2>\n

\u6211\u6b63\u5728\u4f7f\u7528Windows10 home\u4e0a\u7684Docker Toolbox\u3002
\n\u6211\u5c06\u4f7f\u7528DjangoRestFramework\u548cReact\u6765\u521b\u5efa\u4e00\u4e2a\u8d85\u7b80\u5355\u7684Todo\u5e94\u7528\u7a0b\u5e8f\u3002
\n\u8be5\u5e94\u7528\u7a0b\u5e8f\u7684\u4ee3\u7801\u662f\u53c2\u8003\u4e86\u300aDjango for APIs\u300b\u7b2c\u4e09\u7ae0\u3002<\/p>\n

\u9996\u5148\u5728\u672c\u5730\u5f00\u59cb\u3002<\/h2>\n

\u9996\u5148\u6211\u4eec\u53ef\u4ee5\u5728\u672c\u5730\u521b\u5efa\u4e00\u4e2a ToDo \u5e94\u7528\u7a0b\u5e8f\uff0c\u540c\u65f6\u8003\u8651 Django \u548c React \u7684\u8fde\u63a5\u3002<\/p>\n

\u521b\u5efa\u4e00\u4e2a\u76ee\u5f55<\/h3>\n

Docker Toolbox\u4f7f\u7528Virtualbox\u521b\u5efaDocker\u4e3b\u673a\u3002
\n\u7531\u4e8e\u5bb9\u5668\u5377\u7684\u6302\u8f7d\u9ed8\u8ba4\u8bbe\u7f6e\u4e3aC:Users\/\u73af\u5883\u4e0b\uff0c
\n\u6240\u4ee5\u5efa\u8bae\u5728\u4f7f\u7528Docker Toolbox\u65f6\u4f7f\u7528User\u76ee\u5f55\u4e0b\u7684\u6587\u4ef6\u5939\u3002<\/p>\n

# \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a9\u30eb\u30c0\u306e\u4f5c\u6210<\/span>\r\nmkdir <\/span>gke-django\r\ncd <\/span>gke-djagno\r\n# \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3059\u308b<\/span>\r\nmkdir <\/span>backend\r\nmkdir <\/span>frontend\r\n<\/code><\/pre>\n
\u63a8\u8fdb\u540e\u7aef\u5f00\u53d1<\/h3>\n
\u9996\u5148\uff0c\u6211\u4eec\u5c06\u4f7f\u7528Django-rest-framework\u6765\u521b\u5efa\u540e\u7aefAPI\u3002\u5148\u4ece\u540e\u7aef\u5f00\u59cb\u521b\u5efa\u73af\u5883\u8fdb\u884c\u5c1d\u8bd5\u3002<\/p>\n
\u914d\u7f6e\u6587\u4ef6.py<\/h4>\n
cd <\/span>backend\r\n# \u4eee\u60f3\u74b0\u5883\u306e\u4f5c\u6210<\/span>\r\npython -m<\/span> venv venv\r\n# \u4eee\u60f3\u74b0\u5883\u306e\u6709\u52b9\u5316<\/span>\r\nvenv\\S<\/span>cripts\\a<\/span>ctivate\r\n# Python\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/span>\r\npython -m<\/span> pip install<\/span> --upgrade<\/span> pip setuptools\r\npython -m<\/span> pip install <\/span>django djangorestframework python-dotenv\r\n# Django\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u59cb\u3081\u308b\u3002<\/span>\r\ndjango-admin startproject config .<\/span>\r\n<\/code><\/pre>\n
\u901a\u8fc7\u5728backend\u76ee\u5f55\u4e0b\u8fd0\u884c`django-admin startproject config .`\u547d\u4ee4\uff0c\u521b\u5efa\u4e86\u4e00\u4e2a\u540d\u4e3aconfig\u7684\u9879\u76ee\u6587\u4ef6\u5939\u5728backend\u76ee\u5f55\u4e0b\u3002<\/p>\n
\u6211\u4eec\u5c06\u7f16\u8f91config\/settings.py\u3002
\n\u9996\u5148\u53ea\u7f16\u8f91\u57fa\u672c\u4e8b\u9879\u3002
\n\u56e0\u4e3aSECRET_KEY\u5c06\u5728.env\u4e2d\u8ffd\u52a0\uff0c\u6240\u4ee5\u8bf7\u5c06\u5176\u590d\u5236\u5907\u4efd\u3002<\/p>\n
# config\/settings.py\r\n<\/span>\r\n\"\"\"\r\nDjango settings for config project.\r\n\r\nGenerated by 'django-admin startproject' using Django 3.0.4.\r\n\r\nFor more information on this file, see\r\nhttps:\/\/docs.djangoproject.com\/en\/3.0\/topics\/settings\/\r\n\r\nFor the full list of settings and their values, see\r\nhttps:\/\/docs.djangoproject.com\/en\/3.0\/ref\/settings\/\r\n\"\"\"<\/span>\r\n\r\nimport<\/span> os<\/span>\r\nfrom<\/span> dotenv<\/span> import<\/span> load_dotenv<\/span>  # \u8ffd\u52a0\r\n<\/span>\r\n# Build paths inside the project like this: os.path.join(BASE_DIR, ...)\r\n<\/span>BASE_DIR<\/span> =<\/span> os<\/span>.<\/span>path<\/span>.<\/span>dirname<\/span>(<\/span>os<\/span>.<\/span>path<\/span>.<\/span>dirname<\/span>(<\/span>os<\/span>.<\/span>path<\/span>.<\/span>abspath<\/span>(<\/span>__file__<\/span>)))<\/span>\r\nPROJECT_DIR<\/span> =<\/span> os<\/span>.<\/span>path<\/span>.<\/span>basename<\/span>(<\/span>BASE_DIR<\/span>)<\/span>\r\n\r\n# .env\u306e\u8aad\u307f\u8fbc\u307f\r\n<\/span>load_dotenv<\/span>(<\/span>os<\/span>.<\/span>path<\/span>.<\/span>join<\/span>(<\/span>BASE_DIR<\/span>,<\/span> '.env'<\/span>))<\/span>  # \u8ffd\u52a0\r\n<\/span>\r\n# Quick-start development settings - unsuitable for production\r\n# See https:\/\/docs.djangoproject.com\/en\/3.0\/howto\/deployment\/checklist\/\r\n<\/span>\r\n# SECURITY WARNING: keep the secret key used in production secret!\r\n<\/span>SECRET_KEY<\/span> =<\/span> os<\/span>.<\/span>getenv<\/span>(<\/span>'SECRET_KEY'<\/span>)<\/span>\r\n\r\n# SECURITY WARNING: don't run with debug turned on in production!\r\n<\/span>DEBUG<\/span> =<\/span> True<\/span>\r\n\r\nALLOWED_HOSTS<\/span> =<\/span> [<\/span>'*'<\/span>]<\/span>\r\n\r\n\r\n# Application definition\r\n<\/span>\r\nINSTALLED_APPS<\/span> =<\/span> [<\/span>\r\n    'django.contrib.admin'<\/span>,<\/span>\r\n    'django.contrib.auth'<\/span>,<\/span>\r\n    'django.contrib.contenttypes'<\/span>,<\/span>\r\n    'django.contrib.sessions'<\/span>,<\/span>\r\n    'django.contrib.messages'<\/span>,<\/span>\r\n    'django.contrib.staticfiles'<\/span>,<\/span>\r\n]<\/span>\r\n\r\nMIDDLEWARE<\/span> =<\/span> [<\/span>\r\n    'django.middleware.security.SecurityMiddleware'<\/span>,<\/span>\r\n    'django.contrib.sessions.middleware.SessionMiddleware'<\/span>,<\/span>\r\n    'django.middleware.common.CommonMiddleware'<\/span>,<\/span>\r\n    'django.middleware.csrf.CsrfViewMiddleware'<\/span>,<\/span>\r\n    'django.contrib.auth.middleware.AuthenticationMiddleware'<\/span>,<\/span>\r\n    'django.contrib.messages.middleware.MessageMiddleware'<\/span>,<\/span>\r\n    'django.middleware.clickjacking.XFrameOptionsMiddleware'<\/span>,<\/span>\r\n]<\/span>\r\n\r\nROOT_URLCONF<\/span> =<\/span> 'config.urls'<\/span>\r\n\r\nTEMPLATES<\/span> =<\/span> [<\/span>\r\n    {<\/span>\r\n        'BACKEND'<\/span>:<\/span> 'django.template.backends.django.DjangoTemplates'<\/span>,<\/span>\r\n        'DIRS'<\/span>:<\/span> [<\/span>os<\/span>.<\/span>path<\/span>.<\/span>join<\/span>(<\/span>BASE_DIR<\/span>,<\/span> 'templates'<\/span>)],<\/span>  # \u5909\u66f4\r\n<\/span>        'APP_DIRS'<\/span>:<\/span> True<\/span>,<\/span>\r\n        'OPTIONS'<\/span>:<\/span> {<\/span>\r\n            'context_processors'<\/span>:<\/span> [<\/span>\r\n                'django.template.context_processors.debug'<\/span>,<\/span>\r\n                'django.template.context_processors.request'<\/span>,<\/span>\r\n                'django.contrib.auth.context_processors.auth'<\/span>,<\/span>\r\n                'django.contrib.messages.context_processors.messages'<\/span>,<\/span>\r\n            ],<\/span>\r\n        },<\/span>\r\n    },<\/span>\r\n]<\/span>\r\n\r\nWSGI_APPLICATION<\/span> =<\/span> 'config.wsgi.application'<\/span>\r\n\r\n\r\n# Database\r\n# https:\/\/docs.djangoproject.com\/en\/3.0\/ref\/settings\/#databases\r\n<\/span>\r\nDATABASES<\/span> =<\/span> {<\/span>\r\n    'default'<\/span>:<\/span> {<\/span>\r\n        'ENGINE'<\/span>:<\/span> 'django.db.backends.sqlite3'<\/span>,<\/span>\r\n        'NAME'<\/span>:<\/span> os<\/span>.<\/span>path<\/span>.<\/span>join<\/span>(<\/span>BASE_DIR<\/span>,<\/span> 'db.sqlite3'<\/span>),<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n\r\n\r\n# Password validation\r\n# https:\/\/docs.djangoproject.com\/en\/3.0\/ref\/settings\/#auth-password-validators\r\n<\/span>\r\nAUTH_PASSWORD_VALIDATORS<\/span> =<\/span> [<\/span>\r\n    {<\/span>\r\n        'NAME'<\/span>:<\/span> 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator'<\/span>,<\/span>\r\n    },<\/span>\r\n    {<\/span>\r\n        'NAME'<\/span>:<\/span> 'django.contrib.auth.password_validation.MinimumLengthValidator'<\/span>,<\/span>\r\n    },<\/span>\r\n    {<\/span>\r\n        'NAME'<\/span>:<\/span> 'django.contrib.auth.password_validation.CommonPasswordValidator'<\/span>,<\/span>\r\n    },<\/span>\r\n    {<\/span>\r\n        'NAME'<\/span>:<\/span> 'django.contrib.auth.password_validation.NumericPasswordValidator'<\/span>,<\/span>\r\n    },<\/span>\r\n]<\/span>\r\n\r\n\r\n# Internationalization\r\n# https:\/\/docs.djangoproject.com\/en\/3.0\/topics\/i18n\/\r\n<\/span>\r\nLANGUAGE_CODE<\/span> =<\/span> 'ja'<\/span>\r\n\r\nTIME_ZONE<\/span> =<\/span> 'Asia\/Tokyo'<\/span>\r\n\r\nUSE_I18N<\/span> =<\/span> True<\/span>\r\n\r\nUSE_L10N<\/span> =<\/span> True<\/span>\r\n\r\nUSE_TZ<\/span> =<\/span> True<\/span>\r\n\r\n\r\n# Static files (CSS, JavaScript, Images)\r\n# https:\/\/docs.djangoproject.com\/en\/3.0\/howto\/static-files\/\r\n<\/span>\r\nSTATIC_URL<\/span> =<\/span> '\/static\/'<\/span>\r\n\r\n# \u958b\u767a\u74b0\u5883\u4e0b\u3067\u9759\u7684\u30d5\u30a1\u30a4\u30eb\u3092\u53c2\u7167\u3059\u308b\u5148\r\n<\/span>STATICFILES_DIRS<\/span> =<\/span> [<\/span>os<\/span>.<\/span>path<\/span>.<\/span>join<\/span>(<\/span>BASE_DIR<\/span>,<\/span> 'static'<\/span>)]<\/span>\r\n\r\n# \u672c\u756a\u74b0\u5883\u3067\u9759\u7684\u30d5\u30a1\u30a4\u30eb\u3092\u53c2\u7167\u3059\u308b\u5148\r\n<\/span>STATIC_ROOT<\/span> =<\/span> os<\/span>.<\/span>path<\/span>.<\/span>join<\/span>(<\/span>BASE_DIR<\/span>,<\/span> 'staticfiles'<\/span>)<\/span>\r\n\r\n# \u30e1\u30c7\u30a3\u30a2\u30d5\u30a1\u30a4\u30ebpath\r\n<\/span>MEDIA_URL<\/span> =<\/span> '\/media\/''\r\n<\/span><\/code><\/pre>\n
\u5728settings.py\u6587\u4ef6\u4e2d\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a.env\u7684\u6587\u4ef6\u6765\u8fdb\u884c\u5f15\u7528\u3002<\/p>\n
# .env\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210<\/span>\r\ntype <\/span>nul ><\/span> .env\r\n\r\n# .env\u306b\u30b3\u30d4\u30da\u3057\u3066\u304a\u3044\u305fSECRET_KEY\u3092\u8ffd\u52a0\u3059\u308b<\/span>\r\nSECRET_KEY =<\/span> '+_f1u^*rb8+%cn-4o*kjn_(15*wspz0*!c)@=ll08odexo88a4'<\/span>\r\n<\/code><\/pre>\n
\u5f00\u59cb\u4f7f\u7528\u5f85\u529e\u4e8b\u9879\u5e94\u7528<\/h4>\n
python manage.py startapp todos\r\n<\/code><\/pre>\n
\u5c06\u5e94\u7528\u7a0b\u5e8f\u6dfb\u52a0\u5230settings.py\u6587\u4ef6\u4e2d\u3002<\/p>\n
# conig\/settings.py\r\n<\/span>\r\n# Application definition\r\n<\/span>\r\nINSTALLED_APPS<\/span> =<\/span> [<\/span>\r\n    'django.contrib.admin'<\/span>,<\/span>\r\n    'django.contrib.auth'<\/span>,<\/span>\r\n    'django.contrib.contenttypes'<\/span>,<\/span>\r\n    'django.contrib.sessions'<\/span>,<\/span>\r\n    'django.contrib.messages'<\/span>,<\/span>\r\n    'django.contrib.staticfiles'<\/span>,<\/span>\r\n    'todos.app.TodosConfig'<\/span>  # \u8ffd\u52a0\r\n<\/span>]<\/span>\r\n<\/code><\/pre>\n
\u5236\u4f5c\u6a21\u578b\u5e76\u8fdb\u884c\u8fc1\u79fb\uff0c\u7136\u540e\u5c06\u5176\u6ce8\u518c\u5230\u7ba1\u7406\u5458\u754c\u9762\u4e0a\u3002<\/p>\n
# todos\/models.py\r\n<\/span>from<\/span> django.db<\/span> import<\/span> models<\/span>\r\n\r\n\r\nclass<\/span> Todo<\/span>(<\/span>models<\/span>.<\/span>Model<\/span>):<\/span>\r\n    title<\/span> =<\/span> models<\/span>.<\/span>CharField<\/span>(<\/span>max_length<\/span>=<\/span>200<\/span>)<\/span>\r\n    body<\/span> =<\/span> models<\/span>.<\/span>TextField<\/span>()<\/span>\r\n\r\n    def<\/span> __str__<\/span>(<\/span>self<\/span>):<\/span>\r\n        return<\/span> self<\/span>.<\/span>title<\/span>\r\n<\/code><\/pre>\n
$ <\/span>python manage.py makemigrations todos\r\nMigrations for<\/span> 'todos'<\/span>:\r\n  todos\\m<\/span>igrations\\0<\/span>001_initial.py\r\n    - Create model Todo\r\n\r\n$ <\/span>python manage.py migrate\r\nOperations to perform:\r\n  Apply all migrations: admin, auth, contenttypes, sessions, todos\r\nRunning migrations:\r\n  Applying contenttypes.0001_initial... OK\r\n  Applying auth.0001_initial... OK\r\n  Applying admin.0001_initial... OK\r\n  Applying admin.0002_logentry_remove_auto_add... OK\r\n  Applying admin.0003_logentry_add_action_flag_choices... OK\r\n  Applying contenttypes.0002_remove_content_type_name... OK\r\n  Applying auth.0002_alter_permission_name_max_length... OK\r\n  Applying auth.0003_alter_user_email_max_length... OK\r\n  Applying auth.0004_alter_user_username_opts... OK\r\n  Applying auth.0005_alter_user_last_login_null... OK\r\n  Applying auth.0006_require_contenttypes_0002... OK\r\n  Applying auth.0007_alter_validators_add_error_messages... OK\r\n  Applying auth.0008_alter_user_username_max_length... OK\r\n  Applying auth.0009_alter_user_last_name_max_length... OK\r\n  Applying auth.0010_alter_group_name_max_length... OK\r\n  Applying auth.0011_update_proxy_permissions... OK\r\n  Applying sessions.0001_initial... OK\r\n  Applying todos.0001_initial... OK\r\n<\/code><\/pre>\n
# todos\/admin.py\r\n<\/span>from<\/span> django.contrib<\/span> import<\/span> admin<\/span>\r\nfrom<\/span> .models<\/span> import<\/span> Todo<\/span>\r\n\r\n\r\nadmin<\/span>.<\/span>site<\/span>.<\/span>register<\/span>(<\/span>Todo<\/span>)<\/span>\r\n<\/code><\/pre>\n
\u521b\u5efa\u7ba1\u7406\u7528\u6237\u5e76\u767b\u5f55\u4e3a\u7ba1\u7406\u5458\uff0c\u5728\u5f85\u529e\u4e8b\u9879\u4e2d\u6dfb\u52a0\u5927\u7ea63\u4e2a\u4efb\u52a1\u3002<\/p>\n
$ <\/span>python manage.py createsuperuser\r\n\u30e6\u30fc\u30b6\u30fc\u540d (<\/span>leave blank to use 'yourname'<\/span>)<\/span>: yourname\r\n\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9: youraddress@mail.com\r\nPassword:\r\nPassword (<\/span>again)<\/span>:\r\nSuperuser created successfully.\r\n\r\n$ <\/span>python manage.py runserver\r\nWatching for <\/span>file changes with StatReloader\r\nPerforming system checks...\r\n\r\nSystem check identified no issues (<\/span>0 silenced)<\/span>.<\/span>\r\nMarch 10, 2020 - 23:41:26\r\nDjango version 3.0.4, using settings 'config.settings'<\/span>\r\nStarting development server at http:\/\/127.0.0.1:8000\/\r\nQuit the server with CTRL-BREAK.\r\n\r\n<\/code><\/pre>\n
\u5f53\u4f60\u8bbf\u95ee http:\/\/127.0.0.1:8000\/admin \u65f6\uff0c\u4f1a\u6253\u5f00django-admin\u7684\u767b\u5f55\u9875\u9762\uff0c\u56e0\u6b64\u8bf7\u4f7f\u7528createsuperuser\u6ce8\u518c\u4fe1\u606f\u8fdb\u884c\u767b\u5f55\u3002\u6211\u4eec\u5148\u6ce8\u518c\u597d3\u4e2a\u5f85\u529e\u4e8b\u9879\u3002<\/p>\n
\u5f00\u59cb\u4f7f\u7528Django REST framework\u3002<\/h4>\n
\u9700\u8981\u66f4\u65b0 config\/settings.py \u6587\u4ef6\uff0c\u4ee5\u4fbf\u80fd\u591f\u4f7f\u7528\u6700\u521d\u901a\u8fc7 pip \u5b89\u88c5\u7684 restframework\u3002<\/p>\n
# config\/settings.py\r\n<\/span>\r\n# Application definition\r\n<\/span>\r\nINSTALLED_APPS<\/span> =<\/span> [<\/span>\r\n    'django.contrib.admin'<\/span>,<\/span>\r\n    'django.contrib.auth'<\/span>,<\/span>\r\n    'django.contrib.contenttypes'<\/span>,<\/span>\r\n    'django.contrib.sessions'<\/span>,<\/span>\r\n    'django.contrib.messages'<\/span>,<\/span>\r\n    'django.contrib.staticfiles'<\/span>,<\/span>\r\n\r\n    # 3rd party\r\n<\/span>    'rest_framework'<\/span>,<\/span>\r\n\r\n    # Local\r\n<\/span>    'todos.apps.TodosConfig'<\/span>,<\/span>\r\n]<\/span>\r\n\r\n# \u8ffd\u52a0\r\n<\/span>REST_FRAMEWORK<\/span> =<\/span> {<\/span>\r\n    'DEFAULT_PERMISSION_CLASSES'<\/span>:<\/span> [<\/span>\r\n        'rest_framework.permissions.AllowAny'<\/span>,<\/span>\r\n    ]<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
rest_framework.permissions.AllowAny \u662f\u4e3a\u4e86\u89e3\u9664 django-rest-framework \u9690\u5f0f\u8bbe\u7f6e\u7684\u9ed8\u8ba4\u8bbe\u7f6e ‘DEFAULT_PERMISSION_CLASSES’ \u800c\u5b58\u5728\u7684\u3002
\n\u5bf9\u4e8e\u8fd9\u4e2a\u8bbe\u7f6e\u6211\u8fd8\u4e0d\u662f\u5f88\u6e05\u695a\uff0c\u4f46\u662f\u6211\u4f1a\u5148\u7ee7\u7eed\u524d\u8fdb\u3002<\/p>\n
\u521b\u5efatodos\/urls.py\uff0ctodos\/views.py\uff0ctodos\/serializers.py\u3002<\/p>\n
\u7f51\u5740<\/h5>\n
\u901a\u8fc7\u5728config\/urls.py\u4e2d\u6dfb\u52a0\u6bcf\u4e2a\u5e94\u7528\u7a0b\u5e8f\u7684urls.py\u6587\u4ef6\u6765\u8fdb\u884c\u914d\u7f6e\u3002<\/p>\n
# config\/urls.py\r\n<\/span>from<\/span> django.contrib<\/span> import<\/span> admin<\/span>\r\nfrom<\/span> django.urls<\/span> import<\/span> path<\/span>,<\/span> include<\/span>\r\n\r\nurlpatterns<\/span> =<\/span> [<\/span>\r\n    path<\/span>(<\/span>'admin\/'<\/span>,<\/span> admin<\/span>.<\/span>site<\/span>.<\/span>urls<\/span>),<\/span>\r\n    path<\/span>(<\/span>'api\/'<\/span>,<\/span> include<\/span>(<\/span>'todos.urls'<\/span>))<\/span>\r\n]<\/span>\r\n\r\n<\/code><\/pre>\n
\u6211\u6703\u6dfb\u52a0 todos\/urls.py \u7a0b\u5f0f\u3002<\/p>\n
$ <\/span>type <\/span>nul ><\/span> todos\\u<\/span>rls.py\r\n<\/code><\/pre>\n
# todos\/urls.py\r\n<\/span>from<\/span> django.urls<\/span> import<\/span> path<\/span>\r\nfrom<\/span> .views<\/span> import<\/span> ListTodo<\/span>,<\/span> DetailTodo<\/span>\r\n\r\nurlpatterns<\/span> =<\/span> [<\/span>\r\n    path<\/span>(<\/span>'<int:pk>\/'<\/span>,<\/span> DetailTodo<\/span>.<\/span>as_view<\/span>()),<\/span>\r\n    path<\/span>(<\/span>''<\/span>,<\/span> ListTodo<\/span>.<\/span>as_view<\/span>())<\/span>\r\n]<\/span>\r\n<\/code><\/pre>\n
\u5e8f\u5217\u5316\u5668<\/h5>\n
\u6dfb\u52a0\u5e8f\u5217\u5316\u7a0b\u5e8f(serializers.py)\u4ee5\u5c06\u6a21\u578b\u5b9e\u4f8b\u8f6c\u6362\u4e3aJSON\u683c\u5f0f\u3002<\/p>\n
type <\/span>nul ><\/span> todos\\s<\/span>erializers.py\r\n<\/code><\/pre>\n
# todos\/serializers.py\r\n<\/span>from<\/span> rest_framework<\/span> import<\/span> serializers<\/span>\r\nfrom<\/span> .models<\/span> import<\/span> Todo<\/span>\r\n\r\n\r\nclass<\/span> TodoSerializer<\/span>(<\/span>serializers<\/span>.<\/span>ModelSerializer<\/span>):<\/span>\r\n    class<\/span> Meta<\/span>:<\/span>\r\n        model<\/span> =<\/span> Todo<\/span>\r\n        fields<\/span> =<\/span> (<\/span>'id'<\/span>,<\/span> 'title'<\/span>,<\/span> 'body'<\/span>)<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u5728 fields = (‘id’, ‘title’, ‘text’) \u4e2d\u4e0d\u6307\u5b9a id \u4e3a PrimaryKey\uff0cDjango \u4f1a\u81ea\u52a8\u6dfb\u52a0\u3002<\/p>\n
\u89c2\u70b9<\/h5>\n
\u5728\u4f7f\u7528Django Rest Framework\u521b\u5efaviews.py\u65f6\uff0c\u9700\u8981\u7ee7\u627frest_framework.generics\u4e2d\u7684APIView\u7c7b\u3002<\/p>\n
# todos\/views.py\r\n<\/span>\r\nfrom<\/span> django.shortcuts<\/span> import<\/span> render<\/span>\r\nfrom<\/span> rest_framework<\/span> import<\/span> generics<\/span>\r\nfrom<\/span> .models<\/span> import<\/span> Todo<\/span>\r\nfrom<\/span> .serializers<\/span> import<\/span> TodoSerializer<\/span>\r\n\r\n\r\nclass<\/span> ListTodo<\/span>(<\/span>generics<\/span>.<\/span>ListAPIView<\/span>):<\/span>\r\n    queryset<\/span> =<\/span> Todo<\/span>.<\/span>objects<\/span>.<\/span>all<\/span>()<\/span>\r\n    serializer_class<\/span> =<\/span> TodoSerializer<\/span>\r\n\r\n\r\nclass<\/span> DetailTodo<\/span>(<\/span>generics<\/span>.<\/span>RetrieveAPIView<\/span>):<\/span>\r\n    queryset<\/span> =<\/span> Todo<\/span>.<\/span>objects<\/span>.<\/span>all<\/span>()<\/span>\r\n    serializer_class<\/span> =<\/span> TodoSerializer<\/span>\r\n<\/code><\/pre>\n
\u867d\u7136\u8def\u7531\u5668\u7b49\u8bbe\u5907\u5c1a\u672a\u8fdb\u884c\u914d\u7f6e\uff0c\u4f46\u73b0\u5728\u53ef\u4ee5\u901a\u8fc7 API \u4f7f\u7528\u5f85\u529e\u4e8b\u9879\u9879\u4e86\u3002\u60a8\u53ef\u4ee5\u5728\u5f00\u53d1\u670d\u52a1\u5668\u4e0a\u8bbf\u95ee http:\/\/127.0.0.1:8000\/api\/ \u6765\u67e5\u770b API \u89c6\u56fe\u3002<\/p>\n
\u8fd9\u91cc\u662f\u5e38\u89c1\u7684Django\u672c\u5730\u5f00\u53d1\u73af\u5883\u3002<\/p>\n
CORS \u7684\u4e2d\u6587\u8bd1\u540d\u662f\u8de8\u57df\u8d44\u6e90\u5171\u4eab\u3002<\/h5>\n
\u5728React\u548cDjango\u534f\u540c\u5de5\u4f5c\u65f6\uff0c\u5f53React\u542f\u52a8\u5728localhost:3000\u4e0a\u65f6\uff0c\u9700\u8981\u8ba9\u5b83\u4e0eDjango\u7684API\u670d\u52a1\u5668localhost:8000\u8fdb\u884cJSON\u901a\u4fe1\u3002\u8bf7\u5b89\u88c5django-cors-headers\u63d2\u4ef6\u3002<\/p>\n
python -m<\/span> pip install <\/span>django-cors-headers\r\n<\/code><\/pre>\n
\u53ea\u9700\u8981\u4e00\u79cd\u9009\u9879\uff1a<\/p>\n
\u66f4\u65b0config\/settings.py\u6587\u4ef6\u3002<\/p>\n
# config\/settings.py\r\n<\/span>\r\n# Application definition\r\n<\/span>\r\nINSTALLED_APPS<\/span> =<\/span> [<\/span>\r\n    'django.contrib.admin'<\/span>,<\/span>\r\n    'django.contrib.auth'<\/span>,<\/span>\r\n    'django.contrib.contenttypes'<\/span>,<\/span>\r\n    'django.contrib.sessions'<\/span>,<\/span>\r\n    'django.contrib.messages'<\/span>,<\/span>\r\n    'django.contrib.staticfiles'<\/span>,<\/span>\r\n\r\n    # 3rd party\r\n<\/span>    'rest_framework'<\/span>,<\/span>\r\n    'corsheaders'<\/span>,<\/span>\r\n\r\n    # Local\r\n<\/span>    'todos.apps.TodosConfig'<\/span>,<\/span>\r\n]<\/span>\r\n\r\nMIDDLEWARE<\/span> =<\/span> [<\/span>\r\n    'django.middleware.security.SecurityMiddleware'<\/span>,<\/span>\r\n    'django.contrib.sessions.middleware.SessionMiddleware'<\/span>,<\/span>\r\n    'corsheaders.middleware.CorsMidddleware'<\/span>,<\/span>  # \u8ffd\u52a0\r\n<\/span>    'django.middleware.common.CommonMiddleware'<\/span>,<\/span>\r\n    'django.middleware.csrf.CsrfViewMiddleware'<\/span>,<\/span>\r\n    'django.contrib.auth.middleware.AuthenticationMiddleware'<\/span>,<\/span>\r\n    'django.contrib.messages.middleware.MessageMiddleware'<\/span>,<\/span>\r\n    'django.middleware.clickjacking.XFrameOptionsMiddleware'<\/span>,<\/span>\r\n]<\/span>\r\n\r\n##################\r\n# rest_framework #\r\n##################\r\n<\/span>\r\nREST_FRAMEWORK<\/span> =<\/span> {<\/span>\r\n    'DEFAULT_PERMISSION_CLASSES'<\/span>:<\/span> [<\/span>\r\n        'rest_framework.permissions.AllowAny'<\/span>,<\/span>\r\n    ]<\/span>\r\n}<\/span>\r\n\r\nCORS_ORIGIN_WHITELIST<\/span> =<\/span> (<\/span>\r\n    'http:\/\/localhost:3000'<\/span>,<\/span>\r\n)<\/span>\r\n<\/code><\/pre>\n
\u8003\u8bd5 sh\u00ec)<\/h5>\n
\u6211\u8981\u505a\u8003\u8bd5\u3002<\/p>\n
# todos\/test.py\r\n<\/span>\r\nfrom<\/span> django.test<\/span> import<\/span> TestCase<\/span>\r\nfrom<\/span> .models<\/span> import<\/span> Todo<\/span>\r\n\r\n\r\nclass<\/span> TodoModelTest<\/span>(<\/span>TestCase<\/span>):<\/span>\r\n\r\n    @<\/span>classmethod<\/span>\r\n    def<\/span> setUpTestData<\/span>(<\/span>cls<\/span>):<\/span>\r\n        Todo<\/span>.<\/span>objects<\/span>.<\/span>create<\/span>(<\/span>title<\/span>=<\/span>\"first todo\"<\/span>,<\/span> body<\/span>=<\/span>\"a body here\"<\/span>)<\/span>\r\n\r\n    def<\/span> test_title_content<\/span>(<\/span>self<\/span>):<\/span>\r\n        todo<\/span> =<\/span> Todo<\/span>.<\/span>objects<\/span>.<\/span>get<\/span>(<\/span>id<\/span>=<\/span>1<\/span>)<\/span>\r\n        excepted_object_name<\/span> =<\/span> f<\/span>'<\/span>{<\/span>todo<\/span>.<\/span>title<\/span>}<\/span>'<\/span>\r\n        self<\/span>.<\/span>assertEqual<\/span>(<\/span>excepted_object_name<\/span>,<\/span> 'first todo'<\/span>)<\/span>\r\n\r\n    def<\/span> test_body_content<\/span>(<\/span>self<\/span>):<\/span>\r\n        todo<\/span> =<\/span> Todo<\/span>.<\/span>objects<\/span>.<\/span>get<\/span>(<\/span>id<\/span>=<\/span>1<\/span>)<\/span>\r\n        excepted_object_name<\/span> =<\/span> f<\/span>'<\/span>{<\/span>todo<\/span>.<\/span>body<\/span>}<\/span>'<\/span>\r\n        self<\/span>.<\/span>assertEqual<\/span>(<\/span>excepted_object_name<\/span>,<\/span> 'a body here'<\/span>)<\/span>\r\n\r\n<\/code><\/pre>\n
$ <\/span>python manage.py test\r\n<\/span>Creating test <\/span>database for <\/span>alias<\/span> 'default'<\/span>...\r\nSystem check identified no issues (<\/span>0 silenced)<\/span>.<\/span>\r\n..\r\n----------------------------------------------------------------------<\/span>\r\nRan 2 tests in <\/span>0.007s\r\n\r\nOK\r\nDestroying test <\/span>database for <\/span>alias<\/span> 'default'<\/span>...\r\n<\/code><\/pre>\n
\u597d\u50cf\u8fdb\u5c55\u987a\u5229\u3002<\/p>\n
\u63a8\u8fdb\u524d\u7aef\u5f00\u53d1<\/h3>\n
\u8ba9\u6211\u4eec\u9884\u5148\u5b89\u88c5Node.js\u5427\u3002<\/p>\n
$ <\/span>cd <\/span>frontend\r\n$ <\/span>npx create-react-app .<\/span>\r\n$ <\/span>yarn start\r\n\r\nyarn run v1.22.0\r\n$ <\/span>react-scripts start\r\ni \uff62wds\uff63: Project is running at http:\/\/192.168.56.1\/\r\ni \uff62wds\uff63: webpack output is served from\r\ni \uff62wds\uff63: Content not from webpack is served from\r\nC:\\-<\/span>-you-path--<\/span>\\g<\/span>ke-django-tutorial\\f<\/span>rontend\\p<\/span>ublic\r\ni \uff62wds\uff63: 404s will fallback to \/\r\nStarting the development server...\r\nCompiled successfully!\r\n\r\nYou can now view frontend in <\/span>the browser.\r\n\r\n  Local:            http:\/\/localhost:3000\r\n  On Your Network:  http:\/\/192.168.56.1:3000\r\n\r\nNote that the development build is not optimized.\r\nTo create a production build, use yarn build.\r\n\r\n<\/code><\/pre>\n
\u6211\u80fd\u591f\u4f7f\u7528React\u5f00\u59cb\u524d\u7aef\u9879\u76ee\u3002
\n\u5f53\u5728\u6d4f\u89c8\u5668\u4e2d\u8bbf\u95eehttp\uff1a\/\/ localhost\uff1a3000\u65f6\uff0c\u60a8\u53ef\u4ee5\u770b\u5230React\u7684\u6b22\u8fce\u9875\u9762\u3002<\/p>\n
App.js \u5e94\u7528\u7a0b\u5e8f.js<\/h4>\n
api\u7684\u7ec8\u70b9\u4f1a\u4ee5\u4ee5\u4e0b\u7684\u5f62\u5f0f\u8fd4\u56deapi\uff0c\u6211\u4eec\u9700\u8981\u610f\u8bc6\u5230\u8fd9\u4e00\u70b9\u3002
\n\u9996\u5148\uff0c\u6211\u4eec\u5c06\u5728\u6a21\u62df\u6570\u636e\u4e2d\u8fdb\u884c\u5c1d\u8bd5\u3002<\/p>\n
[<\/span>\r\n  {<\/span>\r\n    \"id\"<\/span>:<\/span> 1<\/span>,<\/span>\r\n    \"title\"<\/span>:<\/span> \"test_title\"<\/span>,<\/span>\r\n    \"body\"<\/span>:<\/span> \"body of test_title\"<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    \"id\"<\/span>:<\/span> 2<\/span>,<\/span>\r\n    \"title\"<\/span>:<\/span> \"test_title2\"<\/span>,<\/span>\r\n    \"body\"<\/span>:<\/span> \"body of test_title2\"<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    \"id\"<\/span>:<\/span> 3<\/span>,<\/span>\r\n    \"title\"<\/span>:<\/span> \"test_title3\"<\/span>,<\/span>\r\n    \"body\"<\/span>:<\/span> \"body of test_title3\"<\/span>\r\n  }<\/span>\r\n]<\/span>\r\n<\/code><\/pre>\n
\/\/ src\/App.js<\/span>\r\n\r\nimport<\/span> React<\/span>,<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> axios<\/span> from<\/span> \"<\/span>axiso<\/span>\"<\/span>;<\/span>\r\nimport<\/span> \"<\/span>.\/App.css<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> list<\/span> =<\/span> [<\/span>\r\n  {<\/span>\r\n    id<\/span>:<\/span> 1<\/span>,<\/span>\r\n    title<\/span>:<\/span> \"<\/span>test_title<\/span>\"<\/span>,<\/span>\r\n    body<\/span>:<\/span> \"<\/span>body of test_title<\/span>\"<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    id<\/span>:<\/span> 2<\/span>,<\/span>\r\n    title<\/span>:<\/span> \"<\/span>test_title2<\/span>\"<\/span>,<\/span>\r\n    body<\/span>:<\/span> \"<\/span>body of test_title2<\/span>\"<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    id<\/span>:<\/span> 3<\/span>,<\/span>\r\n    title<\/span>:<\/span> \"<\/span>test_title3<\/span>\"<\/span>,<\/span>\r\n    body<\/span>:<\/span> \"<\/span>body of test_title3<\/span>\"<\/span>\r\n  }<\/span>\r\n];<\/span>\r\n\r\nclass<\/span> App<\/span> extends<\/span> Component<\/span> {<\/span>\r\n  constructor<\/span>(<\/span>props<\/span>)<\/span> {<\/span>\r\n    super<\/span>(<\/span>props<\/span>);<\/span>\r\n    this<\/span>.<\/span>state<\/span> =<\/span> {<\/span> list<\/span> };<\/span>\r\n  }<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>list<\/span>.<\/span>map<\/span>(<\/span>item<\/span> =><\/span> (<\/span>\r\n          <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>item<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n            <<\/span>h1<\/span>><\/span>{<\/span>item<\/span>.<\/span>title<\/span>}<\/span><<\/span>\/h1<\/span>>\r\n<\/span>            <<\/span>p<\/span>><\/span>{<\/span>item<\/span>.<\/span>body<\/span>}<\/span><<\/span>\/p<\/span>>\r\n<\/span>          <<\/span>\/div<\/span>>\r\n<\/span>        ))}<\/span>\r\n      <<\/span>\/div<\/span>>\r\n<\/span>    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> App<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u5f53\u8bbf\u95ee http:\/\/localhost:3000 \u65f6\uff0c\u663e\u793a\u4e86\u6a21\u62df\u6570\u636e\u3002
\n\u6211\u5e0c\u671b\u7528\u4ece\u540e\u7aef\u83b7\u53d6\u7684\u6570\u636e\u6765\u663e\u793a\u5b83\u3002<\/p>\n
axios \u5f62\u5c31\u662f\u300caxios\u300d<\/h4>\n
\u5728\u524d\u7aef\u8fdb\u884c\u8bf7\u6c42\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u5185\u7f6e\u7684Fetch API\u6216axios\u5e93\u6765\u53d1\u9001\u8bf7\u6c42\uff0c\u4f46\u6211\u4eec\u9009\u62e9\u4f7f\u7528axios\u3002<\/p>\n
npm install <\/span>axios --save<\/span>\r\nyarn start\r\n<\/code><\/pre>\n
\u6211\u4f1a\u4fee\u6539 App.js\u3002<\/p>\n
\/\/ src\/App.js<\/span>\r\n\r\nimport<\/span> React<\/span>,<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> axios<\/span> from<\/span> \"<\/span>axios<\/span>\"<\/span>;<\/span>\r\nimport<\/span> \"<\/span>.\/App.css<\/span>\"<\/span>;<\/span>\r\n\r\nclass<\/span> App<\/span> extends<\/span> Component<\/span> {<\/span>\r\n  state<\/span> =<\/span> {<\/span>\r\n    todos<\/span>:<\/span> []<\/span>\r\n  };<\/span>\r\n\r\n  componentDidMount<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>getTodos<\/span>();<\/span>\r\n  }<\/span>\r\n\r\n  getTodos<\/span>()<\/span> {<\/span>\r\n    axios<\/span>\r\n      .<\/span>get<\/span>(<\/span>\"<\/span>http:\/\/127.0.0.1:8000\/api\/<\/span>\"<\/span>)<\/span>\r\n      .<\/span>then<\/span>(<\/span>res<\/span> =><\/span> {<\/span>\r\n        this<\/span>.<\/span>setState<\/span>({<\/span> todos<\/span>:<\/span> res<\/span>.<\/span>data<\/span> });<\/span>\r\n      })<\/span>\r\n      .<\/span>catch<\/span>(<\/span>err<\/span> =><\/span> {<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>err<\/span>);<\/span>\r\n      });<\/span>\r\n  }<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>todos<\/span>.<\/span>map<\/span>(<\/span>item<\/span> =><\/span> (<\/span>\r\n          <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>item<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n            <<\/span>h1<\/span>><\/span>{<\/span>item<\/span>.<\/span>title<\/span>}<\/span><<\/span>\/h1<\/span>>\r\n<\/span>            <<\/span>p<\/span>><\/span>{<\/span>item<\/span>.<\/span>body<\/span>}<\/span><<\/span>\/p<\/span>>\r\n<\/span>          <<\/span>\/div<\/span>>\r\n<\/span>        ))}<\/span>\r\n      <<\/span>\/div<\/span>>\r\n<\/span>    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> App<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u6211\u4eec\u5df2\u7ecf\u6210\u529f\u5730\u5728\u672c\u5730\u73af\u5883\u4e2d\u901a\u8fc7\u524d\u7aef\u8c03\u7528\u540e\u7aef\u7684API\uff0c\u5b9e\u73b0\u4e86\u5f85\u529e\u4e8b\u9879\u5217\u8868\u7684\u663e\u793a\u3002<\/p>\n
\u867d\u7136\u5f62\u5f0f\u975e\u5e38\u7b80\u5355\uff0c\u4f46\u603b\u7b97\u6210\u529f\u5b8c\u6210\u4e86Django\u548cReact\u7684\u6574\u5408\u3002<\/p>\n
\u6211\u5e0c\u671b\u63a5\u4e0b\u6765\u53ef\u4ee5\u5c06\u8fd9\u4e2a\u9879\u76ee\u8fdb\u884cDocker\u5316\u3002<\/p>\n
\u63a8\u8fdbDocker\u5316<\/h2>\n
\u6211\u4eec\u4f1a\u4e3a\u524d\u7aef\u548c\u540e\u7aef\u5206\u522b\u521b\u5efa Dockerfile\uff0c\u5e76\u8bd5\u7740\u521b\u5efa\u4e86\u4e00\u4e2a\u540e\u7aef\u5bb9\u5668\u548c\u4e00\u4e2a\u524d\u7aef\u5bb9\u5668\u3002<\/p>\n
\u9996\u5148\u6211\u4eec\u6765\u8003\u8651\u4e00\u4e0b\u53ef\u4ee5\u901a\u8fc7Docker-compose\u542f\u52a8\u7684\u90e8\u5206\u3002<\/p>\n
\u5c06\u540e\u7aef\u8fdb\u884cDocker\u5316\u3002<\/h3>\n
\u5728\u7f16\u5199 Dockerfile \u4e4b\u524d\uff0cDjango \u65b9\u9762\u6709\u51e0\u4ef6\u4e8b\u53ef\u4ee5\u5148\u505a\u3002<\/p>\n
# \u9759\u7684\u30d5\u30a1\u30a4\u7528\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/span>\r\n$ <\/span>mkdir <\/span>backend\\s<\/span>tatic\r\n# \u9759\u7684\u30d5\u30a1\u30a4\u30eb\u3092\u5168\u90e8\u96c6\u3081\u3066staticifiles\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u96c6\u3081\u3089\u308c<\/span>\r\n$ <\/span>python manage.py collectstatic\r\n<\/code><\/pre>\n
\u867d\u7136\u901a\u5e38\u60c5\u51b5\u4e0b\u4f1a\u5c06\u6570\u636e\u5e93\u5185\u5bb9\u548csettings.py\u5728\u672c\u5730\u548c\u751f\u4ea7\u73af\u5883\u4e2d\u8fdb\u884c\u5206\u79bb\uff0c\u4f46\u9996\u5148\u6211\u4eec\u8981\u8003\u8651\u5c06\u73b0\u6709\u5f62\u5f0f\u76f4\u63a5\u8f6c\u6362\u4e3aDocker\u5316\u7684\u53ef\u80fd\u6027\u3002<\/p>\n
\u5728backend\u76ee\u5f55\u4e2d\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aDockerfile\u7684\u6587\u4ef6\u3002<\/p>\n
$ <\/span>type <\/span>nul ><\/span> backend\\D<\/span>ockerfile\r\n<\/code><\/pre>\n
# backend\/Dockerfile<\/span>\r\n\r\n# set base image<\/span>\r\nFROM<\/span> python:3.7<\/span>\r\n\r\n# set environment variables<\/span>\r\nENV<\/span> PYTHONDONTWRITEBYTECODE 1<\/span>\r\nENV<\/span> PYTHONUNBUFFERED 1<\/span>\r\n\r\n# set work directory<\/span>\r\nRUN <\/span>mkdir<\/span> \/code\r\nWORKDIR<\/span> \/code<\/span>\r\n\r\n# install dependencies<\/span>\r\nCOPY<\/span> requirements.txt \/code\/<\/span>\r\nRUN <\/span>python3 -m<\/span> pip install<\/span> --upgrade<\/span> pip setuptools\r\nRUN <\/span>pip install<\/span> -r<\/span> requirements.txt\r\n\r\n# Copy project<\/span>\r\nCOPY<\/span> . \/code\/<\/span>\r\n\r\nEXPOSE<\/span> 8000<\/span>\r\n\r\n<\/code><\/pre>\n
\u7136\u540e\u5c06 docker-compose.yml \u6587\u4ef6\u653e\u7f6e\u5728\u9879\u76ee\u76ee\u5f55\u4e2d\uff0c\u4ee5\u4fbf\u4f7f\u7528 docker-compose up \u547d\u4ee4\u542f\u52a8\u540e\u7aef\u5bb9\u5668\u3002<\/p>\n
# docker-compose.yml<\/span>\r\nversion<\/span>:<\/span> \"<\/span>3.7\"<\/span>\r\n\r\nservices<\/span>:<\/span>\r\n  backend<\/span>:<\/span>\r\n    build<\/span>:<\/span> .\/backend\/.<\/span>\r\n    command<\/span>:<\/span> python \/code\/manage.py runserver 0.0.0.0:8000<\/span>\r\n    volumes<\/span>:<\/span>\r\n      -<\/span> .\/backend:\/code<\/span>\r\n    ports<\/span>:<\/span>\r\n      -<\/span> \"<\/span>8000:8000\"<\/span>\r\n<\/code><\/pre>\n
$ <\/span>docker-compose up\r\n<\/code><\/pre>\n
\u4f7f\u7528\u672c\u94fe\u63a5http:\/\/localhost:8000\/api\/\uff0c\u5373\u53ef\u8bbf\u95ee\u540e\u7aef\u5bb9\u5668\u7684 DRF \u89c6\u56fe\u3002
\n\u5982\u679c\u4f7f\u7528 DockerToolbox\uff0c\u8bf7\u4f7f\u7528 Docker \u4e3b\u673a\u7684 IP \u5730\u5740\u8fdb\u884c\u8bbf\u95ee\u3002<\/p>\n
\u5c06\u524d\u7aef\u4ee3\u7801\u5bb9\u5668\u5316<\/h3>\n
\u63a5\u4e0b\u6765\u5c06\u524d\u7aef\u90e8\u5206\u8fdb\u884cDocker\u5316\u3002<\/p>\n
\u53c2\u8003\u9875\u9762:
\nDocker\u5316React\u5e94\u7528\u7a0b\u5e8f
\n\u4f7f\u7528Docker Compose\u3001Django\u548cCreate React App\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f
\n\u5728\u5f00\u53d1\u548c\u751f\u4ea7\u4e2d\u4f7f\u7528Docker\u6765\u8fd0\u884cNode.js<\/p>\n
\u524d\u7aef\u662f\u7528React\u6784\u5efa\u7684\u3002\u5982\u4f55\u5c06\u5176Docker\u5316\u6bd4\u8f83\u597d\u5462\uff1f
\n\u6211\u4eec\u53ef\u4ee5\u50cf\u540e\u7aef\u4e00\u6837\uff0c\u5728\u524d\u7aef\u76ee\u5f55\u4e2d\u521b\u5efa\u4e00\u4e2aDockerfile\u3002<\/p>\n
type <\/span>nul ><\/span> frontend\\D<\/span>ockerfile\r\n<\/code><\/pre>\n
# frontend\/Dockerfile<\/span>\r\nFROM<\/span> node:12.2.0-alpine<\/span>\r\n\r\nRUN <\/span>mkdir<\/span> \/code\r\nWORKDIR<\/span> \/code<\/span>\r\n\r\n# Install dependencies<\/span>\r\nCOPY<\/span> package.json \/code\/<\/span>\r\nCOPY<\/span> package-lock.json \/code\/<\/span>\r\nRUN <\/span>npm install<\/span>\r\n\r\n# Add rest of the client code<\/span>\r\nCOPY<\/span> . \/code\/<\/span>\r\n\r\nEXPOSE<\/span> 3000<\/span>\r\n\r\n<\/code><\/pre>\n
\u60a8\u53ef\u4ee5\u4f7f\u7528 package.json \u5728 node \u5bb9\u5668\u5185\u6784\u5efa\u76f8\u540c\u7684\u73af\u5883\u3002
\n\u5c06 frontend \u670d\u52a1\u6dfb\u52a0\u5230 docker-compose.yml \u6587\u4ef6\u4e2d\u3002<\/p>\n
# docker-compose.yml<\/span>\r\nversion<\/span>:<\/span> \"<\/span>3.7\"<\/span>\r\n\r\nservices<\/span>:<\/span>\r\n  backend<\/span>:<\/span>\r\n    build<\/span>:<\/span> .\/backend\/.<\/span>\r\n    volumes<\/span>:<\/span>\r\n      -<\/span> .\/backend:\/code<\/span>\r\n    ports<\/span>:<\/span>\r\n      -<\/span> \"<\/span>8000:8000\"<\/span>\r\n    stdin_open<\/span>:<\/span> true<\/span>\r\n    tty<\/span>:<\/span> true<\/span>\r\n    command<\/span>:<\/span> python \/code\/manage.py runserver 0.0.0.0:8000<\/span>\r\n    environment<\/span>:<\/span>\r\n      -<\/span> CHOKIDAR_USEPOLLING=true<\/span>\r\n  frontend<\/span>:<\/span>\r\n    build<\/span>:<\/span> .\/frontend\/.<\/span>\r\n    volumes<\/span>:<\/span>\r\n      -<\/span> .\/frontend:\/code<\/span>\r\n      -<\/span> \/code\/node_modules<\/span>\r\n    ports<\/span>:<\/span>\r\n      -<\/span> \"<\/span>3000:3000\"<\/span>\r\n    command<\/span>:<\/span> npm start<\/span>\r\n    stdin_open<\/span>:<\/span> true<\/span>\r\n    tty<\/span>:<\/span> true<\/span>\r\n    environment<\/span>:<\/span>\r\n      -<\/span> CHOKIDAR_USEPOLLING=true<\/span>\r\n      -<\/span> NODE_ENV=development<\/span>\r\n    depends_on<\/span>:<\/span>\r\n      -<\/span> backend<\/span>\r\n<\/code><\/pre>\n
\u5728\u5c06CHOKIDAR_USEPOLLING=true\u6dfb\u52a0\u5230\u73af\u5883\u53d8\u91cf\u4e4b\u540e\uff0c\u4e0d\u9700\u8981\u91cd\u65b0\u6784\u5efa\u56fe\u50cf\uff0c\u5c31\u53ef\u4ee5\u5b9e\u73b0\u70ed\u52a0\u8f7d\u3002<\/p>\n
\u7531\u4e8e\u524d\u7aef\u90e8\u5206\u7684 node_modules \u76ee\u5f55\u975e\u5e38\u5e9e\u5927\uff0c\u56e0\u6b64\u5728\u6302\u8f7d\u6216\u590d\u5236\u65f6\u4f1a\u82b1\u8d39\u5927\u91cf\u65f6\u95f4\u3002
\n\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u6dfb\u52a0 .dockerignore \u6587\u4ef6\uff0c\u4ee5\u786e\u4fdd\u4e0d\u5728\u955c\u50cf\u6784\u5efa\u4e2d\u4f7f\u7528 node_modules\u3002\uff08\u5bf9\u5417\uff1f\uff09<\/p>\n
$ <\/span>type <\/span>nul ><\/span> frontend\\.<\/span>dockerignore\r\n<\/code><\/pre>\n
\/node_modules\r\n<\/code><\/pre>\n
\u5728\u6267\u884c docker-compose up \u4e4b\u524d<\/h3>\n
\u4f60\u73b0\u5728\u53ef\u4ee5\u4f7f\u7528docker-compose up\u6765\u542f\u52a8\u4e86\uff0c\u4f46\u662f\u5982\u679c\u4f60\u6b63\u5728\u4f7f\u7528docker-toolbox\uff0c\u90a3\u4e48\u4f60\u7684\u7aef\u53e3\u8f6c\u53d1\u4e3b\u673a\u540d\u4e0d\u662flocalhost\u3002\u4f60\u9700\u8981\u5c06\u5176\u66f4\u6539\u4e3a\u4e3b\u673aIP\u3002\u4f7f\u7528docker-machine ls\u547d\u4ee4\u6765\u67e5\u627e\u4f60\u6b63\u5728\u4f7f\u7528\u7684\u4e3b\u673aIP\u3002<\/p>\n
\u540e\u7aef\/\u8bbe\u7f6e.py<\/h4>\n
\u5728\u672c\u5730\u7684\u6d4f\u89c8\u5668\u4e0a\uff0c\u4e3a\u4e86\u4ece\u524d\u7aef\u5bb9\u5668\u8bbf\u95ee\u540e\u7aef\u5bb9\u5668\uff0c\u9700\u8981\u5c06 Docker \u4e3b\u673a\u7684 IP \u5730\u5740\u6dfb\u52a0\u5230 CORS_ORIGIN_WHITELIST\u3002<\/p>\n
# backend\/settings.py\r\n<\/span>\r\nCORS_ORIGIN_WHITELIST<\/span> =<\/span> (<\/span>\r\n    'http:\/\/localhost:3000'<\/span>,<\/span>\r\n    'http:\/\/192.168.99.100:3000'<\/span>,<\/span>  # \u8ffd\u52a0\r\n<\/span>)<\/span>\r\n<\/code><\/pre>\n
\u524d\u7aef\/src\/App.js<\/h4>\n
API\u7684\u7ec8\u7aef\u70b9\u5c06\u662fDocker\u4e3b\u673a\u7684IP\u5730\u5740\u3002\u5728\u8fd9\u91cc\u6211\u4eec\u4f7f\u7528192.168.99.100:8000\u4f5c\u4e3a\u793a\u4f8b\u3002<\/p>\n
\/\/ src\/App.js<\/span>\r\n\r\nimport<\/span> React<\/span>,<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> axios<\/span> from<\/span> \"<\/span>axios<\/span>\"<\/span>;<\/span>\r\nimport<\/span> \"<\/span>.\/App.css<\/span>\"<\/span>;<\/span>\r\n\r\nclass<\/span> App<\/span> extends<\/span> Component<\/span> {<\/span>\r\n  state<\/span> =<\/span> {<\/span>\r\n    todos<\/span>:<\/span> []<\/span>\r\n  };<\/span>\r\n\r\n  componentDidMount<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>getTodos<\/span>();<\/span>\r\n  }<\/span>\r\n\r\n  getTodos<\/span>()<\/span> {<\/span>\r\n    axios<\/span>\r\n      .<\/span>get<\/span>(<\/span>\"<\/span>http:\/\/192.168.99.100:8000\/api\/<\/span>\"<\/span>)<\/span> \/\/\u5909\u66f4<\/span>\r\n      .<\/span>then<\/span>(<\/span>res<\/span> =><\/span> {<\/span>\r\n        this<\/span>.<\/span>setState<\/span>({<\/span> todos<\/span>:<\/span> res<\/span>.<\/span>data<\/span> });<\/span>\r\n      })<\/span>\r\n      .<\/span>catch<\/span>(<\/span>err<\/span> =><\/span> {<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>err<\/span>);<\/span>\r\n      });<\/span>\r\n  }<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>h1<\/span>><\/span>mother<\/span> fucker<\/span>!!<\/span>??<\/span> <<\/span>\/h1<\/span>>\r\n<\/span>        {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>todos<\/span>.<\/span>map<\/span>(<\/span>item<\/span> =><\/span> (<\/span>\r\n          <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>item<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n            <<\/span>h1<\/span>><\/span>{<\/span>item<\/span>.<\/span>title<\/span>}<\/span><<\/span>\/h1<\/span>>\r\n<\/span>            <<\/span>p<\/span>><\/span>{<\/span>item<\/span>.<\/span>body<\/span>}<\/span><<\/span>\/p<\/span>>\r\n<\/span>          <<\/span>\/div<\/span>>\r\n<\/span>        ))}<\/span>\r\n      <<\/span>\/div<\/span>>\r\n<\/span>    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> App<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u8fd0\u884cdocker-compose<\/h3>\n
\u5728\u5305\u542bdocker-compose.yml\u6587\u4ef6\u7684\u76ee\u5f55\u4e0b\u8fd0\u884cdocker-compose up\u3002<\/p>\n
$ <\/span>docker-compose up --build<\/span>\r\n<\/code><\/pre>\n
React\u7f16\u8bd1\u9700\u8981\u82b1\u8d39\u4e00\u5b9a\u7684\u65f6\u95f4\u3002<\/p>\n
\u5982\u679c\u80fd\u591f\u542f\u52a8\u7684\u8bdd\uff0c\u8bbf\u95eehttp:\/\/localhost:3000\uff0c\u5e94\u8be5\u53ef\u4ee5\u5728\u672c\u5730\u770b\u5230\u4e0e\u4e4b\u524d\u663e\u793a\u7684\u5185\u5bb9\u76f8\u540c\u3002<\/p>\n
\u7136\u540e\u5c06GKE<\/h3>\n
\u5982\u679c\u53ef\u4ee5\u7684\u8bdd\uff0c\u6211\u4f1a\u6dfb\u52a0\u7684\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u76ee\u6807 \u6211\u5e0c\u671b\u672a\u6765\u80fd\u591f\u5728Docker\u73af\u5883\u4e2d\u5c06Django\u548cReact\u534f\u540c\u5de5\u4f5c\uff0c\u90e8\u7f72\u5230Google Kuberne […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-49692","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528docker\u6784\u5efadjangoreact\u7684\u5f00\u53d1\u73af\u5883\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883\" \/>\n<meta property=\"og:description\" content=\"\u76ee\u6807 \u6211\u5e0c\u671b\u672a\u6765\u80fd\u591f\u5728Docker\u73af\u5883\u4e2d\u5c06Django\u548cReact\u534f\u540c\u5de5\u4f5c\uff0c\u90e8\u7f72\u5230Google Kuberne […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528docker\u6784\u5efadjangoreact\u7684\u5f00\u53d1\u73af\u5883\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-20T21:09:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T06:39:19+00:00\" \/>\n<meta name=\"author\" content=\"\u6587, \u7fd4\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6587, \u7fd4\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/\",\"name\":\"\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-06-20T21:09:07+00:00\",\"dateModified\":\"2024-04-29T06:39:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\",\"name\":\"\u6587, \u7fd4\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"caption\":\"\u6587, \u7fd4\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528docker\u6784\u5efadjangoreact\u7684\u5f00\u53d1\u73af\u5883\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883","og_description":"\u76ee\u6807 \u6211\u5e0c\u671b\u672a\u6765\u80fd\u591f\u5728Docker\u73af\u5883\u4e2d\u5c06Django\u548cReact\u534f\u540c\u5de5\u4f5c\uff0c\u90e8\u7f72\u5230Google Kuberne […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528docker\u6784\u5efadjangoreact\u7684\u5f00\u53d1\u73af\u5883\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-06-20T21:09:07+00:00","article_modified_time":"2024-04-29T06:39:19+00:00","author":"\u6587, \u7fd4","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6587, \u7fd4","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"10 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/","name":"\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-06-20T21:09:07+00:00","dateModified":"2024-04-29T06:39:19+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528Docker\u6784\u5efaDjango+React\u7684\u5f00\u53d1\u73af\u5883"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c","name":"\u6587, \u7fd4","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","caption":"\u6587, \u7fd4"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8docker%e6%9e%84%e5%bb%badjangoreact%e7%9a%84%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=49692"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49692\/revisions"}],"predecessor-version":[{"id":85873,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49692\/revisions\/85873"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=49692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=49692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=49692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}