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

Honokaを使ってみる

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

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

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

index.pyを変更

[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)

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

Apacheの再起動

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

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

CSS、JavaScriptを読み込む

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

# 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/<filename>')
def css_dir(filename):
    """ set css dir """
    return static_file(filename, root=BASE_DIR + "/static/assets/css")


@route('/assets/js/<filename>')
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)

ファイルをアップロードします
/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に追記します

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