Как получить доступ к реагирующему приложению, запущенному в Docker-контейнере?

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

Вы не можете запустить реактивный проект, строя как это.Вы должны добавить эту строку в 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 exec -ti bash

Answer 2

Из документации webpack-dev-server :

Любой метод запускает экземпляр сервера и начинает прослушивать соединения с локального хоста через порт 8080.

Я полагаю, вы можете изменить docker-compose.yml так:

ports:
      - "3000:8080"

И тогда вы сможете получить доступ к своему приложению, используя http://localhost:3000.

ИЛИ

Вы можете изменить конфигурацию вашего веб-пакета, чтобы использовать порт 3000 вместо стандартного 8080:

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