前言

最近总遇到切分支，改点小问题又切回去；
每次git stash && git stash pop，
然后重新起dev server，
非常影响心流
恰巧最近在玩docker，故想用其配个环境，每个切分支就new一个容器，改完留着也行、prune也行。美滋滋。
期间遇到些问题，抱着“好记性不如烂笔头”的想法，索性记下来以便日后检索，故作文以记之

正文

如果还没玩过docker，请先阅读这篇docker及docker-compose入门。
我这里直接分享Dockerfile和docker-compose.yml 文件 注意区分大小写

Dockerfile

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

FROM node:lts-alpine

EXPOSE 8000

RUN mkdir -p /home/node/app && \
    apk add --update --no-cache git openssh

WORKDIR /home/node/app

COPY ./package.json .
RUN npm install

COPY . .

ENV BRANCH = "master"

CMD ["sh", "-c", "git fetch && git checkout $BRANCH && git pull && npm install && npm start"]

docker-compose.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

version: '3.8'

services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    image: node-git:dev
    container_name: ${BRANCH:?err}
    environment:
      BRANCH: ${BRANCH:?err}
    volumes:
      - ~/.ssh:/root/.ssh
    ports:
      - ${PORT:-8005}:8000

注意

docker-compose传参参考资料
default values using typical shell syntax:

${VARIABLE:-default} evaluates to default if VARIABLE is unset or empty in the environment.
${VARIABLE-default} evaluates to default only if VARIABLE is unset in the environment.
Similarly, the following syntax allows you to specify mandatory variables:

${VARIABLE:?err} exits with an error message containing err if VARIABLE is unset or empty in the environment.
${VARIABLE?err} exits with an error message containing err if VARIABLE is unset in the environment.
${BRANCH:?err} 的意思是BRANCH这个环境变量必传

启动容器

1
2
3

$ export BRANCH = master
$ export PORT = 8020
$ docker-compose --file docker-compose.yml up -d

然后通过vscode 的 Remote - Containers插件的>attach to running container 进入容器。

最后访问http://localhost:8020查看页面， 完美

github demo

后记

Q&A

Q：webpack4 的 dev-server 改了没有热更

A：无解，实现机制的问题，建议升webpack5；或者本地拷贝几个备份，维护不同分支

Q：docker-compose rebuild？

A：命令上加 –build

参考资料

官方文档
入门