从零到一，记录docker运行一个web端项目

使用docker将一个前端项目打成一个镜像，并且将其创建一个容器运行起来；

一、docker安装及配置

安装不详细描述，大家可以自行网上搜索相关教程

配置

首先需要登陆 docker client；

其次需要配置国内镜像源，Docker Desktop 设置里 Settings → Docker Engine → 修改成：

json 复制代码

{
  "registry-mirrors": [
    "https://docker.mirrors.ustc.edu.cn",
    "https://mirror.baidubce.com",
    "https://registry.docker-cn.com"
  ]
}

保存重启，客户端的配置就差不多了。

二、前端项目的配置

在前端项目需要新增两个文件：

2.1 `Dockerfile`

bash 复制代码

FROM node:lts-alpine
# FROM node:8.4
COPY . /app
WORKDIR /app
RUN npm install --registry=https://registry.npm.taobao.org
EXPOSE 3000

上面代码一共五行，含义如下<摘自，阮一峰老师博客>

FROM node:8.4：该 image 文件继承官方的 node image，冒号表示标签，这里标签是8.4，即8.4版本的 node。

COPY . /app：将当前目录下的所有文件（除了.dockerignore排除的路径），都拷贝进入 image 文件的/app目录。

WORKDIR /app：指定接下来的工作路径为/app。

RUN npm install：在/app目录下，运行npm install命令安装依赖。注意，安装后所有的依赖，都将打包进入 image 文件。

EXPOSE 3000：将容器 3000 端口暴露出来，允许外部连接这个端口。

node:lts-alpine 介绍

node:lts-alpine 是一个 Docker 镜像标签（tag） ，它其实是对官方 Node.js 镜像的一种"轻量化版本"命名方式。

node:lts-alpine = Node.js 官方长期支持版本（LTS） + 基于 Alpine Linux 的轻量系统。

部分	含义
`node`	镜像名称，来自 Docker Hub 官方 Node.js 仓库（hub.docker.com/_/node）
`lts`	"Long Term Support" 长期支持版本（比如 20.x LTS）
`alpine`	镜像底层操作系统是 Alpine Linux，体积极小，非常适合生产环境部署

2.2 `.dockerignore`

lua 复制代码

.git
node_modules
npm-debug.log
dist
.vscode

三、终端操作

创建镜像：

arduino 复制代码

docker image build -t koa-demo .

-t参数用来指定 image 文件的名字，后面还可以用冒号指定标签。如果不指定，默认的标签就是latest。
. 表示 Dockerfile 文件所在的路径，上例是当前路径，所以是一个点

创建过程中遇到报错：

ini 复制代码

docker image build -t vite-vue .                                                            
[+] Building 32.7s (3/3) FINISHED                                                                            docker:desktop-linux
 => [internal] load build definition from Dockerfile       
 => => transferring dockerfile: 150B         
 => ERROR [internal] load metadata for docker.io/library/node:20.19.0      
 => [auth] library/node:pull token for registry-1.docker.io                  
------
 > [internal] load metadata for docker.io/library/node:20.19.0:
------
Dockerfile:1
--------------------
   1 | >>> FROM node:20.19.0
   2 |     COPY . /app
   3 |     WORKDIR /app
--------------------
ERROR: failed to build: failed to solve: node:20.19.0: failed to resolve source metadata for docker.io/library/node:20.19.0: pull access denied, repository does not exist or may require authorization: server message: insufficient_scope: authorization failed

解决方案：

由于配置的国内源无法使用造成，从新配置docker源，配置在上文中，然后执行：

perl 复制代码

docker info | grep -i mirror         
返回：
 Registry Mirrors:
  https://docker.mirrors.ustc.edu.cn/
  https://mirror.baidubce.com/

能正常返回数据，说明源能正常使用。至此，镜像创建完成✅

生成容器

执行如下命令：

arduino 复制代码

docker container run -p 8000:3000 -it vite-vue /bin/bash

报错信息：

php 复制代码

node:internal/modules/cjs/loader:1423

throw err;

^

Error: Cannot find module '/bin/bash'

at Module._resolveFilename (node:internal/modules/cjs/loader:1420:15)

at defaultResolveImpl (node:internal/modules/cjs/loader:1058:19)

at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1063:22)

at Module._load (node:internal/modules/cjs/loader:1226:37)

at TracingChannel.traceSync (node:diagnostics_channel:328:14)

at wrapModuleLoad (node:internal/modules/cjs/loader:244:24)

at Module.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:154:5)

at node:internal/main/run_main_module:33:47 {

code: 'MODULE_NOT_FOUND',

requireStack: []

}

Node.js v24.11.0

基础镜像是 node:lts-alpine ，而 Alpine Linux 默认没有 /bin/bash ，只有 /bin/sh。

运行前端项目

arduino 复制代码

npm run dev

报错，信息如下：

less 复制代码

vite-test@0.0.0 dev

> vite

/app/node_modules/rollup/dist/native.js:59

•   throw new Error(

•      ^

Error: Cannot find module @rollup/rollup-linux-arm64-musl. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.

Node.js v24.11.0

原因：

node:lts-alpine，底层是 Alpine Linux；
Alpine 使用 musl libc（不是标准 glibc）；
Rollup 在安装时，会尝试下载一个针对系统架构的 预编译二进制包 （例如 @rollup/rollup-linux-arm64-musl）；
npm 对 "optionalDependencies" 的安装逻辑在某些环境下会失败（尤其是 musl 系统），导致该模块没装上。

解决方案：

bash 复制代码

rm -rf node_modules package-lock.json
npm install

然后运行 npm run dev 项目正常运行，前端项目的端口是 3000，理论上映射到本机的 8000端口；但是当浏览器访问本地 8000 端口时，不能正常访问；

搜索之后得知：

前端项目监听的 host 必须是 0.0.0.0，否则只绑定容器内部的 localhost，宿主机访问不到。

yaml 复制代码

export default {
  server: {
    host: '0.0.0.0',
    port: 3000
  }
}

详细解释

0.0.0.0 的含义：这是一个特殊的 IP 地址，表示"所有可用网络接口"。

作用：

它允许你的开发服务器同时监听你的本地 IP 地址、Wi-Fi IP 地址等所有网络接口。

这非常适合在局域网环境中使用，例如你可以在手机或其他设备上通过你电脑的局域网 IP 地址来访问你正在开发的应用。

与 localhost 的区别：

localhost（或 127.0.0.1）只能让服务器在本地电脑上访问。

0.0.0.0 则将服务器开放给局域网内的其他设备。

至此，本机已经能正常访问容器内部的服务了。

从零到一，记录docker运行一个web端项目

一、docker安装及配置

配置

二、前端项目的配置

2.1 Dockerfile

2.2 .dockerignore

三、终端操作

创建镜像：

生成容器

运行前端项目

2.1 `Dockerfile`

2.2 `.dockerignore`