web-dev-qa-db-ja.com

静的ファイルへの正しいパスを取得して、nginxを介してそれらを提供する

Flask Webアプリケーションの静的ファイルをNginxとGunicornを介して提供する方法を理解するのに問題があります。オンラインで見たすべてのドキュメントで、クライアントが静的フォルダーエイリアスにパスを追加すると、静的ファイルのリクエストです。ただし、アプリがHerokuでホストされているため、フルパスがどうなるかわかりません。静的ファイルへのすべてのリクエストで404エラーが返されます。また、ディレクトリに保存されているJSONファイルへのXHRリクエストにも気づきました道 /static/json/<file>.jsonは、成功してもJSONオブジェクトを返しません。

プロジェクト階層:

project/
|_ config/
   |_ gunicorn.conf.py
   |_ nginx.conf.erb
|_ flask_app/
   |_ __init__.py
   |_ static/
      |_ css/
      |_ js/
      |_ images/
      |_ json/
|_ Procfile
|_ run.py

project/config/gunicorn.conf.py:

def when_ready(server):
    open('/tmp/app-initialized', 'w').close()

bind = 'unix:///tmp/nginx.socket'

project/config/nginx.conf.erb:

daemon off;
#Heroku dynos have at least 4 cores.
worker_processes <%= ENV['NGINX_WORKERS'] || 4 %>;

events {
    use epoll;
    accept_mutex on;
    worker_connections <%= ENV['NGINX_WORKER_CONNECTIONS'] || 1024 %>;
}

http {
    server_tokens off;

    log_format l2met 'measure#nginx.service=$request_time request_id=$http_x_request_id';
    access_log <%= ENV['NGINX_ACCESS_LOG_PATH'] || 'logs/nginx/access.log' %> l2met;
    error_log <%= ENV['NGINX_ERROR_LOG_PATH'] || 'logs/nginx/error.log' %>;

    include mime.types;
    default_type application/octet-stream;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    #Must read the body in 5 seconds.
    client_body_timeout 5;

    upstream app_server {
        server unix:/tmp/nginx.socket fail_timeout=0;
    }

    server {
        listen <%= ENV["PORT"] %>;
        server_name _;
        keepalive_timeout 5;

        # Configure NGINX to deliver static content from the specified folder
      location /static {
        alias /static;
      }

        location / {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_Host;
            proxy_redirect off;
            proxy_pass http://app_server;
        }
    }
}

プロジェクト/ Procfile

web: bin/start-nginx gunicorn -c config/gunicorn.conf.py 'run:create_app()'
worker: python worker.py
clock: python clock.py

example.js

export function getData() {
  $.ajax({
    type: 'GET',
    url: '/static/json/data.json',
    async: false,
    success : function(data) {
      currentPageIndex = 0;
      numberOfPages = data.length; // Getting undefined error here on "data"
    }
  });
}
2
nenur

特定の構成では、静的コンテンツをホストする方法が(少なくとも)2つあります。以下の2つの選択肢のどちらを決定したかは明確ではありません-どういうわけか両方を取得したいという印象がありますか?

  1. 私はあなたが読んだと確信しています https://flask.palletsprojects.com/en/1.1.x/tutorial/static/ 言う

    Flaskは、flaskr/staticディレクトリからの相対パスを取得して提供する静的ビューを自動的に追加します。

    [〜#〜] url [〜#〜]は、flask [〜#〜] spa [〜#〜] 後ろにstaticが追加されます。例を参照してください Link to Flask url_forの静的ファイル =または https://flask.palletsprojects.com/en/1.1.x/quickstart/#url-building

    静的コンテンツのファイルの場所は、フラスコアプリディレクトリ内の/staticになります。

  2. また注意してください Flaskで静的ファイルを提供する方法

    推奨される方法は、静的ファイルを提供するためにnginxまたは別のWebサーバーを使用することです。彼らはFlaskよりも効率的にそれを行うことができるでしょう。

    この場合、 静的コンテンツの提供に関するNginxドキュメント があなたの友達です:

    [〜#〜] url [〜#〜]は単にwww.example.com/whateverHerokuPutsHere/staticになります。

    ファイルの場所nginx.conf内で指定したものにすることができます。通常、そこに絶対パスを配置します。

    免責事項:herok を使用したことがないため、実際にwhateverHerokuPutsHereが存在するかどうかわかりません。 HerokuのUIのどこかで設定する場合、単にexample.comである可能性もあります。ファイルの場所について、私は Herokuの静的サイトサーバーとしてのブログNginx を見つけました。

0
B--rian