Vite + Docker создание docker image vite приложения и локальный запуск с помощью docker
HTML-код
- Опубликовано: 8 сен 2024
- Здесь выложены команды и код который я использовал
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 //остановка контейнера
Самый понятный и рабочий урок по vite react docker. Спасибо!
Добрый день! Удачи в программировании!!!
большое спасибо, ваше видео помогло разобраться с проблемой по рабочей задаче)
@@jekich_life_moto Приветствую! Круто!!!
Просто и доходчиво!
Спасибо!
Рад если Вам помогло мое видео!!!
было полезно, спасибо
И Вам спасибо 👍
Оставлю тут коммент как запускаю контейнер для разработки. Идея такова: Иногда запускаем паралельно контейнера других проектов что-то сравнить например и приходиться менять руками порты в 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
спасибо выспался!
))
Супер
Рад если мое видео было Вам полезно! 🙂👍
@@yesdoit9914еще как!
Гад блесс ю
)
Спасибо! Конечно, все равно ничего не работает, но спасибо!
Приветствую! можешь скинуть ссылку на свой проект мне на почту я посмотрю где ошибка
Столкнулся с проблемой, что из под Docker не хотело работать. Помог ваш совет по поводу настройки объекта server. Только я оставил два параметра: host и port.
usePolling: true - это под винду WSL2, а у меня linux, да и у вас, я так понимаю, тоже linux
strictPort - тоже не нужен оказался, у меня эти порты свободны
Классно что смогли разобраться ! Успехов Вам !
Горячая перезагрузка не работает во время правок
Добрый вечер Вы работаете в VSCode?
@@yesdoit9914 да
@@indigosay Сборщик Vite используете? как на видео? Установлены ли у вас Babel JavaScript в VSCode Extentions?
@@indigosay Live Server в VSCode Extentions
1) попробуйте зайти в настройки и проверить vite.config.js
server: {
Проверить эту строку должно быть true
hmr: {
overlay: true,
},
},
2) Важно какой браузер используете по умолчанию
3) Попробуйте сбросить кэш браузера и перезапустить приложение Vite и сам VSCode
4) проверьте есть ли ошибки в консоли в браузере когда запускается ваша страничка (не должно быть конфликтов)
5) Возможно есть какието extention которые конфликтуют с сборщиком. Как вариант можно попробовать переустановить VSCode
Сначала я пытался в Dockerfile выполнять команду
npm run build
а затем запускать приложение с помощью строки
CMD ["npm", "run", "preview"]
При этом приложение вне контейнера оставалось недоступно.
Помогла настройка vite.config.js
preview: {
host: true,
port: 8080,
},
по аналогии с настройкой server.
Приветствую доступ к контейнеру получить можно через exec
Спасибо помогло!
Рад что помог Вам!!! 👍