docker - 我的 react docker 网页没有绑定(bind)到主机

Question

我有一个 react 应用程序，我可以通过运行“npm run start”在虚拟机上完美地运行它而无需 docker 。但是，当我在 docker 镜像中制作并运行 docker 时它不会出现。我的 dockerfile 如下:

FROM node:12
USER root
RUN mkdir -p /var/tmp/thermo && chown -R root:root /var/tmp/thermo
WORKDIR /var/tmp/thermo
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "run","start"]

我可以成功创建 docker 镜像然后运行它，

docker run -d -p 3000:3000 --name thermo-*** thermo-***

但是容器总是退出，容器日志如下:

[root@*****]# docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS                      PORTS               NAMES
03701ed96bca        thermo-api          "docker-entrypoint.s…"   17 minutes ago      Exited (0) 17 minutes ago                       thermo-api-app
[root@t****]#
[root@****]# docker logs 03701ed96bca

> material-kit-pro-react@1.9.0 start /var/tmp/thermo
> export PORT=3000 && react-scripts start

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

然后当我 curl 到我的网站(“curl localhost:3000”)时，什么都没有弹出，
我不确定我在哪里做错了？任何帮助，将不胜感激!

Answer 1

尝试再看一下您的代码，容器在您启动容器后立即退出。
顺便说一句，npm run start只是用于开发环境，为什么不构建代码并由 Nginx 提供服务
我的意见是您应该构建您的代码，然后以您的方式使用 Dockerfile 示例，Nginx 将为您的应用程序提供服务
Dockerfile

# build environment
FROM node:lts-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm install
COPY . /app
RUN npm run build
RUN react-scripts build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

你可以使用这个 nginx.conf

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location /web {
            alias   /usr/share/nginx/html;
            index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}