Djangoでサンプルページ作成

環境

  • ホスト
    • OS: Windows 10
    • 仮想化ソフト: Vagrant (VirtualBoxを使用)
  • ゲスト
    • OS: CentOS 7.1
    • IPアドレス（プライベートネットワーク）: 192.168.33.10
  • 使用するソフトウェアのバージョン（本稿でインストール方法を記載しています）
    • Python: 3.5.1
    • Django: 1.10.4

Python3インストール

こちらのサイトを参考にさせていただきました。

$ sudo yum install -y gcc zlib-devel bzip2 bzip2-devel readline readline-devel sqlite sqlite-devel openssl openssl-devel git

$ git clone https://github.com/yyuu/pyenv.git ~/.pyenv

$ vi ~/.bash_profile
# 以下を追加
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"

$ source .bash_profile

$ pyenv install 3.5.1

$ python --version
Python 2.7.5

$ pyenv versions
* system (set by /home/vagrant/.pyenv/version)
3.5.1

$ pyenv global 3.5.1

$ pyenv rehash

$ python --version
Python 3.5.1

$ pyenv versions
system
* 3.5.1 (set by /home/vagrant/.pyenv/version)

Djangoをインストール

$ sudo yum install -y python-pip

$ pip install django

初期ページ表示

$ django-admin startproject mysite

$ cd mysite/

$ vi mysite/settings.py
ALLOWED_HOSTS = ['192.168.33.10',] # 変更

$ python manage.py runserver 0.0.0.0:8000

ブラウザから「192.168.33.10:8000」にアクセスすると下の画像のようなページが表示されます。
initial-page

サンプルページ作成（HTML, CSS, Javascript使用）

$ vi mysite/urls.py
from django.conf.urls import url
from django.contrib import admin
from . import views # 追記

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', views.index, name='index'), # 追記
]

$ vi mysite/views.py
# 以下を作成
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
return render(request, 'index.html')

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

# 以下を追記
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]

$ mkdir templates

$ mkdir static

$ mkdir static/css

$ mkdir static/js

$ vi templates/index.html
# 以下を作成
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Django test page</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script type="text/javascript" src="{% static 'js/sample.js' %}"></script>
</head>
<body>
<h1 id="title">Django test page</h1>
<button type="button" id="button">Click here</button>
</body>
</html>

$ vi static/css/style.css
# 以下を作成
@charset "UTF-8";

body {
text-align: center;
}

$ vi static/js/sample.js
# 以下を作成
window.addEventListener('load',
function (event) {
document.getElementById('button').addEventListener('click',
function() {
alert('Hello');
}
, false);
}
, false);

$ python manage.py runserver 0.0.0.0:8000

再度、ブラウザから「192.168.33.10:8000」にアクセスすると下の画像のようなページが表示されます。
django-test-page