介绍

DigitalOcean Spaces是一种对象存储解决方案,非常适合非结构化数据,例如音频,视频,图像或大量文本。要了解有关空间和对象存储的更多信息,请阅读DigitalOcean Spaces简介。

在本教程中,我们将介绍如何设置Django应用程序以与Spaces一起使用。

先决条件

为了开始本教程,您应该进行一些设置:

  • 在Debian或Ubuntu Linux服务器上设置的具有sudo特权的非root用户帐户。如果尚未进行设置,请遵循Ubuntu 16.04或Debian教程的初始服务器设置。
  • 此外,您应该创建一个DigitalOcean Space并生成一个API密钥。有关此方面的指导,您可以按照本教程创建一个Space并设置API密钥。

设置好初始服务器并使用DigitalOcean Space和API密钥后,就可以开始了。

步骤1 —设置虚拟环境

如果尚未安装,请先更新和升级服务器。

  • sudo apt-get update && sudo apt-get -y upgrade

您的服务器应随附Python 3,但您可以运行以下命令以确保已安装该服务器:

  • sudo apt-get install python3

接下来,安装pip以管理适用于Python的软件包:

  • sudo apt-get install -y python3-pip

最后,我们可以安装virtualenv模块,以便可以使用它来设置编程环境:

sudo pip3 install virtualenv

有关编程环境的其他指导和信息,您可以阅读有关设置虚拟环境的信息。

第2步-创建Django应用并安装依赖项

现在,我们将继续创建将利用我们的DigitalOcean Space的Django应用。

在服务器的主目录中,运行以下命令来创建目录(在本例中,我们将其命名为django-apps)来保存项目并导航至该目录:

  • mkdir django-apps
  • cd django-apps

在此目录中,使用以下命令创建虚拟环境。我们将其称为env,但是您可以随心所欲地调用它。

  • virtualenv env

现在,您可以激活环境,并且通过更改命令行前缀可以收到有关您所处环境的反馈。

. env/bin/activate

通过更改命令行前缀,您将收到有关您所处环境的反馈。它看起来像这样,但是会根据您所在的目录而变化:

在环境中,使用pip安装Django软件包,以便我们可以创建和运行Django应用。要了解有关Django的更多信息,请阅读我们有关Django开发的系列教程。

  • pip install django

然后使用以下命令创建项目,在这种情况下,我们将其称为mysite。

  • django-admin startproject mysite

接下来,我们将安装Boto 3,这是一个适用于Python的AWS开发工具包,它将使我们的应用程序可以与S3,EC2和DigitalOcean Spaces等事物进行交互。由于DigitalOcean Spaces可与Amazon S3互操作,因此Spaces可以轻松地与Boto 3等工具进行交互。有关S3和Spaces之间比较的更多详细信息,请查看Spaces文档。

  • sudo pip install boto3

另一个对我们的项目至关重要的库是django-storages,它是Django的自定义存储后端的集合。我们还将使用pip安装它。

  • sudo pip install django-storages

您已经在Django应用程序的环境中设置了依赖项,现在可以设置静态目录和模板目录了。

步骤3 —添加目录和资产

在我们的环境中设置了所有依赖项之后,您现在可以切换到mysite / mysite目录,

  • cd ~/django-apps/mysite/mysite

Within the mysite/mysite directory, run the following commands to create the static and template directories.

  • mkdir static && mkdir templates

接下来,我们将创建图像和CSS的子目录,使其位于静态目录中。

  • mkdir static/img && mkdir static/css

建立目录后,我们将下载一个测试文件,最终将其添加到对象存储中。由于我们将下载图片,请切换到img目录。

  • cd ~/django-apps/mysite/mysite/static/img

在此目录中,我们将使用Wget的wget命令下载DigitalOcean徽标图像。这是一个常用的GNU程序,预装在Ubuntu发行版上,用于从Web服务器检索内容。

  • wget http://assets.digitalocean.com/logos/DO_Logo_icon_blue.png

您将看到类似于以下的输出:

Output
Resolving www.digitalocean.com (www.digitalocean.com)... 104.16.24.4, 104.16.25.4 Connecting to www.digitalocean.com (www.digitalocean.com)|104.16.24.4|:443... connected. HTTP request sent, awaiting response... 200 OK Length: 1283 (1.3K) [image/png] Saving to: ‘DO_Logo_icon_blue.png’ DO_Logo_icon_blue-6edd7377 100%[=====================================>] 1.25K --.-KB/s in 0s 2017-11-05 12:26:24 (9.60 MB/s) - ‘DO_Logo_icon_blue.png’ saved [1283/1283]

此时,如果运行命令ls,您会注意到static / img /目录中现在存在一个名为DO_Logo_icon_blue.png的图像。

设置好这些目录并将图像下载后存储到服务器后,我们可以继续编辑与Django应用程序关联的文件。

第4步-编辑CSS和HTML文件

我们将从编辑样式表开始。您应该进入css目录,以便我们可以为Web应用程序添加基本样式表。

  • cd ~/django-apps/mysite/mysite/static/css

使用nano或您选择的其他文本编辑器来编辑文档。

  • nano app.css

打开文件后,添加以下CSS:

app.css
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container {
  width: 80%;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 20px;
  margin: 40px auto;
}

