前端Docker 的相关实践

个人记录贴

省流重点: ENV CHOKIDAR_USEPOLLING=true

先贴上docker 相关简易教程 www.runoob.com/docker/dock…

目标: 实现一个前端docker镜像环境, 可以 pull 下来随时在任意电脑无前端开发配置环境中运行项目

这里需要docker 相关配置好

这里我使用vue create 一个hello world 项目

然后新建一个dockerfile 文件如下

FROM node:14

# 在容器内创建一个工作目录
WORKDIR /usr/src/app

ENV CHOKIDAR_USEPOLLING=true 
# 暴露容器内部的端口,项目默认启动就有一个端口所以这里不用暴露
# EXPOSE 8080


# COPY package.json .
# RUN npm install

# VOLUME /usr/src/app

# 启动开发服务器
CMD ["npm", "run","serve"]

# docker build -t frontend-volume .

# docker run -d -p 1234:8080 -v D:\Work\template\vue-simple:/usr/src/app frontend-volume
# docker run -d -p 1234:8080 --mount type=bind,source="D:\Work\template\vue-simple",target=/usr/src/app frontend-volume

# docker run -d -p 1234:8080 --mount source=vue_simple_volume,destination=/usr/src/app frontend-volume

经过我的实践 必须设置 ENV CHOKIDAR_USEPOLLING=true 用于前端项目的热更新

gpt解释:

ENV CHOKIDAR_USEPOLLING=true 这行代码是在 Dockerfile 中设置环境变量 CHOKIDAR_USEPOLLING 的值为 true。这涉及到前端开发中的文件监视和热更新机制。

在前端开发中，通常会使用类似于 webpack-dev-server 或者 Parcel 这样的工具来进行本地开发和调试。这些工具会通过监视文件系统来检测文件的变化，并在文件发生变化时自动重新构建项目或刷新页面，以实现热更新的效果。而在某些情况下，特别是在使用 Docker 容器进行开发时，文件系统的监视机制可能会受到限制或性能影响，这就需要通过设置 CHOKIDAR_USEPOLLING 环境变量来解决这个问题。

具体来说，CHOKIDAR_USEPOLLING 是针对 Chokidar 文件监视库的一个环境变量设置。Chokidar 是一个用于 Node.js 的文件和目录监视模块，它可以监听文件的变化并触发相应的操作。而在一些特定的环境下（比如在 Docker 容器内），文件系统的事件监听机制可能无法正常工作，这时可以通过设置 CHOKIDAR_USEPOLLING=true 来强制 Chokidar 使用轮询方式来监视文件系统的变化，从而确保文件的修改能够被及时检测到。

因此，这行代码的作用是告诉 Chokidar 在 Docker 容器内使用轮询方式来监视文件系统的变化，以解决文件监视在某些环境下不正常的问题，从而确保前端开发的热更新能够正常工作

然后 docker build -t frontend-volume . 打包成一个镜像

最后端口映射 以及目录映射 运行即可, 利用docker volumes 将本地项目挂载运行到实例去

docker run -d -p 1234:8080 -v D:\Work\template\vue-simple:/usr/src/app frontend-volume

此时即可访问localhost:1234 看到前端项目, 然后本地修改, 可以实现热更新

最后如果想要在其他电脑运行, 将镜像发布一下就即可, 这里主要是一个简易实现一个运行环境其他均为考虑

---

如果想将打包后的dist 文件来进行运行的话如下:

创建dockerfile

# 这个用于打包后, 直接部署运行, 此时的镜像就包含一个nginx
FROM nginx:latest
LABEL Author zhtx

COPY dist /usr/share/nginx/html

COPY default.conf /etc/nginx/conf.d/default.conf

# docker build -t xx .

# docker run -d --name xx -p 8888:80 vue3project

#docker ps  docker stop xx

创建default.conf 配置, 以前端项目为例

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location /xxxx {
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

之后build 一下, 然后run一下做端口映射即可