Блог

Главная - Вопросы по программированию - Как оптимизировать файл настройки для приложения React

Как оптимизировать файл настройки для приложения React

#node.js #docker #nginx #npm

Вопрос:

В настоящее время у меня есть файл docker, в котором запущено неоптимизированное приложение react (в нем говорится: «Обратите внимание, что сборка разработки не оптимизирована. Чтобы создать производственную сборку, используйте npm run build.’). Файл docker находится:

 FROM node:16

# A directory within the virtualized Docker environment
# Becomes more relevant when using Docker Compose later
WORKDIR /usr/src/app

# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./

# Installs all node packages
RUN npm install

# Copies everything over to Docker environment
COPY . .

# Uses port which is used by the actual application
EXPOSE 3000

# Finally runs the application
CMD [ "npm", "start" ]

С учетом вышесказанного я могу обратиться в свой сервис по адресу http://localhost:3000/ .

Я попробовал следующее (из https://medium.com/geekculture/dockerizing-a-react-application-with-multi-stage-docker-build-4a5c6ca68166) но я не смог получить доступ к своему сервису:

Файл docker, который я пытался,

 # pull official base image
FROM node:16 AS builder

# set working directory
WORKDIR /app


# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./

# Installs all node packages
EXPOSE 3000
RUN npm install 


# Copies everything over to Docker environment
COPY . ./
RUN npm run build

#Stage 2
#######################################
#pull the official nginx:1.19.0 base image
FROM nginx:1.19.0
#copies React to the container directory
# Set working directory to nginx resources directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static resources
RUN rm -rf ./*
# Copies static resources from builder stage
COPY --from=builder /app/build .
EXPOSE 3000
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Кто-нибудь знает, что нужно сделать, чтобы исправить это (или как создать оптимизированную сборку)?

Комментарии:

1. Как вы запускаете контейнер? nginx Изображение прослушивает HTTP-порт 80 по умолчанию, поэтому, если вы используете docker run -p опцию или создаете ports: для публикации контейнерного порта, номер второго порта должен измениться с 3000 до 80 в этом параметре.

Ответ №1:

Основная проблема заключалась в том, что я не знал, что nginx обслуживает порт 80. Следующий файл docker работает и запускается следующим образом: docker run -p 80:80 my-ui-приложение

 # pull official base image
FROM node:16 AS builder

# set working directory
WORKDIR /app


# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./

# Installs all node packages
RUN npm install


# Copies everything over to Docker environment
COPY . ./
RUN npm run build

#Stage 2
#######################################
#pull the official nginx:1.19.0 base image
FROM nginx:1.19.0
#copies React to the container directory
# Set working directory to nginx resources directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static resources
RUN rm -rf ./*
# Copies static resources from builder stage
COPY --from=builder /app/build .
EXPOSE 80
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]
Метки: