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

Question

我遵循https://mherman.org/blog/dockerizing-a-react-app/下的步骤

我的设置:

Windows 10家庭版

docker命令在Docker快速入门终端中运行https://docs.docker.com/toolbox/toolbox_install_windows/

如何复制:请遵循第一个链接中的步骤:

全局安装create-react-app:

npm install -g create-react-app@3.4.1

生成新应用:

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

在目录的根目录中创建Dockerfile:

# 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"]

添加.dockerignore:

node_modules
build
.dockerignore
Dockerfile
Dockerfile.prod

构建并标记dockerimage:

$ docker build -t sample:dev .

旋转容器:

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

这是我在Docker Quickstart Terminal中看到的:


这是我的项目结构:


但是，当我按照帖子中所述访问localhost:3001时，我看到了


知道我在想什么吗？

Answer 1

运行容器时，请按以下方式指定端口:3000:80(使用:80)

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

然后，您可以导航到 http://localhost:3000/以查看CRA应用程序。