首页 > 解决方案 > Docker compose watch 和 web live reload

问题描述

我设法能够直接使用 docker-compose 和 Makefile 进行开发观察。

FROM node:alpine as init
ADD package.json .
ADD package-lock.json .

FROM init as install
RUN npm install

FROM install AS build
ADD _javascript _javascript
ADD _sass _sass
ADD package.json .
ADD .babelrc .
RUN npm run deploy

FROM scratch as release
COPY --from=build /css /public
COPY --from=build /js /public
ADD index.html /public

FROM node:alpine as dev
RUN npm install --global http-server
EXPOSE 80
CMD http-server /public -p 80 -c-1
COPY --from=release /public /public

码头工人撰写文件:

version: '3.7'

services:
  release:
    build:
      context: .
      target: release
    image: ${IMAGE_NAME?}:${IMAGE_TAG?}

  dev:
    build:
      context: .
      target: dev
    image: ${IMAGE_NAME?}/dev:${IMAGE_TAG?}

然后使用 watchexec 的 Makefile:

all: dev
    watchexec make dev

dev:
    docker-compose build dev
    docker-compose up --remove-orphans --detach dev
    docker-compose ps

clean:
    docker-compose down --remove-orphans

这非常好用,当我编辑 JS 文件、CSS 文件甚至 Dockerfile 时,我可以随时获得一个更新良好的运行项目。

使用 docker 缓存构建,只完成所需的部分。

但是我缺少一件事:如果可能的话,具有实时重新加载和 CSS 注入的静态服务器。

您将如何像我一样使用 docker watch 来实现这一点?

标签: dockerdocker-compose

解决方案


我终于用livejs解决了我的问题:http: //livejs.com/

它会定期检查是否对 css、js 或 html 内容进行了更改,并在必要时更新 CSS 或重新加载页面。

没有复杂的东西,只包括脚本,瞧!


推荐阅读