Question

Dockerfile

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

docker-compose.yml

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app
    command: ["npm", "start"]

我为此目的而启动的命令

docker-compose -f docker-compose.yml up --build

此后，我去了https://localhost:3000，该项目没有加载。这是可复制的仓库https://github.com/reyanshmishra/My-Portfolio-ReactJS

谢谢

Answer 1

来自webpack-dev-server documentation：

这两种方法都将启动服务器实例，并开始在端口8080上侦听来自localhost的连接。

我想您可以将docker-compose.yml修改为：

ports:
      - "3000:8080"

然后您应该可以使用http://localhost:3000访问您的应用。

OR

您可以修改webpack配置以使用端口3000而不是默认的8080：

devServer: {
    contentBase: path.join(__dirname, "src"),
    hot: true,
    inline: true,
    historyApiFallback: true,
    stats: {
      colors: true
    },
    port: 3000
},

Answer 2

您不能通过这样的方式运行react项目。您必须像这样将这行添加到Dockerfile中，以运行您的应用程序，

# Install `serve` to run the application.
RUN npm install -g serve

示例 Dockerfile

FROM node:alpine
WORKDIR '/app'
COPY package.json .

# Copy all local files into the image.
COPY . .

RUN npm install
RUN npm audit fix

# Build for production.
RUN npm run build --production

# Install `serve` to run the application.
RUN npm install -g serve

# Set the command to start the node server.
CMD serve -s build

# Tell Docker about the port we'll run on.
EXPOSE 5000

您可以运行这样的图像（默认情况下，您的应用程序将运行端口5000 。因此您还必须更改 docker-compose.yml 文件）：

**$ docker run -p 5000:5000 <image name>**

如果需要在不运行容器的情况下访问图像，

How to access a docker image?
如果您需要访问正在运行的容器

$ docker exec -ti bash

如何访问在Docker容器中运行的React App？

2 个答案: