Vite + Docker создание docker image vite приложения и локальный запуск с помощью docker

Ойын-сауық

Здесь выложены команды и код который я использовал
Dockerfile записать файл с этим названием в корень проекта:
FROM node:18.13.0-alpine
WORKDIR /app
COPY ./package.json .
RUN npm install
COPY . .
CMD [ "npm", "run", "dev" ]
Добавить этот код в файл vite.config.ts под строчкой plugins: [react()],:
server: {
watch: {
usePolling: true,
},
host: true,
strictPort: true,
port: 5050
}
Команда для сборки docker image:
docker build -t test .
Команда для запуска docker container:
docker run --rm --name myViteProject -p 3000:5173 -d test
docker run --name myViteProject --restart=always -p 3000:5173 -d test //после перезагрузки запуститься заного
docker ps -a для просмотра запущенных и остановленных контейнеров
docker stop test //остановка контейнера

Пікірлер: 36

  • @jekich_life_moto
    @jekich_life_moto9 күн бұрын

    большое спасибо, ваше видео помогло разобраться с проблемой по рабочей задаче)

  • @yesdoit9914

    @yesdoit9914

    9 күн бұрын

    @@jekich_life_moto Приветствую! Круто!!!

  • @frontfromsofa
    @frontfromsofa9 ай бұрын

    Самый понятный и рабочий урок по vite react docker. Спасибо!

  • @yesdoit9914

    @yesdoit9914

    9 ай бұрын

    Добрый день! Удачи в программировании!!!

  • @AGM140580
    @AGM1405807 ай бұрын

    Просто и доходчиво! Спасибо!

  • @yesdoit9914

    @yesdoit9914

    7 ай бұрын

    Рад если Вам помогло мое видео!!!

  • @arthurshaidullin7981
    @arthurshaidullin798110 ай бұрын

    было полезно, спасибо

  • @yesdoit9914

    @yesdoit9914

    10 ай бұрын

    И Вам спасибо 👍

  • @eugeneeremin
    @eugeneeremin10 ай бұрын

    Спасибо помогло!

  • @yesdoit9914

    @yesdoit9914

    10 ай бұрын

    Рад что помог Вам!!! 👍

  • @samolevich
    @samolevich6 ай бұрын

    Супер

  • @yesdoit9914

    @yesdoit9914

    6 ай бұрын

    Рад если мое видео было Вам полезно! 🙂👍

  • @samolevich

    @samolevich

    6 ай бұрын

    @@yesdoit9914еще как!

  • @alexpipin3693
    @alexpipin36932 ай бұрын

    спасибо выспался!

  • @yesdoit9914

    @yesdoit9914

    2 ай бұрын

    ))

  • @singlebw265
    @singlebw26520 күн бұрын

    Оставлю тут коммент как запускаю контейнер для разработки. Идея такова: Иногда запускаем паралельно контейнера других проектов что-то сравнить например и приходиться менять руками порты в docker. Ко всему прочему я отказался от docker-compose т.к. по сути один контейнер используется. Так же хотелось бы не вводить руками в терминале длинную строку запуска docker. Ко всему прочему что-бы не было траблов с папкой node_modules нужно запустить контейнер установить зависимости и они подтянутся, а не при билде как это делают многие. Поэтому я не использую CMD ["npm", "start"] Dockerfile FROM node:20-alpine ARG APP_IN_CONTAINER=/home/app RUN apk add curl nano WORKDIR $APP_IN_CONTAINER COPY package.json . ENV CHOKIDAR_USEPOLLING=true COPY . . ENTRYPOINT ["sh"] далее создаём в корне проекта docker-start.sh и перемещаем код корректирую имя_вашего_image и сопоставляйте port если в vite не 3000 #!/usr/bin/env bash declare listPorts=($(docker inspect --format='{{ (index (index .NetworkSettings.Ports "3000/tcp") 0).HostPort }}' $(docker ps -q)) ) portStart=3000 for i in ${listPorts[@]} do if [ $i -gt $portStart ] then portStart=$i fi done localport=$((portStart + 1)) echo "Container used port: $localport" docker run -p $localport:3000 -v /$(pwd):/home/app --rm -it --name $(npm run env | grep "npm_package_name" | awk -F "=" '{print $2}') имя_вашего_image vite.config.ts устанавливайте в defineConfig server: { host: true, port: 3000, // open: true }, .dockerignore node_modules .dockerignore Dockerfile последний штрих в package.json "scripts": { "dstart": "bash ./docker-start.sh", "dev": "vite", ... }, теперь запускаем контейнер (порт будет меняться автоматом если 3000 занят на локальной машине. Так же имя контейнера связано с именем проекта) npm run dstart вас перекидываем в контейнер там всё как делали раньше npm install // 1й раз npm run start

  • @pir0zh0kDevTV
    @pir0zh0kDevTV5 ай бұрын

    Спасибо! Конечно, все равно ничего не работает, но спасибо!

  • @yesdoit9914

    @yesdoit9914

    5 ай бұрын

    Приветствую! можешь скинуть ссылку на свой проект мне на почту я посмотрю где ошибка

  • @mymail333g
    @mymail333g9 ай бұрын

    Столкнулся с проблемой, что из под Docker не хотело работать. Помог ваш совет по поводу настройки объекта server. Только я оставил два параметра: host и port. usePolling: true - это под винду WSL2, а у меня linux, да и у вас, я так понимаю, тоже linux strictPort - тоже не нужен оказался, у меня эти порты свободны

  • @yesdoit9914

    @yesdoit9914

    9 ай бұрын

    Классно что смогли разобраться ! Успехов Вам !

  • @TheTempest_
    @TheTempest_4 ай бұрын

    Гад блесс ю

  • @yesdoit9914

    @yesdoit9914

    4 ай бұрын

    )

  • @indigosay
    @indigosay11 ай бұрын

    Горячая перезагрузка не работает во время правок

  • @yesdoit9914

    @yesdoit9914

    11 ай бұрын

    Добрый вечер Вы работаете в VSCode?

  • @indigosay

    @indigosay

    11 ай бұрын

    @@yesdoit9914 да

  • @yesdoit9914

    @yesdoit9914

    11 ай бұрын

    @@indigosay Сборщик Vite используете? как на видео? Установлены ли у вас Babel JavaScript в VSCode Extentions?

  • @yesdoit9914

    @yesdoit9914

    11 ай бұрын

    @@indigosay Live Server в VSCode Extentions

  • @yesdoit9914

    @yesdoit9914

    11 ай бұрын

    1) попробуйте зайти в настройки и проверить vite.config.js server: { Проверить эту строку должно быть true hmr: { overlay: true, }, }, 2) Важно какой браузер используете по умолчанию 3) Попробуйте сбросить кэш браузера и перезапустить приложение Vite и сам VSCode 4) проверьте есть ли ошибки в консоли в браузере когда запускается ваша страничка (не должно быть конфликтов) 5) Возможно есть какието extention которые конфликтуют с сборщиком. Как вариант можно попробовать переустановить VSCode

  • @AGM140580
    @AGM1405807 ай бұрын

    Сначала я пытался в Dockerfile выполнять команду npm run build а затем запускать приложение с помощью строки CMD ["npm", "run", "preview"] При этом приложение вне контейнера оставалось недоступно. Помогла настройка vite.config.js preview: { host: true, port: 8080, }, по аналогии с настройкой server.

  • @yesdoit9914

    @yesdoit9914

    7 ай бұрын

    Приветствую доступ к контейнеру получить можно через exec

Келесі