【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反映までの初歩的な手順ですが以上となります。

「Udemy」でDockerコースを格安で購入

Dockerを構築するならVPSがおすすめです。

現役エンジニアがおすすめするVPSレンタルサーバ比較（高速SSD限定）

エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

オンライン学習の比較はこちらから

おすすめオンライン教材
Udemy
自宅で学習ができるオンラインスクール
【テックアカデミー】無料キャリアカウンセリング詳細へ