Не удается открыть приложение React в браузере после стыковки

Question

Я пытаюсь докеризировать приложение реакции.Я использую следующий Dockerfile для достижения этой цели.

# base image
FROM node:9.4

# set working directory
WORKDIR /usr/src/app

# install and cache app dependencies
COPY package*.json ./
ADD package.json /usr/src/app/package.json
RUN npm install

# Bundle app source
COPY . .

# Specify port
EXPOSE 8081

# start app
CMD ["npm", "start"]

Кроме того, в моем package.json сценарий запуска определен как "scripts": { "start": "webpack-dev-server --mode development --open", .... }

Я создаю образ как:

docker build . -t myimage

И я наконец запускаю образ, как

docker run IMAGE_ID

Затем эта команда запускает образ, однако, когда я перехожу к localhost: 8080 или localhost: 8081, я ничего не вижу.

Однако, когда я захожу в docker-контейнер для myimage и выполняю curl -X GET http:localhost:8080, я могу получить доступ к своему приложению реакции.

Я также развернул это на google-kubernetes и открыл для этого сервис балансировки нагрузки.Однако произошло то же самое, я не могу получить доступ к приложению реагировать на открытой конечной точке, но когда я вошел в контейнер и сделал запрос curl, я получил index.html.

Итак, как мне запустить образ этого образа докера, чтобы я мог получить доступ к приложению через браузер.

Answer 1

Когда вы используете EXPOSE в Dockerfile, он просто утверждает, что служба прослушивает указанный порт (в вашем случае 8081), но фактически не создает переадресацию портов.

Для фактической пересылки трафика с хостаНа машине к службе вы должны использовать флаг -p, чтобы указать отображение порта

Например: docker run -d -p 80:8080 myimage запустит контейнер и перенаправит запросы на localhost: 80 на порт контейнера 8080

Подробнее об EXPOSE здесь https://docs.docker.com/engine/reference/builder/#expose

---

UPDATE

Так что обычно, когда вы разрабатываете приложения для узлов локально и запускаете dev-сервер webpack, он будет прослушивать 127.0.0.1, что хорошо, так как вы собираетесь посетить сайт с того же компьютера, на котором он размещен.Но поскольку в Docker контейнер можно рассматривать как отдельный экземпляр, это означает, что вам необходимо иметь доступ к нему из «внешнего» мира, а это значит, что необходимо перенастроить dev-сервер для прослушивания 0.0.0.0 (чтов основном означает все IP-адреса, назначенные «экземпляру»)

Таким образом, обновив конфигурацию dev-server для прослушивания 0.0.0.0, вы сможете получить доступ к своему приложению с хост-компьютера.Ссылка на документацию: https://webpack.js.org/configuration/dev-server/#devserverhost