Docker сборка реактивного приложения пустая папка сборки из Github actions

Вопрос или проблема

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
RUN npm install -g serve
EXPOSE 3000
CMD serve -s build -l 3000

  - name: Построить, пометить и отправить образ в Amazon ECR
    id: build-image
    env:
      ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
      IMAGE_TAG: ${{ github.sha }}
      NEW_TAG: ${{ env.new_tag }}
    run: |
      # Перейти в директорию /client
      cd client

      # Собрать контейнер Docker из директории /client
      docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$NEW_TAG .
      docker push $ECR_REGISTRY/$ECR_REPOSITORY:$NEW_TAG
      echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$NEW_TAG" >> $GITHUB_OUTPUT

.

Ответ или решение

Проблема, с которой вы столкнулись, связана с пустой папкой сборки в процессе развертывания вашего приложения React в AWS ECS через GitHub Actions. Рассмотрим более подробно, что может вызывать эту проблему и как её можно решить.

Основная проблема

Ваш Dockerfile, исходя из кода, сконструирован правильно для сборки приложения React. Однако, если в конечной папке build остается пустота, это может указывать на несколько возможных причин:

1. Ошибки в сборке: Если команда npm run build завершается с ошибкой в процессе выполнения Docker-контейнера на GitHub Actions, папка build просто не создастся.
2. Проблемы с контекстом сборки: Возможно, при выполнении Docker команды не учитываются необходимые файлы или зависимости.
3. Отсутствие необходимых файлов в репозитории: Вам следует убедиться, что все необходимые файлы, такие как package.json, правильно находятся в контексте сборки.

Возможные шаги по устранению неполадок

1. Проверка логов сборки: Убедитесь, что процесс сборки не выдает ошибок. Для этого вы можете добавить вывод логов в ваши шаги GitHub Actions, чтобы лучше увидеть, что происходит во время выполнения команды сборки.

2. Проверка пути к файлам: Убедитесь, что команда COPY . . в Dockerfile копирует все необходимые файлы. Возможно, стоит рассмотреть использование более точечного копирования, чтобы исключить ненужные файлы илиigiции. Например:

   COPY public ./public
   COPY src ./src

3. Проверка наличия файлов в репозитории: Убедитесь, что все файлы, необходимые для сборки, находятся в вашем client каталоге, откуда происходит сборка. Изучите структуру каталогов, чтобы убедиться, что все ожидаемые файлы существуют.

4. Добавление окружения для сборки: В случае, если ваше приложение требует переменные окружения для корректной сборки, убедитесь, что они выставлены в GitHub Actions. Вы можете добавить переменные окружения в ваш файл .yaml:

   env:
     REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}

5. Изменение Dockerfile для использования более детального подхода: Вот как ваш Dockerfile может быть улучшен:

   FROM node:20-alpine as builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build
   
   FROM alpine:latest
   WORKDIR /app
   COPY --from=builder /app/build ./build
   RUN npm install -g serve
   EXPOSE 3000
   CMD ["serve", "-s", "build", "-l", "3000"]

   Этот подход использует многоступенчатую сборку, что предотвращает попадание ненужных файлов в конечный образ.

Резюме

Ваш Dockerfile в целом выглядит правильно, но пустая папка build в конечном образе указывает на необходимость более тщательной проверки сборки.

Внимательно проверьте выводы логов, чтобы выявить возможные ошибки, убедитесь, что все необходимые файлы находятся в доступных каталогах, и внедрите многослойную сборку для повышения надежности. Следуя этим шагам, вы сможете устранить проблему с пустой папкой build и успешно развернуть ваше приложение на AWS ECS.