Docker上で構築したDjangoコンテナで簡単にWebサイトを作成する際、フレームワークの「Bootstrap」を使用する方法をまとめました。
トップページで「Hello, world!」のページが表示されるまでの手順となります。
をチェック
エンジニア必見！ 技術力を伸ばすVPS徹底比較
>>>「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反映までの初歩的な手順ですが以上となります。
ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ（VPS）を利用しましょう！
実務経験はVPSで学べます。
コメント