Dokploy•3mo ago

Complex error with hostin on VPS using Dokploy (dockerfile build)

Issue: Register / Login, database related functions, not working when using the website on build version on our VPS. It works fine on localhost, npm run dev, and even if we do run dev on the dokploy with dockerfile. It stops working when we turn the front and backend in a build and host it like that. Everything on the website works, buttons and simple functions, but API / data related doesnt anymore. For example registering on dev, makes it send the data to the database. Registering on build gives the following error: POST https://www.dev.afterlife-esports.eu/api/auth/login 405 (Method Not Allowed) Which is weird right? Since it fully works on dev / localhost / dev build, I would really apreciate some help since we are trying to fix this with 4 devs for about 8 hours already, Hopefully someone here knows how to fix! Using: react - vite Nodejs .env is setup doockerfile as well Also linked in this message:

env 
# Production environment variables
# These can be overridden by your deployment provider
VITE_API_URL=https://api.dev.afterlife-esports.eu

env 
# Production environment variables
# These can be overridden by your deployment provider
VITE_API_URL=https://api.dev.afterlife-esports.eu

# Build stage
FROM node:22-alpine as build

# Set working directory
WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy all files
COPY . .

# Build the app
RUN npm run build

# Production stage
FROM nginx:alpine

# Copy built files from build stage to nginx serve directory
COPY --from=build /app/build /usr/share/nginx/html

# Create a simple nginx config to serve the static files with API proxying
RUN echo '\
server {\
    listen 80;\
    \
    # Handle API requests by proxying to the backend\
    location /api/ {\
        proxy_pass https://api.dev.afterlife-esports.eu/;\
        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-For $proxy_add_x_forwarded_for;\
        proxy_set_header X-Forwarded-Proto $scheme;\
        proxy_cache_bypass $http_upgrade;\
        \
        # Handle OPTIONS requests for CORS\
        if ($request_method = "OPTIONS") {\
            add_header "Access-Control-Allow-Origin" "*";\
            add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, PUT, DELETE, PATCH";\
            add_header "Access-Control-Allow-Headers" "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";\
            add_header "Access-Control-Max-Age" 1728000;\
            add_header "Content-Type" "text/plain; charset=utf-8";\
            add_header "Content-Length" 0;\
            return 204;\
        }\
    }\
    \
    # Serve static files\
    location / {\
        root /usr/share/nginx/html;\
        index index.html;\
        try_files $uri $uri/ /index.html;\
    }\
}\
' > /etc/nginx/conf.d/default.conf

# Expose port
EXPOSE 80

# Start nginx
CMD ["nginx", "-g", "daemon off;"]

# Build stage
FROM node:22-alpine as build

# Set working directory
WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy all files
COPY . .

# Build the app
RUN npm run build

# Production stage
FROM nginx:alpine

# Copy built files from build stage to nginx serve directory
COPY --from=build /app/build /usr/share/nginx/html

# Create a simple nginx config to serve the static files with API proxying
RUN echo '\
server {\
    listen 80;\
    \
    # Handle API requests by proxying to the backend\
    location /api/ {\
        proxy_pass https://api.dev.afterlife-esports.eu/;\
        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-For $proxy_add_x_forwarded_for;\
        proxy_set_header X-Forwarded-Proto $scheme;\
        proxy_cache_bypass $http_upgrade;\
        \
        # Handle OPTIONS requests for CORS\
        if ($request_method = "OPTIONS") {\
            add_header "Access-Control-Allow-Origin" "*";\
            add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, PUT, DELETE, PATCH";\
            add_header "Access-Control-Allow-Headers" "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";\
            add_header "Access-Control-Max-Age" 1728000;\
            add_header "Content-Type" "text/plain; charset=utf-8";\
            add_header "Content-Length" 0;\
            return 204;\
        }\
    }\
    \
    # Serve static files\
    location / {\
        root /usr/share/nginx/html;\
        index index.html;\
        try_files $uri $uri/ /index.html;\
    }\
}\
' > /etc/nginx/conf.d/default.conf

# Expose port
EXPOSE 80

# Start nginx
CMD ["nginx", "-g", "daemon off;"]

version: '3.8'

services:
  mysql:
    image: mysql:8.0
    container_name: afterlife_mysql
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: afterlifeesports
    ports:
      - "5610:3306"
    volumes:
      - mysql_data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password
    restart: unless-stopped

volumes:
  mysql_data:

version: '3.8'

services:
  mysql:
    image: mysql:8.0
    container_name: afterlife_mysql
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: afterlifeesports
    ports:
      - "5610:3306"
    volumes:
      - mysql_data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password
    restart: unless-stopped

volumes:
  mysql_data:

Afterlife eSports

Afterlife eSports | Professional Gaming Organization

Join Afterlife eSports, a premier European gaming organization competing in top esports titles. Follow our teams, tournaments, and gaming content.

1 Reply

Siumauricio•2mo ago

it seems like it could be 2 things, either your backend is not allowing those requests or it has something to do with what you wrote about nginx in the dockerfile

Gaming

Programming

Complex error with hostin on VPS using Dokploy (dockerfile build)

Did you find this page helpful?