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'
]