2022-03-07 学习docker开发vue前端

利用Docker容器搭建高效的Node.js开发环境

https://zhuanlan.zhihu.com/p/28438774

开发环境优化

把数据保存在容器中并不是一种值得推荐的做法，抛开Docker守护进程和容器本身的稳定性不说，容器也存在一定被误删的可能性。 而这种共享卷的方式有个更麻烦的问题是所有想利用这个缓存卷的容器目录结构都必须是 /project/node_modules，这样的限制就显得很不友好了。 另外用来缓存卷的容器基本上算是浪费了，起不到什么实质性的作用。

顺着挂载卷这条线索继续往下找，便可以发现更好的解决方法：创建一个Docker volume用来共享容器间的数据。

docker volume create node_modules7

首先的好处便是这个volume可以叫任意名字，也可以挂载到容器不同的路径下。这里之所以加上“7”是因为不同npm版本组织模块的方式会有些不同，这里通过对node版本号来进行标注，表示这些模块可用于Node.js 7版本。

这时候创建容器我们便可以用node_modules7这个volume进行挂载了

docker run -itd -v C:\Repo\project:/project -v node_modules7:/project/node_modules --name project node:7-alpine

这次我们安装underscore测试一下

docker exec -it project npm i underscore

依旧创建一个临时容器看看是否安装成功，不过我们挂载到容器的/app/node_modules目录下试试

docker exec -it --rm -v node_modules7:/app/node_modules -w /project node:7-alpine ls node_modules

显示underscore目录，表示模块共享成功。

我的笔记，多阶段构建镜像Dockerfile

FROM node:16.14.0-alpine3.15 AS install_deps
ARG HTTP_PROXY=""
ARG HTTPS_PROXY=""
WORKDIR /app
COPY ruoyi-ui /app
RUN yarn install

FROM node:16.14.0-alpine3.15 AS build
WORKDIR /app
COPY ruoyi-ui /app
COPY --from=install_deps /app/node_modules /app/node_modules
RUN yarn run build

FROM nginx:stable-alpine 
COPY --from=build /app/dist /usr/share/nginx/html

说明

使用如下docker build命令 多阶段构建镜像。
推荐提前安装 docker 社区版本。

docker build \
  -t my_http_service:latest \
  -f Dockerfile .

# 备注:
# 如果无法上外网或需要科学上网取回国外github服务器的资源，
# 则需要指定本地的代理服务器地址。
# 如下所示添加--build-arg
# docker build \
#   --build-arg HTTP_PROXY="http://172.16.5.115:8580" \
#   --build-arg HTTPS_PROXY="http://172.16.5.115:8580"  \
#   -t my_http_service:latest \
#   -f Dockerfile .

启动

上述命令编译成功后，使用docker run启动 http 服务

docker run -itd --rm -p 8080:80 my_http_service

docker volume create cached_node_modules

docker run -it --rm \
  -v `pwd`/ruoyi-ui:/app \
  -v cached_node_modules:/app/node_modules \
  -w /app \
  -e https_proxy="http://172.16.5.115:8580" \
  -e http_proxy="http://172.16.5.115:8580" \
  --name myvue \
  node:lts-alpine yarn install

docker run -it --rm \
  -v `pwd`/ruoyi-ui:/app \
  -v cached_node_modules:/app/node_modules \
  -w /app \
  --name my_vue_build node:lts-alpine yarn run build

docker build \
  --build-arg HTTP_PROXY="http://172.16.5.115:8580" \
  --build-arg HTTPS_PROXY="http://172.16.5.115:8580"  \
  -t vue_nginx_test1:latest \
  -f Dockerfile .