Process for configuring devspace with pre-existing app

Question

I'm new to Kubernetes (and Docker) for that matter. I need to understand the process of migrating my existing Vue.js app using Devspace. I've got the app running, sorta, but I am not connecting to

ws://localhost:4000/graphql

or able to establish a mongo connection.

MongoServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017

relevant pre-existing package.json entry points

"serve": "vue-cli-service serve -mode development",
"build": "vue-cli-service build",
"apollo": "vue-cli-service apollo:dev --generate-schema",
"apollo:schema:generate": "vue-cli-service apollo:schema:generate",
"apollo:schema:publish": "vue-cli-service apollo:schema:publish",
"apollo:start": "vue-cli-service apollo:start",

app structure

/apollo-server
  context.js  ## Mongo connection made here.
/src
  vue-apollo.js ## Apollo setup (Graphql is setup here.)
Dockerfile
devspace.yaml
package.json

Now,

Dockerfile

FROM node:13.12.0-alpine

# Set working directory
WORKDIR /app

# Add package.json to WORKDIR and install dependencies
COPY package*.json ./
RUN npm install

# Add source code files to WORKDIR
COPY . .

# Application port (optional)
# express server runs on port 3000
EXPOSE 3000

# Debugging port (optional)
# For remote debugging, add this port to devspace.yaml: dev.ports[*].forward[*].port: 9229
EXPOSE 9229

CMD ["npm", "start"]

devspace.yaml

version: v1beta9
images:
  app:
    image: sandbox/practiceapp
    preferSyncOverRebuild: true
    injectRestartHelper: false
    cmd: ["yarn", "serve"]
    appendDockerfileInstructions:
    - USER root
  backend:
    image: sandbox/backend
    preferSyncOverRebuild: true
    injectRestartHelper: false
    entrypoint: ["yarn", "apollo"]
    appendDockerfileInstructions:
    - USER root
deployments:
- name: frontend
  helm:
    componentChart: true
    values:
      containers:
      - image: sandbox/practiceapp
      service:
        ports:
        - port: 8080
- name: backend
  helm:
    componentChart: true
    values:
      containers:
      - image: sandbox/backend
      service:
        ports:
        - port: 4000
        - port: 3000
        - port: 27017
# - name: mongo
#   helm:
#     componentChart: true
#     values:
#       containers:
#       - image: sandbox/mongo
#       service:
#         ports:
#         - port: 27017
dev:
  ports:
  - imageName: app
    forward:
    - port: 8080
  # - imageName: apollo
  #   forward:
  #     port: 3000
  # - imageName: graphql
  #   forward:
  #     port: 4000
  # - imageName: mongo
  #   forward:
  #     port: 27017
  open:
  - url: http://localhost:8080
  - url: http://localhost:4000/graphql
  sync:
  - imageName: app
    excludePaths:
    - .git/
    uploadExcludePaths:
    - Dockerfile
    - node_modules/*
    - '!node_modules/.temp/'
    - devspace.yaml
    onUpload:
      restartContainer: true
profiles:
- name: production
  patches:
  - op: remove
    path: images.app.injectRestartHelper
  - op: remove
    path: images.app.appendDockerfileInstructions
- name: interactive
  patches:
  - op: add
    path: dev.interactive
    value:
      defaultEnabled: true
  - op: add
    path: images.app.entrypoint
    value:
    - sleep
    - "9999999999"

I've looked for information on how to include services from pre-existing apps, but I've had difficulty understanding. I need some guidance on how to set this up, or where to look.

Thanks for your help and time.

Answer 1

From the information you provided, I think this is probably a networking issue. Please, check if your applications are listening on all interfaces instead of on localhost only because that would lead to the connection being refused as described in this troubleshooting guide: https://devspace.sh/cli/docs/guides/networking-domains#troubleshooting

Answer 2

The answer to this was refactoring the structure of my app and including the service port in deployments as well as the forwarding port in dev.ports.

deployments:
- name: app
  helm:
    componentChart: true
    values:
      containers:
      - image: namespace/frontend
      service:
        name: app-service
        ports:
        - port: 8080
        - port: 4000
dev:
   ports:
   - imageName: app
     forward:
     - port: 8080
     - port: 4000

The final structure of my app:

./backend
   .dockerignore
   Dockerfile
   package.json
./frontend
   .dockerignore
   Dockerfile
   package.json
devspace.yaml

As far as connecting mongodb, I initially started with minikube and then moved to docker-desktop, but was not able to set up headless ports with external loadbalancing access due to using a replicaset on docker-desktop (localhost cannot be assigned twice as the external ip). I used bitnami's mongodb helm chart with devspace to do so.