Docker strapi error

[hahamini]

🐛 Bug Report

🤷‍♀️ What did you do

I don't know the details, but it seems that vite can't connect to port 5173, so I can't access the admin page. I keep refreshing it, and it works.

This problem only occurs when running with Docker.
If you set only DB and Adminer in docker-compose, and run strapi with yarn develop in the root directory, the problem doesn't occur.

⛔️ Error log

 Uncaught (in promise) TypeError: Failed to fetch
    at chunk-2TAU4CQN.js?v=1fee42fe:5196:9
    at commitHookEffectListMount (chunk-LV225RC7.js?v=1fee42fe:16936:34)
    at commitPassiveMountOnFiber (chunk-LV225RC7.js?v=1fee42fe:18184:19)
    at commitPassiveMountEffects_complete (chunk-LV225RC7.js?v=1fee42fe:18157:17)
    at commitPassiveMountEffects_begin (chunk-LV225RC7.js?v=1fee42fe:18147:15)
    at commitPassiveMountEffects (chunk-LV225RC7.js?v=1fee42fe:18137:11)
    at flushPassiveEffectsImpl (chunk-LV225RC7.js?v=1fee42fe:19518:11)
    at flushPassiveEffects (chunk-LV225RC7.js?v=1fee42fe:19475:22)
    at commitRootImpl (chunk-LV225RC7.js?v=1fee42fe:19444:13)
    at commitRoot (chunk-LV225RC7.js?v=1fee42fe:19305:13)

GET http://localhost:5173/ net::ERR_CONNECTION_REFUSED
ping @ http://localhost/@vite/client:710
waitForSuccessfulPing @ http://localhost/@vite/client:730
(anonymous) @ http://localhost/@vite/client:528

## 🙇‍♀️ Expected behavior/code

A clear and concise description of what you expected to happen (or code).

## 👩‍💻 Environment

- 📦 Node version: FROM node:18-alpine
- 💻 OS: Linux - x64 (Ubuntu22.04)

## 💡 Possible Solution

<!-- Only if you have suggestions on a fix for the bug -->

## 📺 Additional context/Screenshots

<!-- Add any other context about the problem here. If applicable, add screenshots to help explain. -->

[Eventyret]

This would be because you need to connect to 0.0.0.0:5432 because localhost is for the container itself also the container might need to be exposed if it's docker compose.

[hahamini]

@Eventyret
hanks for your response. With the hint from your answer, I added port 5173 to the docker-compose file, and that error no longer occurs.
However, now I'm facing an SSL issue:
GET https://api.myserver.com:5173/ net::ERR_SSL_PROTOCOL_ERROR

To resolve this, I tried adjusting the host and port settings as per the Vite server-options, but the error message remains the same in the console.

// src/admin/vite.configs.ts
import { mergeConfig, type UserConfig } from 'vite';
import dns from 'node:dns'

dns.setDefaultResultOrder('verbatim');

export default (config: UserConfig) => {
  // Important: always return the modified config
  return mergeConfig(config, {
    resolve: {
      alias: {
        '@': '/src',
      },
    },
    server: {
      // https: false,
      host: 'localhost',
      cors: {
        origin: ['http://localhost:3000'],
        credentials: true,
      },
    },
    optimizeDoptimizeDeps: {
      exclude: ['node_modules/.cache'],
    },
  })
}

version: '3'
services:
  web-api:
    container_name: web-api
    build: .
    image: web-api:latest
    restart: unless-stopped
    env_file: .env
    environment:
      DATABASE_CLIENT: ${DATABASE_CLIENT}
      DATABASE_HOST: web-api-DB
      DATABASE_NAME: ${DATABASE_NAME}
      DATABASE_USERNAME: ${DATABASE_USERNAME}
      DATABASE_PORT: ${DATABASE_PORT}
      JWT_SECRET: ${JWT_SECRET}
      ADMIN_JWT_SECRET: ${ADMIN_JWT_SECRET}
      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
      NODE_ENV: ${NODE_ENV}
    volumes:
      - ./config:/opt/app/config
      - ./src:/opt/app/src
      - ./package.json:/opt/package.json
      - ./yarn.lock:/opt/yarn.lock

      - ./.env:/opt/app/.env
      - ./public/uploads:/opt/app/public/uploads
    ports:
      - '1337:1337'
      - '5173:5173' # Vite 포트 노출
    networks:
      - web-api
    depends_on:
      - web-api-DB
      
  web-api-DB:
    container_name: web-api-DB
    platform: linux/amd64 #for platform error on Apple M1 chips
    restart: unless-stopped
    env_file: .env
    image: postgres:14.5-alpine
    environment:
      POSTGRES_USER: ${DATABASE_USERNAME}
      POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
      POSTGRES_DB: ${DATABASE_NAME}
    volumes:
      - web-api-data:/var/lib/postgresql/data/ #using a volume
      #- ./data:/var/lib/postgresql/data/ # if you want to use a bind folder

    ports:
      - '15432:5432'
    networks:
      - web-api
      
  web-api-Adminer:
    container_name: web-api-Adminer
    image: adminer
    restart: unless-stopped
    ports:
      - '9090:8080'
    environment:
      - ADMINER_DEFAULT_SERVER=web-api-DB
    networks:
      - web-api
    depends_on:
      - web-api-DB

volumes:
  web-api-data:

networks:
  web-api:
    name: web-api
    driver: bridge

[Eventyret]

Would have to set the network to host and 0.0.0.0 if your using it not in a docker network as per docker documentation

[hahamini]

@Eventyret I don't know what you mean.
Looking at the docker compose file, I'm using docker network as bridge mode.
Also, I don't know if you mean vite.config.mts that tells you to set host to 0.0.0.0, but the result is the same.

// src/admin/vite.configs.ts
import { mergeConfig, type UserConfig } from 'vite';
import dns from 'node:dns'

dns.setDefaultResultOrder('verbatim');

export default (config: UserConfig) => {
  // Important: always return the modified config
  return mergeConfig(config, {
    resolve: {
      alias: {
        '@': '/src',
      },
    },
    server: {
      // https: false,
      host: '0.0.0.0',
      port: 5173,
      cors: {
        origin: ['http://localhost:3000'],
        credentials: true,
      },
    },
    optimizeDoptimizeDeps: {
      exclude: ['node_modules/.cache'],
    },
  })
}

# .env
# Server
HOST=0.0.0.0
PORT=1337

# Secrets
APP_KEYS=**
API_TOKEN_SALT=**
ADMIN_JWT_SECRET=**
TRANSFER_TOKEN_SALT=**

# Database
DATABASE_CLIENT=postgres
DATABASE_HOST=127.0.0.1
DATABASE_PORT=5432
DATABASE_NAME=strapi
DATABASE_USERNAME=admin
DATABASE_PASSWORD=123321
DATABASE_SSL=false
DATABASE_FILENAME=

NODE_ENV=development
# @strapi-community/dockerize end variables 
JWT_SECRET=**

# @strapi refresh token
# https://strapi.io/blog/how-to-create-a-refresh-token-feature-in-your-strapi-application
REFRESH_SECRET=strapisecret
REFRESH_TOKEN_EXPIRES=2d
JWT_SECRET_EXPIRES=360s