I want to call my api point in my react application. Here when I access the localhost then my react app opens up but all the api points doest work when I hit "localhost/apipoint". this shows me 404 not found or 502 bad request.
Here is my docker-compose file
version: "3.8"
services:
nodeserver:
build:
context: ./Backend
networks:
- app-network
ports:
- "8082:8082"
frontend:
build:
context: ./Frontend
networks:
- app-network
ports:
- "80:80"
networks:
app-network:
my nginx default.conf
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
location /apipoint {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:8082;
}
location / {
# root /usr/share/nginx/html;
root /var/www/html;
}
}
Hey I am trying to build a root for a personal portfolio. All containers are running except Streamlit. Streamlit should be accessible via mydomain.com/streamlit. Locally everything works without problems. After calling the homepage and running containers I get a white screen.
Streamlit Config:
[server]
headless=true
port=8501
enableCORS=false
enableXsrfProtection=false
enableWebsocketCompression=false
[browser]
serverAddress="0.0.0.0"
serverPort=8501
NGINX Config :
server {
listen 80;
server_name domain.de;
server_tokens off;
client_max_body_size 20M;
include /etc/nginx/mime.types;
location / {
return 301 https://$host$request_uri;
}
}
server {
listen 443 ssl;
server_name domain.de;
ssl_certificate /etc/nginx/certs/ssl-bundle.crt;
ssl_certificate_key /etc/nginx/certs/ss-bundle.key;
server_tokens off;
include /etc/nginx/mime.types;
client_max_body_size 20M;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /streamlit {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 86400;
proxy_pass http://streamlit:8501;
}
location /api {
try_files $uri #proxy_api;
}
location /admin {
try_files $uri #proxy_api;
}
location #proxy_api {
proxy_set_header X-Forwarded-Proto https;
proxy_set_header X-Url-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://backend:8000;
}
location /django_static/ {
autoindex on;
alias /app/backend/django_static/;
}
}
The Docker-Compose file:
version: '2'
services:
nginx:
restart: unless-stopped
build:
context: .
dockerfile: ./docker/nginx/Dockerfile
ports:
- 80:80
- 443:443
volumes:
- static_volume:/app/backend/django_static
- ./docker/nginx/production:/etc/nginx/conf.d
- ./docker/nginx/certs:/etc/nginx/certs
depends_on:
- backend
environment:
- COMPOSE_HTTP_TIMEOUT=200
backend:
restart: unless-stopped
build:
context: .
dockerfile: ./docker/backend/Dockerfile
entrypoint: /app/docker/backend/wsgi-entrypoint.sh
volumes:
- static_volume:/app/backend/django_static
environment:
- POSTGRES_NAME=postgres
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=postgres
- COMPOSE_HTTP_TIMEOUT=200
expose:
- 8000
depends_on:
- db
db:
image: postgres:13.0-alpine
volumes:
- postgres_data:/var/lib/postgresql/data/
ports:
- 5432:5432
environment:
- POSTGRES_USER=hello_django
- POSTGRES_PASSWORD=hello_django
- POSTGRES_DB=hello_django
- DB_ENGINE=django.db.backends.postgresql
- DB_HOST=db
- DB_PORT=5432
- DEBUG=1
redis:
image: redis:6.2
command: redis-server
ports:
- 6379:6379
restart: unless-stopped
environment:
- COMPOSE_HTTP_TIMEOUT=200
streamlit:
build:
context: .
dockerfile: ./docker/streamlit/Dockerfile
ports:
- 8501:8501
environment:
- COMPOSE_HTTP_TIMEOUT=200
entrypoint: /app/docker/streamlit/entrypoint.sh
volumes:
static_volume: {}
postgres_data:
And the Dockerfile for Streamlit:
# docker/streamlit/Dockerfile
FROM python:3.10.5
WORKDIR /app
ADD ./streamlit/portfolio-streamlit-wrapper/requirements.txt /app/streamlit/
RUN pip install --upgrade pip
RUN pip install -r streamlit/requirements.txt
ADD ./docker /app/docker
ADD ./streamlit/portfolio-streamlit-wrapper/ /app/streamlit
EXPOSE 8501
RUN chmod +x /app/docker/streamlit/entrypoint.sh
The whole project builds up normally. I have access to the Django Admin Dashboard and all containers are running. The regular home page is also displayed. Does anyone have any idea what the reason could be that the homepage changes the HTML - title but the streamlit dashboard is not visible?
Edit:
Streamlit is started due an entryscript: Which I cant explain why I created it.
#!/bin/sh
until cd /app/streamlit/
do
echo "Waiting for server volume..."
done
streamlit run welcome.py
I'm creating an application with docker-compose, vue.js, and phoenix/elixir. So far the phoenix application will work on localhost, but will not work when I run the application using docker-compose + NGINX and it's been difficult to debug. Any advice or suggestions would be helpful. The phoenix application itself does not have any of the configuration options changed from the "hello world" application and only adds in socket functionality for a chat room.
Here is the docker-compose file:
version: "3.9"
networks:
main_network:
volumes:
volume1:
varwwwcertbot:
certbotconf:
data_volume:
services:
phx:
build:
context: ./phx
restart: always
volumes:
- ./phx:/phx
ports:
- "4000:4000"
depends_on:
db:
condition: service_healthy
networks:
- main_network
db:
image: postgres
restart: always
volumes:
- ./docker-entrypoint-initdb.d/init.sql:/docker-entrypoint-initdb.d/init.sql
- data_volume:/var/lib/postgresql/data
environment:
- POSTGRES_NAME=dev-postgres
- POSTGRES_USER=pixel
- POSTGRES_DATABASE=lightchan
- POSTGRES_PASSWORD=exploration
ports:
- "5432:5432"
healthcheck:
test: ["CMD-SHELL", "pg_isready -U pixel"]
interval: 5s
timeout: 5s
retries: 20
networks:
- main_network
frontend:
build:
context: ./frontend
restart: always
volumes:
- './frontend:/app'
- '/app/node_modules'
ports:
- "3000:3000"
networks:
- main_network
depends_on:
- "phx"
nginx:
build:
context: ./nginx
restart: always
ports:
- "80:80"
- "443:443"
volumes:
- volume1:/usr/share/nginx/html
- varwwwcertbot:/var/www/certbot
- certbotconf:/etc/letsencrypt
networks:
- main_network
certbot:
image: certbot/certbot:latest
volumes:
- varwwwcertbot:/var/www/certbot
- certbotconf:/etc/letsencrypt
networks:
- main_network
Here is the nginx file:
events{
}
http{
map $http_upgrade $connection_upgrade {
default Upgrade;
'' close;
}
upstream websocket {
server 164.92.157.124:4000;
}
server {
listen 80;
server_name localhost lightchan.org www.lightchan.org;
root /usr/share/nginx/html;
location /.well-known/acme-challenge/ {
root /var/www/certbot;
}
if ($scheme = http) {
return 301 https://lightchan.org$request_uri;
}
}
server {
listen 443 default_server ssl http2;
listen [::]:443 ssl http2;
server_name localhost lightchan.org www.lightchan.org;
ssl_certificate /etc/letsencrypt/live/lightchan.org/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/lightchan.org/privkey.pem;
location /media/pics/ {
autoindex on;
}
location / {
proxy_pass http://frontend:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_intercept_errors on;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location ^~ /socket/ {
proxy_pass http://websocket;
add_header X-uri "$uri";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection "upgrade";
}
location ^~ /api/ {
proxy_pass http://phx:4000;
add_header X-uri "$uri";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection "upgrade";
}
}
}
Note here that I attempted to proxy through an upstream for a /socket/ config and also attempted to use /api/ just using the phx docker tag. Both frontend and phx are linked in the docker-compose file, so they should be coming through. I've also turned on the 'upgrade' feature of Connection so this should be forwarding websockets too.
The phoenix application itself, still has the / front page uri, so I would suspect that being able to navigate to either www.lightchan.org/api or www.lightchan.org/socket would then allow me to see the phoenix hello world splash page, but instead there's a 502 error.
Any suggestions?
EDIT:
I've edited config/config.exs in the phoenix application to run on host 127.0.0.1 like this:
# Configures the endpoint
config :my_app, MyAppWeb.Endpoint,
url: [host: "127.0.0.1"],
render_errors: [view: MyAppWeb.ErrorView, accepts: ~w(html json), layout: false],
pubsub_server: MyApp.PubSub,
live_view: [signing_salt: "blah"]
and tested this running on locally, and it works, correctly showing the splash page at /. I've attempted to get this to work using http://<SERVER IP>:4000 on my server, but no luck.
EDIT EDIT:
Frustratingly, my autoindex for /media/pics is not working, but rather routing to the the frontend. Here is an embarrassingly thorough guide on routing priorities in NGINX (Guide on how to use regex in Nginx location block section?) and here (Nginx location priority). According to the second link:
location ^~ /images/ {
# matches any query beginning with /images/ and halts searching,
# so regular expressions will not be checked.
[ configuration D ]
}
should mean that
location ^~ /media/pics/ {
autoindex on;
}
location / {
<...>
should stop searching and the return an autoindex. So https://www.lightchan.org/media/pics/myimage.png should return myimage.png. That doesn't work and neither does
location /media/pics/ {
autoindex on;
}
Although I could have sworn it was working before...hmm.
Thanks to GreenMachine on Discord the answer was found here:
https://dev.to/eikooc/using-docker-for-your-elixir-phoenix-application-n8n
change dev.exs in config:
# from this:
http: [ip: {127, 0, 0, 1}, port: 4000],
# to this:
http: [ip: {0, 0, 0, 0}, port: 4000],
Please assist
I'm trying to run both react.js and nest.js on http://localhost:3000 with docker-compose and Nginx, however
my react.js app isn't binding correctly. When I visit the link, I only see the nginx welcome page.
This is my docker-compose.yaml
version: "3.6"
services:
database:
image: postgres:13.1-alpine
env_file:
- ./database/.env
volumes:
- "db-data:/var/lib/postgresql/data"
networks:
- challenge
ports:
- "5432:5432"
backend:
build:
context: $PWD/../../backend
dockerfile: $PWD/backend/Dockerfile
volumes:
- ./backend/.env:/app/.env
- ../../backend/src:/app/src
- storage:/app/storage
ports:
- 3000
networks:
- challenge
depends_on:
- database
env_file:
- ./backend/.env
environment:
- FORCE_COLOR=1
frontend:
build:
context: $PWD/../../web
dockerfile: $PWD/frontend/Dockerfile
ports:
- 3001
networks:
- challenge
depends_on:
- backend
env_file:
- ./frontend/.env
volumes:
- ../../web/src:/app/frontend/src
nginx:
image: nginx
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
ports:
- 3000:80
depends_on:
- backend
- frontend
networks:
- challenge
volumes:
db-data:
storage:
networks:
challenge:
And this is my Dockerfile for the React
FROM node:14.18.1-alpine3.14 as build
WORKDIR /app/frontend
COPY package.json /app/frontend/
COPY yarn.lock /app/frontend/
RUN yarn install --frozen-lockfile
COPY . /app/frontend
RUN yarn run build
FROM nginx:1.21.3-alpine
COPY --from=build /app/frontend/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Also, this is my nginx.conf
events {
worker_connections 1024;
}
http {
client_max_body_size 1000M;
server {
gzip on;
gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
listen 80;
server_name localhost;
location /api/v1 {
proxy_pass http://backend:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
Please assist as I've tried changing the ports, and exposing different ports but that doesn't seem to work.
You have two nginx servers: one inside frontend service and another one inside nginx service. Is it intended?
I suppose you need to access the nginx service provided by frontend so in that case you need to go to:
http://localhost:3001
and map 3001:80 because 80 is the exposed port in that image.
I am trying to use Socket-IO events (based on Flask-SocketIO) with my uwsgi and nginx setup on Docker. I am not sure how I should configure my nginx file to allow for the socket connection between client and server. Here is my current nginx configuration:
server {
listen 80;
server_name _;
location / {
try_files $uri #app;
}
location #app {
include /etc/nginx/uwsgi_params;
uwsgi_pass myapp:8080;
}
location /socket.io {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
uwsgi_pass myapp:8080/socket.io;
}
}
Docker Compose:
version: '3.5'
services:
web_server:
container_name: nginx
external_links:
- app
build:
context: .
dockerfile: server/Dockerfile
ports:
- 80:80
depends_on:
- app
app:
container_name: myapp
build:
context: .
dockerfile: application/Dockerfile
expose:
- 8080
Thank you in advance!
The Flask-SocketIO documentation shows an example nginx configuration. Here the Socket.IO location block from it:
location /socket.io {
include proxy_params;
proxy_http_version 1.1;
proxy_buffering off;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass http://127.0.0.1:5000/socket.io;
}
The entire configuration is here.
You are using uwsgi_pass, which based on my understanding does not support proxying WebSocket connections. Use HTTP as this example shows.