如何访问在 docker 容器中运行的 create-react-app？

Question

I followed the steps under https://mherman.org/blog/dockerizing-a-react-app/

My setup:

• Windows 10 Home
• docker commands are run in the Docker Quickstart Terminal https://docs.docker.com/toolbox/toolbox_install_windows/

How to reproduce: Follow the steps from the first link:

install create-react-app globally:

npm install -g create-react-app@3.4.1

Generate new app:

$ npm init react-app sample --use-npm
$ cd sample

Create Dockerfile in the root of directory:

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]

Add.dockerignore:

node_modules
build
.dockerignore
Dockerfile
Dockerfile.prod

Build and tag the dockerimage:

$ docker build -t sample:dev .

Spin up the container:

$ docker run \
    -it \
    --rm \
    -v ${PWD}:/app \
    -v /app/node_modules \
    -p 3001:3000 \
    -e CHOKIDAR_USEPOLLING=true \
    sample:dev

This is what I see in the Docker Quickstart Terminal:

And this is my project structure:

However, when I go to localhost:3001 as described in the post, I see

Any idea where I'm missing something?

Answer 1

When you run the container, specify the port like this: 3000:80 (use:80)

$ docker run -it --rm -p 3000:80 sample:prod

You can then navigate to http://localhost:3000/ to see the CRA app.