前回の記事ではnginxのリバースプロキシをしました。jinja2というテンプレートを使ってブラウザで表示できるようにしました。今回はbootstrapを動かしてみたいと思います

Honokaを使ってみる

bootstrapのテンプレートであればなんでも良かったのでHonokaテーマを使ってみたいと思います。

ダウンロードしてアップロード

まずはSFTPなどで、/var/www/html/viewsの中にindex.htmlをアップします

index.pyを変更

[c] [macan@localhost html]$ pwd /var/www/html

coding: utf-8

from bottle import route, run, template from bottle import TEMPLATE_PATH, jinja2_template as template @route('/') def index(): return template('index') if __name__ == '__main__': run(host='0.0.0.0', port=8081, debug=True, reloader=True) [/c]

topのとこをindexに変えました

Apacheの再起動

[c] [macan@localhost html]$ sudo service httpd restart Redirecting to /bin/systemctl restart httpd.service [macan@localhost html]$ [/c]

再起動して更新を押すと、CSSも何も読み込まれていないHTMLが読み込まれます

CSS、JavaScriptを読み込む

CSSやJavaScriptファイルを読み込まないといけないので、index.pyを変更します

[c]

coding: utf-8

import os from bottle import route, run, error from bottle import TEMPLATE_PATH, jinja2_template as template from bottle import static_file #index.pyが設置されているディレクトリの絶対パス取得 BASE_DIR = os.path.dirname(os.path.abspath(__file__)) #テンプレートのディレクトリ指定 TEMPLATE_PATH.append(BASE_DIR + "/views") #CSSファイル @route('/assets/css/') def css_dir(filename): """ set css dir """ return static_file(filename, root=BASE_DIR + "/static/assets/css") @route('/assets/js/') def js_dir(filename): """ set js dir """ return static_file(filename, root=BASE_DIR + "/static/assets/js") @route('/') def index(): return template('index') if __name__ == '__main__': run(host='0.0.0.0', port=8081, debug=True, reloader=True) [/c]

ファイルをアップロードします
/var/www/html
          ├static
          │  └assets
          │    ├css
          │    │ ├bootstrap.css
          │    │ └example.css
          │    └JS
          │      ├bootstrap.bundle.js
          │      ├bootstrap.bundle.min.js
          │      ├bootstrap.js
          │      └bootstrap.min.js
          └views
　　　　　　 └index.html

となります。 ※botleやjinja2など必要なものは↑には書いていないだけで実際には必要です。

index.htmlの修正

修正ソースのみ載せてます

<link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/assets/css/example.css">
/assets/js/bootstrap.min.js

CSSとJSが読み込まれました。JSコード書いたらなぜかimgとかに変換されてしまったのでJSだけは修正したとこのみです

画像を読み込む

/assets/ディレクトリにimgをいれて、index.pyに追記します

[c] @route('/assets/img/') def img_dir(filename): """ set js dir """ return static_file(filename, root=BASE_DIR + "/static/assets/img") [/c]