Dokerize Development/Production with frontend framework in mind

Support
1

I don’t know wether I lack most of the docker skills, but I am having hard time to create environment where I and other team mates work on.

The mission I am trying to accomplish here is that I want to create environment with CockpitCMS in the middle, where NUXT, VueJS or React app would be as a representative layer, and data would be passed via GraphQL/Apollo.

I found couple of examples online in this forum, also checked CockpitReact example, but this seems to be too complicated and I didn’t understood why docker-sync is necessary. Also checked VENoM docker example, it is almost the thing I need, but I am having issues replacing Node Backend with Cockpit.

I want to make simple where I could just sync files from host to docker and vica- versa via volumes etc.

Maybe, somebody, who is an expert with docker and the cockpit dokerization, I would really love to get some help.

This is the root docker-compose.yaml

version: "3"

services:
  cockpit-cms-frontend:
    build: ./client
    ports:
      - 8080:8080
    volumes:
      - ./client:/data
    environment:
      API_URL: http://localhost:8081/

  cockpit-cms:
    build: ./cockpit
    ports:
      - 8081:8080
    volumes:
      - ./cockpit/storage:/var/www/html/storage
    depends_on:
      - cockpit-cms-database
    environment:
      COCKPIT_DATABASE_SERVER: mongodb://cockpit-cms-database:27017
      COCKPIT_DATABASE_NAME: cockpitdb

  cockpit-cms-database:
    image: mongo
    ports:
      - 27017:27017
    volumes:
      - ./db:/data/db
    environment:
      MONGO_INITDB_DATABASE: cockpitdb
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: root

I am able to see my VUE app via localhost:8080, but nothing visible on localhost:8081.

My Dockerfile for in cockpit folder

FROM agentejo/cockpit

COPY ./docker/config.php /var/www/html/custom/config.php
COPY ./docker/php.ini /usr/local/etc/php/

CMD ["php", "-S", "0.0.0.0:8080"]

I am able to see synced storage, but issue here is with the images. I am able to upload them, but to get it back, requested URL is http://0.0.0.0:8080/storage/uploads/2018/09/26/5bab71586227fyoga-stand.jpg, but expected remote address at least would be localhost:8081.

Or, should I not use agentejo/cockpit image at all and build my own image using nginx (I dont like Apache).

So yeah, I really would like to find some advice! Thanks!