Add Caddy with docker on a nuxt based web with 2 ports for front and back end

Help
1

1. Output of caddy version:

v2.6.2

2. How I run Caddy:

on VPS for production
`

a. System environment:

ubuntu 20.18 with docker and docker compose,

b. Command:

Paste command here.

c. Service/unit/compose file:

version: "3.8"

volumes:
  vol-emqx-data:
    name: foo-emqx-data
  vol-emqx-log:
    name: foo-emqx-log
  caddy_data:
    external: true
  caddy_config:

services:

  portainer:
    image: portainer/portainer-ce:latest
    container_name: portainer
    restart: unless-stopped
    security_opt:
      - no-new-privileges:true
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - ./portainer/portainer-data:/data
   
    ports:
      - 9000:9000

  caddy:
    image: caddy:latest
    restart: unless-stopped
    container_name: caddy
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./contenedores/caddy/Caddyfile:/etc/caddy/Caddyfile
      - ./contenedores/caddy/site:/srv
      - ./contenedores/caddy/caddy_data:/data
      - ./contenedores/caddy/caddy_config:/config
    


  node:
    container_name: node
    image: "node:14"
    restart: always
    working_dir: /home/node/app
    volumes:
      - ./app/:/home/node/app
    
  
    ports:
      - "3000:3000"
      - "3001:3001"
      - "3002:3002"


    links:
      - emqx
      - mongo

    command: sh -c "echo 'delaying 30 seconds' && sleep 30 && npm run start"

  mongo:
    container_name: mongo
    image: mongo:4.4
    restart: always
    logging:
      driver: "none"
    environment:
      TZ: "${TZ}"
      MONGO_INITDB_ROOT_USERNAME: "${MONGO_USERNAME}"
      MONGO_INITDB_ROOT_PASSWORD: "${MONGO_PASSWORD}"
    volumes:
      - ./mongodata:/data/db
    ports:
      - ${MONGO_EXT_PORT}:27017

  emqx:
    container_name: emqx
    image: emqx/emqx:4.2.3
    restart: always
    ports:
      - 18083:18083
      - 1883:1883
      - 1884:1884
      - 8084:8084
      - 8083:8083
      - 8085:8081

    volumes:
      - vol-emqx-data:/opt/emqx/data
      - vol-emqx-log:/opt/emqx/log

    links:
      - mongo

d. My complete Caddy config:

{
    
    debug
}

example.com {

    route /api/* {
     uri strip_prefix /api
     reverse_proxy node:3001
   }
  
   handle {
    reverse_proxy node:3000
       
   }
}

emqx.example.com {
    reverse_proxy emqx:18083
}
ws.examplecom {
    reverse_proxy emqx:8083
}
wss.example.com {
    reverse_proxy emqx:8084
}

portainer.example.com {

   reverse_proxy portainer:9000
 
}.

3. The problem I’m having:

The web conforms of the front end port “3000” and the back end port “3001” all the web is programed with nuxt, i can add https on front end but when i try to make a post (login in this case) trhows me ERR_SSL_PROTOCOLERRO with the api path

the login route is: https://example:3001/api/login/

also caddy does not respon to port 3001 its like its not there.

to be more clear the interna api is like this “example.com:3001/api/”

2

One issue is that route is ordered lower than handle in the directive order, so the handle is catching all requests.

Instead, use handle_path which has the same order as handle, and has built-in strip_prefix logic. So it’ll look like this:

example.com {
	handle_path /api/* {
		reverse_proxy node:3001
	}

	handle {
		reverse_proxy node:3000
	}
}

You’ll need to remove :3001 from your routes, the requests should look like https://example.com/api/login instead. Caddy isn’t listening on port 3001, it’s listening on port 443 for HTTPS requests.

You don’t need to bind these ports to the host. Only Caddy needs to reach them, so you can remove this from your docker-compose file to make sure all requests must go through Caddy (in case your firewall ends up misconfigured, allowing access on those port, bypassing HTTPS)

3

Hey Francis Thanks for your answer, i have tested your solution and i have advanced a few steps, but i cant login into account, i have no errors from caddy or my web page just keeps there freezed,

so my internal api its based on Nuxt-Axios

//  Axios module configuration
  axios: {
    baseURL: process.env.AXIOS_BASE_URL
  },

and this a part of the axios part for login

this.$axios.post("/login", this.user).then((res) => {
          if (res.data.status == "success") {
            this.$notify({
              type: "success",
              icon: "tim-icons icon-check-2",
              message:
                "Hola " + res.data.userData.name + ", Bienvenido",
            });
4

That doesn’t give me enough information to help further.

If you’re having trouble with Nuxt-specific stuff, then this probably isn’t the right place for help at that point.

5

This topic was automatically closed after 30 days. New replies are no longer allowed.