如何访问在docker容器中运行的react应用程序？

Question

Dockerfile文件

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

docker撰写。yml

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

我发射的命令是为了让这个起来

docker-compose-fdocker-compose.yml

之后我去了https://localhost:3000这个项目没有加载。这是可复制的回购协议https://github.com/reyanshmishra/My-Portfolio-ReactJS

谢啦

Answer 1

从Web包开发服务器文档：

这两种方法都将启动服务器实例并开始侦听端口8080上本地主机的连接。

我想你可以修改docker-compose.yml：

ports:
      - "3000:8080"

然后你就可以使用http://localhost:3000.

或者

您可以修改Web包配置以使用端口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>** 

>

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

如何访问docker映像？

如果需要访问正在运行的容器

$docker执行官-ti bash