Python - NGINX does not communicate with the flask rest API. docker

NGINX does not communicate with the flask rest API. docker… here is a solution to the problem.

NGINX does not communicate with the flask rest API. docker

NGINX does not communicate with the flask rest API. When I click localhost/api
If I hit localhost, I get the message from index.html, but I don’t get a json response when I hit /api

I want to use NGINX to serve my Angular 5 dist folder.

What is distance?

dist is the folder where all the other files my index.html, main.css and Angular 5 created for me after I ran ng build –prod

What is my problem?

I want to use Angular 5 on the frontend
I want my flask to be my rest API
I want nginx to serve all static files (HTML, CSS, and javascript).

I want the user to enter all the static files that NGINX gives him in the URL ( http://localhost) and have my SPA application specify the location for ROUTES, except for API routes

If the user types (http://localhost/api), I want FLASK to control and provide the JSON response to the user, no matter how I say flask responds

My problem is that when the user clicks ##/api I get a 404 Page Not Found
WTF I’ve set the if is get/api in nginx for flask to take action
Look:

user  nginx;
worker_processes  1;

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;
  #tcp_nopush     on;

keepalive_timeout  65;

gzip  on;

include /etc/nginx/conf.d/*.conf;

# Configuration for the server
  server {

listen 80;
    server_name localhost;

location / {
      root   /usr/share/nginx/html;
      index  index.html;
      expires -1;
      add_header Pragma "no-cache";
      add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
      try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
      proxy_pass  http://localhost:5000/;
    }

# location /api {
    #   proxy_pass          http://flask_api:5000;
    #   proxy_set_header        Host $host;
    # }

}

}

I have a docker-compose file that looks like this :

docker-compose.yml

version: '3'

services:

nginx_demo:
    image: nginx:1.13.7-alpine
    container_name: nginx
    restart: always
    build:
      context: .
      dockerfile: nginx/Dockerfile
    volumes:
     - ./Client/dist:/usr/share/nginx/html
    ports:
      - "80:80"
    depends_on:
      - flask_api

flask_api:
    # image: flask
    container_name: flask_api
    restart: always
    build: ./Server
    volumes:
      - ./Server:/usr/src/app
    ports:
      - "5000:80"

This is in Server/api.py

''' Docker + python 3.6.3 '''

from flask import Flask

app = Flask(__name__)

@app.route('/api')
def hello():
    return 'Hello Form Flask'

if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True)

Here is my log after running docker-compose up

Creating flask_api ...
Creating flask_api ... done
Creating nginx ...
Creating nginx ... done
Attaching to flask_api, nginx
flask_api     |  * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
flask_api     |  * Restarting with stat
flask_api     |  * Debugger is active!
flask_api     |  * Debugger PIN: 718-970-762
nginx         | 172.20.0.1 - - [10/Dec/2017:14:16:53 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36" "-"
nginx         | 172.20.0.1 - - [10/Dec/2017:14:16:55 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36" "-"
nginx         | 172.20.0.1 - - [10/Dec/2017:14:16:56 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36" "-"
nginx         | 2017/12/10 14:16:59 [error] 5#5: *2 open() "/usr/share/nginx/html/api" failed (2: No such file or directory), client: 172.20.0.1, server: localhost, request: "GET /api HTTP/1.1", host: " localhost"
nginx         | 172.20.0.1 - - [10/Dec/2017:14:16:59 +0000] "GET /api HTTP/1.1" 404 571 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36" "-"
nginx         | 172.20.0.1 - - [10/Dec/2017:14:17:01 +0000] "GET /api HTTP/1.1" 404 571 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36" "-"
nginx         | 2017/12/10 14:17:01 [error] 5#5: *2 open() "/usr/share/nginx/html/api" failed (2: No such file or directory), client: 172.20.0.1, server: localhost, request: "GET /api HTTP/1.1", host: " localhost"
nginx         | 2017/12/10 14:17:02 [error] 5#5: *2 open() "/usr/share/nginx/html/api" failed (2: No such file or directory), client: 172.20.0.1, server: localhost, request: "GET /api HTTP/1.1", host: " localhost"
nginx         | 172.20.0.1 - - [10/Dec/2017:14:17:02 +0000] "GET /api HTTP/1.1" 404 571 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36" "-"

Solution

This should work :

docker-compose.yml

# Run docker-compose up

version: '3'

services:
  nginx_demo:
    image: nginx:1.13.7-alpine
    container_name: nginx
    restart: always
    build:
      context: .
      dockerfile: ./Nginx/Dockerfile
    volumes:
      - ./Client/dist:/usr/share/nginx/html
    ports:
      - "80:80"
    depends_on:
      - flask_api
    links:
      - flask_api

flask_api:
    container_name: flask_api
    restart: always
    build:
      context: .
      dockerfile: ./Server/Dockerfile
    volumes:
      - ./Server:/usr/src/app

Nginx/Docker file

FROM nginx:1.13.7-alpine

# remove the old nginx.conf
RUN rm /etc/nginx/nginx.conf

# Copy custom nginx config
COPY ./Nginx/nginx.conf /etc/nginx/nginx.conf
COPY ./Client/dist /usr/share/nginx/html

EXPOSE 80

Server/Dockerfile

FROM python:3.6-alpine

ADD ./Server /app
WORKDIR /app
RUN pip install -r requirements.txt

EXPOSE 5000
CMD ["python", "api.py"]

Nginx/nginx.conf

user  nginx;
worker_processes  1;

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  65;

gzip  on;

# Configuration for the server
  server {

listen 80;

location /api {
      proxy_pass http://flask_api:5000;
    }

location / {
      root   /usr/share/nginx/html;
      index  index.html;
      expires -1;
      add_header Pragma "no-cache";
      add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
      try_files $uri$args $uri$args/ $uri $uri/ =404;
    }

}

}

Python – NGINX does not communicate with the flask rest API. docker

NGINX does not communicate with the flask rest API. docker

docker-compose.yml

This is in Server/api.py

Here is my log after running docker-compose up

Solution

docker-compose.yml

Nginx/Docker file

Server/Dockerfile

Nginx/nginx.conf

Related Problems and Solutions