ホーム >  Python >  VagrantのDjangoで作るWebアプリケーション(その6 Bootstrapのインストール)


Posted:2017/07/13 9:00:09 AM|Category : Python

VagrantのDjangoで作るWebアプリケーション(その6 Bootstrapのインストール)

今回は、Django環境内でBootstrapを利用します。

DjangoでBootstrapを利用する

Bootstrapは、CSSフレームワークです。Bootstrapを利用すると、最低限のhtml記述だけで見栄えが整ったWebページを作成することができます。Djangoには、Bootsrapを操作するための「django-bootstrap-form」というPythonパッケージがあります。

作業の流れ

  1. Bootstrapをダウンロードします。
  2. Bootstrapで利用するjQueryをダウンロードします。
  3. jQueryのファイルを、さきほどダウンロードしたboostrapディレクトリに移動します。
  4. Bootstrapディレクトリ配下の全ファイルを、pj1/app1/staticへ移動させます。
  5. DjangoからBootsrapを操作するdjango-bootstrap-formパッケージをインストールします。
  6. pj1/pj1/settings.pyにdjango-bootstrap-formを追記します。

準備

Vagrantでゲスト環境(仮想環境)を作ります。ゲスト環境の中にDjangoを構築します。その前に、以下の作業を終わらせましょう。

①Virtualboxをインストールします。Virtualboxのインストールまでで結構です。

VirtualBoxをインストールする for Ubuntu

②Vagrantをインストールします。centos7環境を作りますので、Vagrantのインストールのみ済ませてください。

Vagrantをインストールしてテスト環境を作る for Ubuntu

③Vagrantにcentos7環境を作ります。

VagrantでCentOS7 + Python + Django環境を作る(その1 仮想環境作成)

④VagrantにPython3をインストールし、「pyenv + virtalenv」を作ります。

VagrantでCentOS7 + Python + Django環境を作る(その2 Pythonとpyenv + virtalenv)

⑤VagrantにMariaDBをインストールして、DBを構築します。

VagrantでCentOS7 + Python + Django環境を作る(その3 MariaDB)

⑥VagrantにWebアプリケーションサーバーのnginxをインストールします。

VagrantでCentOS7 + Python + Django環境を作る(その4 nginx)

⑦VagrantにDjangoをインストールします。

VagrantでCentOS7 + Python + Django環境を作る(その5 Django + uWSGI)

⑧VagrantにDjangoプロジェクト生成します。

VagrantでDjangoで作るWebアプリケーションを作る(その1 プロジェクト生成)

⑨生成したプロジェクトを初期設定します。また、データベースを初期化します。

VagrantでDjangoで作るWebアプリケーションを作る(その2 プロジェクトの初期設定)

⑩アプリケーションを生成し、モデルを作成します。

VagrantでDjangoで作るWebアプリケーションを作る(その3 アプリケーション・モデルの作成)

⑪必要であれば、DBのレコード情報を外部へ出力します。

VagrantでDjangoで作るWebアプリケーションを作る(その4 レコード情報を出力)

⑫DjangoのアプリケーションディレクトリのViewを定義します。

VagrantのDjangoで作るWebアプリケーション(その5 Viewの作成)

ホスト環境

OS Ubuntu 16.04.1 LTS 64bit
Virtualbox 5.1
Vagrant 1.9.5

ゲスト環境

OS CentOS 7.1.1503
Python 3.6.1
pip 9.0.1
Web フレームワーク Django 1.11.2
データベース MariaDB 5.5.52-1.el7.x86_64
Webサーバ nginx 1.13.2
uWSGI 2.0.15
Bootstrap bootstrap-4.0.0-alpha.6-dist
django-bootstrap-form 3.2.1

Vagrantへログイン

①【ホスト環境】端末を開き、前回構築したVagrantのディレクトリまで移動します。

cd vagrant/django_apps/

②【ホスト環境】仮想マシンを起動します。

vagrant up

③【ホスト環境】ログインします。

vagrant ssh

firewall停止

①デフォルトで用意されているindex.htmlにHTTPアクセスできるか確認するため、firewalldを停止状態にします。

sudo systemctl stop firewalld
sudo systemctl disable firawalld

pyvenvで作成した仮想環境にログイン

前回、pyenvで仮想環境「venv_app1」を作成しました。ここにログインします。

①【ホスト環境】Vagrantの中の「venv_app1」ディレクトリまで移動します。

cd /vagrant/django_apps/venv_app1/

②【ゲスト環境】「venv_app1」を有効化します。

source ./bin/activate

以下のようなプロンプトが表示されれば有効化成功です。

(venv_app1) [vagrant@localhost venv_app1]$ 

Bootstrapのインストール

①以下のディレクトリに移動します。

cd /vagrant/django_apps/

②Bootstrapをダウンロードします。

sudo wget https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.6/bootstrap-4.0.0-alpha.6-dist.zip

③unzipパッケージをインストールします。

sudo yum install -y unzip

④bootstrapの圧縮ファイルを解凍します。

sudo unzip bootstrap-4.0.0-alpha.6-dist.zip

正しく展開されると、下記のようなディレクリ構成になっています。

bootstrap-4.0.0-alpha.6-dist
|-- css
|   |-- bootstrap-grid.css
|   |-- bootstrap-grid.css.map
|   |-- bootstrap-grid.min.css
|   |-- bootstrap-grid.min.css.map
|   |-- bootstrap-reboot.css
|   |-- bootstrap-reboot.css.map
|   |-- bootstrap-reboot.min.css
|   |-- bootstrap-reboot.min.css.map
|   |-- bootstrap.css
|   |-- bootstrap.css.map
|   |-- bootstrap.min.css
|    -- bootstrap.min.css.map
|-- js
    |-- bootstrap.js
     -- bootstrap.min.js

⑤Bootstrapで利用するJavaScriptライブラリであるjQueryをダウンロードします。

sudo wget https://code.jquery.com/jquery-3.2.1.min.js

⑥jQueryのファイルを、さきほどダウンロードしたboostrapの「bootstrap-4.0.0-alpha.6-dist/js/」に移動します。

mv jquery-3.2.1.min.js bootstrap-4.0.0-alpha.6-dist/js/

⑦「pj1/app1」のアプリケーションディレクトリ配下に「static」ディレクトリを新規作成します。

mkdir pj1/app1/static

⑧bootstrap-4.0.0-alpha.6-distディレクトリ配下の全ファイルをstaticへ移動させます。

mv bootstrap-4.0.0-alpha.6-dist/* pj1/app1/static/

⑨DjangoからBootsrapを操作するために django-bootstrap-formというPythonパッケージをインストールします。

pip install django-bootstrap-form

⑩インストールできたか確認します。

pip list

以下のような結果が出ました。

Django (1.11.2)
django-bootstrap-form (3.2.1)
mysqlclient (1.3.10)
pip (9.0.1)
pytz (2017.2)
setuptools (28.8.0)
uWSGI (2.0.15)

⑪pj1/setting.pyのINSTALLED_APPSに、django-bootstrap-formを追記します。

vi pj1/pj1/settings.py

以下のように変更します。

# Application definition

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

    'bootstrapform',

    #アプリケーション名を追記
    'app1'
]

次回

次回はDjangoにテンプレートを作成します。

VagrantのDjangoで作るWebアプリケーション(その7 テンプレート作成)


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告