用前端姿势玩docker【四】基于docker快速构建webpack的开发与生产环境 (2)

cnpm:不存在锁版本,目的是使用符合严格规范的包(按照 大.中.小 来说, 大版本的数字代表的重大的更新, 中版本的数字代表着功能迭代,但要向下兼容,小版本则代表bug修复), 默认安装大版本下最新的包。

yarn: 存在锁机制,使用yarn.lock(version字段、resolved字段共同起作用)
install 时安装时间长主要因为源不够稳定快速,nrm是一个解决方案。

其次主要涉及一些特殊的包例如: node-sass,这个包在不同的node大版本下,兼容的版本是不同的:
| NodeJS | Minimum node-sass version | Node Module |
| :---: | :---: | :---: |
| Node 14 | 4.14+ | 83 |
| Node 13 | 4.13+ | 79 |
| Node 12 | 4.12+ | 72 |
| Node 11 | 4.10+ | 67 |
| Node 10 | 4.9+ | 64 |
| Node 8 | 4.5.3+ | 57 |

坑点六:-v 挂载卷后,容器内文件被清空

我们起初的想法是,通过本机目录挂载容器目录,从而实现修改源码的目的,但实际操作中会出现挂载后容器内 挂载卷内的文件缺失的情况。主要原因如下:
宿主机 /home/files/src 与 容器 /home/src 相挂载, 是以宿主机目录 /home/files/src/ 为基准,若起初宿主机目录为空,容器对应目录存在文件,则挂载后,容器内文件会被清空。在此有个小技巧: 大部分情况下源码都在版本控制器中,以git为例,容器内文件被清空后,可以通过 git status 查看,是存在操作记录的,所以清空操作与git并不冲突, 使用正则做部分匹配还原即可:

git checkout -- src/**

其次数据的通信、备份、恢复等操作可以通过数据卷容器,可以回看我的第一篇文章。

坑点七:宿主机访问docker容器内webpack-dev-server,端口映射失败

这里首先要ping 一下127.0.0.1 保证本地的回环地址是通的,并且TCP/IP功能正常。

其次最重要的一点就是 webpack-dev-server的配置中要确保host设置为: 0.0.0.0
devServer: { ... host: '0.0.0.0', port: '9999', }

然后使用 docker run 做端口映射即可

docker run -it -p 9999:9999 <image>:<tag> 坑点八:在宿主机访问后,webpack 热更新失败

当时想达到的效果就是通过容器执行dev操作,开启webpack-dev-server做端口映射,宿主机浏览器直接访问相应网址, 由于挂载卷中的文件与容器相连,修改后可根据热更直接显示在宿主机浏览器上,这样就大功告成了。
但实际操作过程是这样的:

首先开启容器

docker run -it -v /Users/tate/Documents/work/geek/docker/ws/src:/home/webpack-multipage-cli/src -p 9999:9999 ws:1 /bin/bash

在对应目录下执行 npm run dev 启动开发模式

在宿主机浏览器使用 localhost 访问, 成功访问。

修改挂载的数据卷中的文件,检查是够能够热更新

热更新失败,但是刷新后,修改内容生效。
解决此问题需要保证以下几点:

按照坑七将devServer的host修改为 0.0.0.0

将webpack的output配置按照以下修改:

// 此处的publicPath的端口号要与devServer中相同 module.exports = { output: { publicPath: `//localhost:9999/`, hotUpdateChunkFilename: 'js/hot-update-[name].js', hotUpdateMainFilename: `hot-update.json` } } * 在宿主机通过localhost或宿主机IP访问,避免通过0.0.0.0访问 成型 dockerfile配合shell脚本做差异化处理

解决上述问题后,可以再dockerfile中将宿主机的shell脚本copy至镜像中,在默认启动时执行:

COPY init.sh /home/ CMD ["/bin/bash", "-c", "/home/init.sh"]

init.sh 文件则根据传入的环境变量构建不同的环境 dev or build

# !/bin/bash source ~/.bash_profile cd /home/webpack-multipage-cli git checkout -- src/** page/** echo "WEBPACK_MODE: $WEBPACK_MODE" if [ $WEBPACK_MODE = 'dev' ]; then echo "running in develop mode" npm run dev else echo "running in build mode" npm run build fi

测试阶段的dockerfile也做一下展示,详细的可见github:https://github.com/pomelott/webpack-multipage-cli

FROM pomelott/webpack-cli WORKDIR /home/webpack-multipage-cli COPY init.sh /home/ COPY cli-config.js /home/webpack-multipage-cli/ COPY output.js /home/webpack-multipage-cli/config/dev/ RUN chmod -R +x /home/init.sh EXPOSE 9999 CMD ["/bin/bash", "-c", "/home/init.sh"] 实际使用

dev环境,挂载容器卷,端口映射开启热更
注: 因不需要手动执行 npm run dev ,所以不需要手动指定/bin/bash

docker run -it -p 9999:9999 -v /Users/tate/Documents/work/geek/docker/ws/src:/home/webpack-multipage-cli/src --env WEBPACK_MODE=dev pomelott/webpack-cli:latest

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpjdgz.html