目的

nginxで静的なコンテンツを分離してみる

本編

前回まで

PythonのフレームワークFlaskを使用してWebアプリ作成の物語（４）DBに接続して操作してみよう

フォルダ構成

.
├── README.md
├── client
│   ├── css
│   │   └── index.css
│   ├── html
│   │   └── index.html
│   └── js
│       └── index.js
├── docker-compose.yml
├── nginx
│   ├── Dockerfile
│   └── nginx.conf
├── postgresql
│   └── init
│       ├── 1_create_db.sql
│       └── 2_create_table.sh
├── requirements.txt
├── src
│   ├── UserModel.py
│   ├── __pycache__
│   │   ├── UserModel.cpython-36.pyc
│   │   └── setting.cpython-36.pyc
│   ├── main.py
│   └── setting.py
└── test.http

編集or追加分

.
├── README.md
├── client
│   ├── css
│   │   └── index.css
│   ├── html
│   │   └── index.html
│   └── js
│       └── index.js
├── docker-compose.yml
├── nginx
│   ├── Dockerfile
│   └── nginx.conf
└── requirements.txt

nignxって何？？

説明をすると本筋から外れてしまいそうなので、ざっくりと知っておいて欲しいことを並べておく

エンジンエックスって読むよ
フリーかつオープンソースなWebサーバ
今回は静的なコンテンツ(HTML、画像など)を配信するために使用している
他にも負荷分散の機能とかがあるよ
よく比較されるのがApache

使用すると何が嬉しいの？？

今までの記事の構成は下記のようになります。

この構成だと、Flaskは大きく分けて2つのタスクを行うことになります。

ユーザとのやりとりで静的コンテンツの配信
アプリケーション内部の処理とDBとのやりとり

静的なコンテツの配信をnginxにお願いすることで、flaskはアプリケーションの内部の実装のみに専念させることができます。

今回の記事の構成は以下の様になります。

nginxコンテナの準備

nginxを準備していきます。今回はDockerを使用してサクッと終わらせましょう。

dockerfileの準備から始めましょう
ファイルの中身は
nginxのイメージを取得して、起動のコマンドを記述しているのみ


FROM nginx
CMD ["nginx", "-g", "daemon off;", "-c", "/etc/nginx/nginx.conf"]

nginxの設定ファイルを用意します。
設定ファイルの書き方は、他のサイトにお願いすることにして
ここでは、ページの配信に必要な箇所にのみコメントをしてあります。

nginx/nginx.conf


user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;

    keepalive_timeout  75;

    # サーバの設定
    server {
        listen 80;
        charset utf-8;

        # localhostでアクセスした際に最初に表示されるページを設定
        location /{
            root   /var/www/html;
            index  index.html;
        }

        # サーバに含めるファイルの拡張子を指定している
        location ~ .*\.(js|JS|css|CSS)$ {
        root    /var/www;
        }

    }
}

docker-composeを編集します。
追加したのは、nginxの箇所のみ。

docker-compose.yml

version: "3"

services:

  postgresql:
    image: postgres:10.5
    container_name: flask_tutorial_postgresql
    ports:
      - 5432:5432
    volumes:
      - ./postgresql/init/:/docker-entrypoint-initdb.d
      - /Users/${USER}/Volumes/flask_tutorial/postgres:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_INITDB_ARGS: "--encoding=UTF-8"
    hostname: postgres
    user: root
    environment:
      TZ: "Asia/Tokyo"
    
  pgadmin4:
    image: dpage/pgadmin4:3.3
    container_name: flask_tutorial_pgadmin4
    ports:
      - 5050:80
    volumes:
      - ./pgadmin:/var/lib/pgadmin
    environment:
      PGADMIN_DEFAULT_EMAIL: ${PGADMIN_DEFAULT_EMAIL}
      PGADMIN_DEFAULT_PASSWORD: ${PGADMIN_DEFAULT_PASSWORD}
    depends_on:
          - postgresql
    hostname: pgadmin4

  nginx:
    build: ./nginx
    container_name: flask_tutorial_nginx
    volumes:
      - ./client/:/var/www/
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80
    environment:
      TZ: "Asia/Tokyo"

静的コンテンツの準備

簡単なページを用意してあげました。

client/html/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>flask</title>
    <link rel="stylesheet" href="../css/index.css">
  </head>
  <body>
    <header class="header" id="float-menu">
      <h1>Flask Tutorial</h1>
    </header>
    <main>
      <section>
        <h2>nginxの利用</h2>
        <p>nginxを静的なコンテンツのWebサーバとして使用しているよ</p>
        <section>
            <h2>flaskと通信</h2>
            <p>ユーザ名</p>
            <input type="text" id="user_name">
            <button id="check">確認</button>
            <button id="register">登録</button>
            <p id="message"></p>
      </section>
    </main>
    <script type="text/javascript" src="../js/index.js"></script>
  </body>
</html>

コンテナ起動

ここまで準備ができたら

docker-compose up -dでコンテナを立ち上げて

ブラウザ上からhttp://localhost/にアクセス

次回

非同期通信でflaskに問い合わせをしてみよう