---
title: "08-docker部署网页编译器"
created: 2025-11-25
tags:
  - 项目筑基
---
# docker部署网页编译器

[[03-网页编译器实现|网页编译器实现]]

Docker 是一个容器化平台，用于封装应用程序及其所有依赖项，以便跨不同环境部署和运行。

它的核心思想是将一个应用程序及其依赖项打包到一个容器中，就像把一个应用程序放进一个盒子里。比如，在网站编译器项目中，我可以把HTML文件、JavaScript文件、Python环境、Node.js和npm等都拷贝进容器，确保所有依赖项都在一个独立的环境中。

FROM node:latest

WORKDIR /usr/src/app

COPY node.js/package\*.json ./

RUN npm install

COPY node.js/ .

COPY Editor.html .

EXPOSE 5000

CMD ["node", "app.js"]

这是一个Dockerfile，它用于构建Docker容器镜像，用于运行网页编译器项目。

**FROM node:latest**

选择基础镜像

它基于Node.js的官方镜像，并选择最新版本。

使得我的应用程序将在Node.js环境中运行

**WORKDIR /usr/src/app**

设置工作目录，在容器中，这个命令将创建并进入/usr/src/app目录，以便后续命令在这个目录下执行。

*COPY node.js/package.json ./*\*

将本地目录中的node.js文件夹下的所有以package开头的.json文件复制到容器的当前工作目录中。

**RUN npm install**

在容器中执行命令。这个命令在容器中执行，用于安装应用程序的Node.js依赖项，它会读取上一步复制的package.json文件，并下载所需的包。

**COPY node.js/ .**

将本地目录中的node.js文件夹的所有内容复制到容器的当前工作目录中。

**COPY Editor.html .**

将本地的Editor.html文件复制到容器的当前工作目录中。

**EXPOSE 5000**

声明容器将监听的端口。声明容器内部的应用程序将在端口5000上运行，但它并没有实际打开该端口。需要将容器映射到宿主机的端口才能从外部访问。

**CMD ["node", "app.js"]**

指定容器启动后默认要执行的命令。告诉容器在启动后运行node app.js，也就是启动网页编译器应用程序。

在这里可以看出 把所需的包 文件 环境 全放在了一起

如果要支持py 就还需要添加指令 下载py包# 更

如果网页的html要引用css

不能使用 `COPY css/*.css .`，这会将 `css` 目录下的所有 `.css` 文件复制到工作目录（`/usr/src/app`）

如果 HTML 文件中的 CSS 链接是基于 `css` 目录的（例如，`<link href="#root/Y4YdMorbZgRv" rel="stylesheet">`）需要使用`COPY css/ css/`将本地的 `css` 目录及其内容复制到容器的 `/usr/src/app/css/` 目录下。

这样的话 显然不可避免的会使得容器会很大（如果项目依赖越多）

但是可以发现

所有东西都放在了一个“容器”里面

这不就是封装吗 好处在后面再说

先把步骤走完

到现在 创建了一个Dockerfile（没有文件后缀 放在原项目根目录）

执行

**docker build -t web-compiler** .

docker build: 这部分指定了你要使用Docker命令行工具中的build功能。

-t web-compiler: 这是一个选项，用于指定构建的容器镜像的名称和标签（tag）。在这里，-t 表示 "tag"，后面的web-compiler是自己为容器镜像选择的名称和标签。这个名称和标签用于唯一标识容器镜像，可以根据自己的项目和需求来选择。

.: 这是构建上下文（build context）的路径。它告诉Docker在哪里查找Dockerfile和要复制到容器中的文件。在这个例子中，.
表示当前目录，也就是你的项目根目录。Docker会在当前目录查找Dockerfile，并将当前目录下的文件复制到容器中。

综合来说，这个命令告诉Docker从当前目录中的Dockerfile构建一个名为web-compiler的容器镜像，这个容器镜像将包含你的网页编译器应用程序及其依赖项。容器镜像的名称和标签是web-compiler，可以根据需要自定义它们。

**docker run -p 8000:5000 -d web-compiler**

docker run: 指定要使用Docker命令行工具中的run功能，用于运行一个Docker容器。

-p 8000:5000:p表示端口映射后面的参数用于指定它告诉Docker将容器内部的端口5000映射到主机的端口8000。换句话说，外部网络流量将通过主机的端口8000访问容器内部的应用程序，这使得你可以通过
<http://localhost:8000>访问容器内的应用程序。

-d: 表示在后台运行容器。也就是说，容器将在后台作为一个守护进程运行，而不会占用你的终端会话。

web-compiler: 要运行的容器镜像的名称。在这里，指定了之前构建的web-compiler容器镜像。

综合来说，这个命令告诉Docker运行一个以web-compiler容器镜像为基础的容器，并将容器内部的端口5000映射到主机的端口8000上，同时以后台模式运行容器。这使得你的网页编译器应用程序可以通过
[http://localhost:8000访问。](http://localhost:8000%E8%AE%BF%E9%97%AE%E3%80%82)

后端app.js搭建在5000端口 docker将50000端口映射到8000端口 前端html处根据是由文件夹打开还是由localhost打开选择链接5000端口还是8000端口

这种将一个项目打包在一个容器中的方法

显然

可以显著简化应用程序的部署和维护过程，因为它提供了独立的运行环境，避免了环境差异和依赖问题。并且每个 Docker 容器都有自己的隔离环境，就像应用程序的私人世界，不会受到其他容器的影响。这意味着一个容器的问题不会影响其他容器。（比如我电脑中triliun在8080
该项目在8000）

以及以下优点

轻量快速：容器非常轻量，可以在几秒内启动和停止。这使得应用程序可以迅速适应变化的负载。（要停止一个项目 直接在dorker-desktop中按下暂停键
几秒就停止了）

一致性： Docker 可以确保应用程序在不同环境中运行一致，无论是在开发人员的笔记本电脑、测试服务器还是生产服务器上。（程序所需要的东西都在包里
跟外部无关）

易于部署： Docker 可以帮助轻松地在不同的计算机和云平台上部署应用程序，而不用担心依赖和环境问题。

快速开发： Docker 可以加速应用程序的开发过程，因为它可以在容器中构建和测试应用程序，减少了开发环境的设置时间。

容器编排： Docker 提供了容器编排工具，可以管理大规模容器的部署和扩展，如 Docker Compose 和 Kubernetes。

总之，Docker 就像一个魔法盒子，可以帮助开发人员更轻松、更可靠地构建、部署和管理应用程序。它的功能性在于创建隔离的应用程序环境，使应用程序更容易管理和可移植。不管你是开发者还是运维人员，Docker
都能提高工作效率，降低了工作的复杂性。

关于易于部署

如果我想把我的这个网页编译器移植到其他电脑 只需要

1、在当前计算机上导出容器镜像：

**docker save -o my\_container\_image.tar my\_container\_image:tag**

(docker save -o web\_compiler.tar web\_compiler:latest)

![[image-f531ebc7.png]]

2、将 my\_container\_image.tar 文件传输到目标计算机，可以使用各种方式进行传输。

3、在目标计算机上导入容器镜像：

**docker load -i my\_container\_image.tar**

4、使用导入的容器镜像在目标计算机上运行容器：

**docker run -d -p 8000:5000 my\_container\_image:tag**

这就可以让目标计算机上启动与我在当前计算机上配置的容器相同的容器，实现了移植。

当然 前提是目标计算机下载了docker

就像个软件一样

压缩成zip 发给别人 对方解压即用

**理解Docker中的WORKDIR和磁盘映像位置**

在Docker中，'WORKDIR'和'磁盘映像位置'各自发挥不同的作用，并在不同的上下文中运行。理解这两者之间的区别有助于有效管理Docker容器及其存储。

**WORKDIR（容器内部路径）**

Dockerfile中的'WORKDIR'指令指定了Docker容器内的工作目录。这个路径是容器内部文件系统的一部分，与宿主机的文件系统完全隔离。例如，Dockerfile中的'WORKDIR
/usr/src/app'将'/usr/src/app'设置为容器内的工作目录。这个目录是容器命令执行的地方，它并不直接链接到宿主机的物理存储。

**磁盘映像位置（宿主机路径）**

Docker设置中的'磁盘映像位置'指的是宿主机上Docker存储其数据的物理位置。这包括容器映像、卷和其他必要数据。更改此位置，例如更改到不同的驱动器（例如，E:驱动器），会影响Docker的虚拟磁盘映像在宿主机上的存储位置。然而，这种改变并不影响容器内部使用的结构或路径。

要想不占用c盘空间

只需

更改Docker存储位置:

打开Docker Desktop。

进入设置（Settings）。

找到“资源”（Resources）部分。

在“磁盘映像位置”（Disk image location）中，选择新的存储位置，比如你希望的E盘。

应用更改并重启Docker。

![[image-f0c5748d.png]]

![[image-4d7a6d21.png]]

![[image-5857d906.png]]

![[image-ea98d645.png]]

---
⬅️ [[07-Compose-编排实操|Compose 编排实操]] 🏠 [[00-网络与项目|00-网络与项目]] ➡️ [[09-使用docker部署在线编译器到服务器|使用docker部署在线编译器到服务器]]