form {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ff9900;
  width: 350px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table td,
table th {
  border: 1px solid #eceeef;
  padding: 5px 8px;
  text-align: left;
}

table thead {
  border-bottom: 2px solid #eceeef;
}

完成后,您可以保存并关闭文件。从这里,导航到模板目录。

  • cd ~/django-apps/mysite/mysite/templates

我们需要打开一个名为home.html的文件并将HTML添加到其中,以显示基本的Web应用程序。使用nano,打开文件以便可以进行编辑:

  • nano home.html

Within the document, add the following:

home.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Spaces + Django Tutorial</title>
  <link rel="stylesheet" type="text/css" href="{% static 'css/app.css' %}">
</head>
<body>
  <center>
  <header>
    <h1>Spaces + Django Tutorial</h1>
  </header>
  <main>
    <img src="{% static 'img/DO_Logo_icon_blue.png' %}">
    <h2>Congratulations, you’re using Spaces!</h2>
  </main>
  </center>
</body>
</html>

保存并关闭文件。我们将更新的最后一个文件是urls.py文件,以便它指向您新创建的home.html文件。我们需要进入以下目录:

  • cd ~/django-apps/mysite/mysite

使用nano编辑urls.py文件。

  • nano urls.py

您可以删除文件中的所有内容,然后添加以下内容:

urls.py
from django.conf.urls import url
from django.views.generic import TemplateView


urlpatterns = [
    url(r'^$', TemplateView.as_view(template_name='home.html'), name='home'),
]

设置好这些文件后,我们可以继续编辑settings.py文件,以将其与对象存储集成。

步骤5 —更新设置

现在是时候使用您的Spaces凭据更新您的设置文件,以便我们可以利用我们设置的页面来显示图像。

请记住,在此示例中,为了简洁起见,我们将对凭据进行硬编码,但这对于生产设置来说不够安全。建议您使用Python解耦之类的软件包来掩盖您的Spaces凭据。该软件包将设置参数与源代码分开,这对于生产级Django应用程序是必需的。

我们将从导航到您的设置文件的位置开始。

  • cd ~/django-apps/mysite/mysite

使用nano打开文件进行编辑:

  • nano settings.py

将服务器IP添加为允许的主机。

settings.py
...
ALLOWED_HOSTS = ['your-server-ip']
...

然后将存储添加到设置文件的“已安装的应用”部分,并删除django.contrib.admin,因为在本教程中我们将不使用它。它应如下所示。

settings.py
...
# Application definition

INSTALLED_APPS = [
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'storages'
]
...

替换并将突出显示的文本添加到设置文件的TEMPLATES部分中,以便项目知道将home.html文件放在何处。

settings.py
...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'mysite/templates')],
        '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',
            ],
        },
    },
]
...

最后,让我们在文件底部更新您的设置。我们将在“静态文件”部分下面添加以下内容。请确保添加您自己的访问密钥,存储桶名称以及您希望文件存在的目录。您可以通过“空间”界面浏览器添加目录。在撰写本文时,NYC3是当前空格所在的唯一区域,因此将其作为端点URL传递。

settings.py
...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

AWS_ACCESS_KEY_ID = 'your-spaces-access-key'
AWS_SECRET_ACCESS_KEY = 'your-spaces-secret-access-key'
AWS_STORAGE_BUCKET_NAME = 'your-storage-bucket-name'
AWS_S3_ENDPOINT_URL = 'https://nyc3.digitaloceanspaces.com'
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}
AWS_LOCATION = 'your-spaces-files-folder'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'mysite/static'),
]
STATIC_URL = 'https://%s/%s/' % (AWS_S3_ENDPOINT_URL, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

现在,我们的设置文件已准备就绪,可以将Django应用程序与对象存储集成在一起。

步骤6 —收集静态文件

现在,我们将运行collectstatic,您会注意到文件正在传输,包括我们保存在静态目录中的图像。它将转移到我们在设置文件中标识的“ Spaces”位置。

为此,请导航至〜/ django-apps / mysite /:

  • cd ~/django-apps/mysite

在目录中,运行以下命令:

  • python manage.py collectstatic

您将看到以下输出,并在出现提示时回答是。

Output
You have requested to collect static files at the destination location as specified in your settings. This will overwrite existing files! Are you sure you want to do this? Type 'yes' to continue, or 'no' to cancel:

然后,您将看到更多输出,告诉您文件已复制到Spaces。

Output
Copying '/root/django-apps/mysite/mysite/static/css/app.css' 1 static file copied, 1 unmodified.

此时,如果您从DigitalOcean Cloud帐户返回存储桶,您将看到css和img目录添加到您指向它们的文件夹中,其中css目录中有app.css,还有DO-Logo_icon_blue-。 img目录中的png图片。

第7步-测试应用程序

完成所有设置并将文件保存在对象存储中后,我们现在可以通过导航到提供静态文件的页面来测试我们的应用程序。

首先,通过发出以下命令,确保防火墙将允许流量通过端口8000:

  • sudo ufw allow 8000

现在,我们可以通过参考服务器的IP地址并使用端口8000来运行服务器。

  • python manage.py runserver your-server-ip:8000

在网络浏览器中,导航至http:// your-server-ip:8000以查看您创建的Django应用程序的结果。您将在浏览器中看到以下输出:

测试完应用程序后,可以按CTRL + C停止runserver命令。这将使您返回到编程环境。

当您准备离开Python环境时,可以运行deactivate命令:

  • deactivate

停用编程环境将使您返回到终端命令提示符。

结论

在本教程中,您已经成功创建了一个Django应用程序,该应用程序可提供DigitalOcean Spaces中的文件。在此过程中,您了解了静态文件,如何管理静态文件以及如何通过云服务为其提供服务。

通过阅读有关Django开发的系列教程,您可以继续学习使用Python和Django进行Web开发的知识。