Search code examples
reactjsdockercreate-react-app

can't run react app with docker container

I have a react-app, which simple showing hello-world message but I like to run the app throug docker-container but having this problem. After this message, process stopped without running app.. 

ℹ ｢wds｣: Project is running at http://172.17.0.2/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /app/public
ℹ ｢wds｣: 404s will fallback to /
 Starting the development server...

Can't understand what I should do because I have very small app with basic code in Dockerfile

FROM node:alpine
RUN mkdir /app
COPY . /app
WORKDIR /app
COPY package.json ./
RUN npm install
CMD ["npm", "start"]

Do I need to install webpack-dev-server, I tried but got version error like 'manually added server' has lower version than already server. so I re-install the webpack-dev-server.

I have created app with 'create-react-app', so I think every dependency is managed automatically.. Is anyone have idea, how can I solve the problem.. thanks in advance (BTW..)

Command which I use to build: docker build . -t lucki

Command to run image: docker run -p 3000:3000 lucki

this is project stracture: enter image description here

after adding DEBUG=* in Dockerfile, I have response as: enter image description here

Solution

  • The problem is that the dev mode will not run if it is not an interactive terminal.

    Change your docker command to include an interactive terminal:

    Add -it to your docker run command (-i interactive, -t pseudo-TTY) e.g. docker run -it -p 3000:3000 your_container

    Canonical troubleshooting

    Make sure the code runs without docker

    Does npm start work on the command line?

    Showing debug info

    Add DEBUG=* as an environment variable inside your container.DEBUG is an environment variable which controls logging for many Node modules.

    In your Dockerfile, add

    ENV DEBUG=*

    Or on the command line, add -e 'DEBUG=*' to your docker command.

    This may help spot error messages which are somehow getting swallowed

    Run node directly

    Instead of running npm start, run your file directly. e.g. in your Dockerfile,

    CMD ["node", "index.js"]

    Try running another docker container

    If this is a problem with your docker setup, running a known good container may help you discover it.

    docker run --rm -it node:alpine

    Improvements

    Your Dockerfile could also be simplified a bit.

    FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
CMD ["npm", "start"]
    • mkdir is not needed, as WORKDIR automatically creates the directory.
    • package*.json will also copy package-lock.json
    • --production will skip installing devDependencies
    • Putting the COPY command last will leverage cache better (you won't have to re-run npm install unless your dependencies have changed)

    You might also want to use Tini. Tini forwards signals, which means docker stop and pressing control+c in an interactive terminal will actually stop the node process immediately.

    If you are using Docker 1.13+, add --init to the command line to have signals forwarded and processes reaped. On older versions, follow the instructions in the README