I have Skaffold working well with local development server and database deployments. I'm trying to get working on the create-react-app
front-end, but the behavior is incredibly slow and erratic.
Issues
The main problems are the following:
- It takes upwards of five minutes from running
skaffold dev --port-forward --tail
for it finally start spinning up. Running just adocker build
takes less than 30 seconds. - When it finally starts spinning up, it just sits on
Starting the development server...
for another two minutes. Then, nine times out of ten, I get the following errors after several minutes (there are three because that is how many replicas there are):
One out of ten times, it will actually go into the
Compiled Successfully! You can now view in the browser.
It never does launch in Chrome though.- Changes to JS in create-react-app are never reflected in new browser. You have to stop and run Skaffold again. Skaffold does say
Syncing 1 files for <image>... Watching for changes...
, but nothing changes even after a refresh.
What I've tried
- I've really simplified what I'm trying to do to make it easier to sort this out, so I'm using just an OOTB
create-react-app
application. The behavior is the same regardless. minikube delete
andminikube start
several times (did this because even the server deployment started acting erratically after tryingcreate-react-app
)
Code and Steps to Reproduce
I'm on macOS Mojave (10.14.6) using Docker for Mac, Kubernetes (v1.16.0), minikube (v1.4.0), Skaffold (v0.39.0), and create-react-app
. I'll have to skip the installation process for all of these since it is fairly lengthy, so the following steps assume you have this already setup.
Make a project directory:
mkdir project
Make a Kubernetes manifest directory and move into it:
mkdir k8s && cd k8s
Make a
client-deployment.yaml
and add the following:apiVersion: apps/v1 kind: Deployment metadata: name: client-deployment spec: replicas: 3 selector: matchLabels: component: web template: metadata: labels: component: web spec: containers: - name: client image: testapp/client ports: - containerPort: 3000
Make a
client-cluster-ip-service.yaml
and add the following:apiVersion: v1 kind: Service metadata: name: client-cluster-ip-service spec: type: ClusterIP selector: component: web ports: - port: 3000 targetPort: 3000
Move back into the parent:
cd ..
Create a
skaffold.yaml
and add the following:apiVersion: skaffold/v1beta15 kind: Config build: local: push: false artifacts: - image: testapp/client context: web docker: dockerfile: Dockerfile.dev sync: manual: - src: "**/*.js" dest: . - src: "**/*.html" dest: . - src: "**/*.css" dest: . deploy: kubectl: manifests: - k8s/client-deployment.yaml - k8s/client-cluster-ip-service.yaml portForward: - resourceType: service resourceName: client-cluster-ip-service port: 3000 localPort: 3000
Start a new
create-react-app
project:npx create-react-app test-app
Change into the directory:
cd test-app
Create a
Dockerfile.dev
and add the following:FROM node:alpine WORKDIR '/app' EXPOSE 3000 CMD ["npm", "run", "start"] COPY package* ./ RUN npm install COPY . .
Create a
.dockerignore
file and add the following:node_modules *.swp
Go back into the parent directory:
cd ..
Make sure
minikube
is running:minikube start
Run the
skaffold.yaml
:skaffold dev --port-forward --tail
This is what produces the issues for me.