【Docker】構築したDjangoのWebアプリにBootstrapを使用する方法


Docker上で構築したDjangoコンテナで簡単にWebサイトを作成する際、フレームワークの「Bootstrap」を使用する方法をまとめました。

トップページで「Hello, world!」のページが表示されるまでの手順となります。


「Docker」Djangoコンテナで「Bootstrap」を使用した設定手順

今回使用する「Bootstrap」はTwitter社が開発したCSSの「フレームワーク」となります。

この「Bootstrap」は「レスポンシブWebデザイン」に対応している点があり、使用するには大きなメリットとなります。
BootstrapはCSS3のメディアクエリを使用しているので、ブラウザのサイズやレイアウトデザインに調整することが可能です。

Bootstrapダウンロード

まずは、以下からBootstrapのフレームワークをダウンロードします。
https://getbootstrap.jp/

該当のURLへアクセスすると以下の画面が表示されるので、「ダウンロード」をクリックします。

ダウンロードページに移動すると一番上の「Bootstrap」のダウンロードをクリックします。

ダウンロードをクリックするとBootstrapのzipファイルがダウンロードされます。
zipファイルをダウンロードすると以下のように「CSS」と「js」のフォルダがあることがわかります。

BootstrapをDjangoプロジェクトへアップロード

続いてダウンロードした「Bootstrap」のファイルをDjangoのプロジェクト上へアップします。
アップする場所はDjangoプロジェクトで専用で作成した「static」フォルダ配下となります。

今回私のプロジェクトのフォルダで言うと以下のようになります。

Dockerfile
db-data
docker-compose.yml
manage.py
mysite
requirements.txt
ssl_certs
static
|-- 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
|-- index.html
`-- js
    |-- bootstrap.bundle.js
    |-- bootstrap.bundle.js.map
    |-- bootstrap.bundle.min.js
    |-- bootstrap.bundle.min.js.map
    |-- bootstrap.js
    |-- bootstrap.js.map
    |-- bootstrap.min.js
    `-- bootstrap.min.js.map

staticフォルダは以下でindex.html作成とページを表示

上記で「static」フォルダ配下へBootstrapのファイルをアップしたのち、簡単なページを作成するために「html」ファイルを作成します。

「static」フォルダで「index.html」作成

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sample</title>
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

上記を作成すると以下のように、index.htmlのファイルが増えます。

$ cd static/
$ ll
total 12
drwxr-xr-x 2 root root 4096 May 18 13:05 css
-rw-r--r-- 1 root root  612 May 18 13:16 index.html
drwxr-xr-x 2 root root 4096 May 18 13:05 js

htmlファイルをDjangoプロジェクトで反映

次に上記で作成したHTMLファイルをDjangoで作成したWebサイトに表示させます。
settings.pyで最後の行にある「STATIC_URL = ‘/static/’」の後に以下の追記をします。

$ vim settings.py

------中略------

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

設定後、いったんdocker-composeをrestartします。

$ docker-compose restart
Restarting https-portal ... done
Restarting django       ... done
Restarting postgres     ... done
$

restartコマンド実施後、ブラウザで以下のアドレスへアクセスし、「Hello, world!」のページが表示されると完了です。

https://IPアドレスordomain/static/index.html

DjangoへのBootstrap反映までの初歩的な手順ですが以上となります。

Docker実践ガイド 第2版 impress top gearシリーズ

Docker実践ガイド 第2版 impress top gearシリーズ

古賀 政純
3,762円(07/11 15:07時点)
発売日: 2019/02/18
Amazonの情報を掲載しています


関連記事


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

blank

インターネット関連のSEをやっています。 ネットワーク、サーバー、ストレージ、仮想基盤まで幅広く手を出しており、MVNOの構築経験もあります。 現在は、Pythonを使ったプログラミングの開発をしネットワークの自動化ツールを作成しています! Pythonの入門書も作成しているので、ぜひ参考にしてください!