1. 创建一个 mynginx的目录

2. 将前端代码文件夹（比如叫 front ）复制到 mynginx 目录下

3. 在mynginx 目录下创建一个名为Dockerfile 的文件（文件名不要改），文件内容如下：

# 使用官方的 Nginx 镜像作为基础镜像
FROM nginx:latest

RUN mkdir -p /app

# 将工作目录设置为 /app
WORKDIR /app

# 将宿主机 front目录下的文件复制到容器的 /app 目录
# 注意这里不要写绝对路径
COPY front/*   /app

# 删除nginx容器中代码目录中自带的文件
RUN rm /usr/share/nginx/html/*

# 将/app 中所有文件复制到 /usr/share/nginx/html/
RUN cp /app/*  /usr/share/nginx/html/

# 暴露 80 端口供外部访问
EXPOSE 80

# 容器启动时运行 Nginx
CMD ["nginx", "-g", "daemon off;"]

一定要注意，COPY 这一步 ，将宿主机上front文件夹中的文件复制到容器中，front目录一定不要写成绝对路径，我之前写的是绝对路径（/opt/myimages/mynginx/front/*）报错如下：

ERROR: failed to solve: lstat /var/lib/docker/tmp/buildkit-mount2707332014/opt/myimages/mynginx/front: no such file or directory

可以看到 最后在执行copy命令时前面 被加上了 这个目录，所以导致找不到front目录了：

/var/lib/docker/tmp/buildkit-mount2707332014

最后mynginx目录中的内容如下，可以看到front目录下有个a.html文件：

  

4. 创建镜像， 执行命令如下

docker build -t my-custom-nginx .

5. 运行镜像，执行命令如下

docker run -d -p 8080:80 --name my-custom-nginx-container my-custom-nginx

6. 测试

curl  http://127.0.0.1:8080/a.html