懒猫微服进阶心得（六）：以纸砚双拼为例，快速移植纯前端项目到懒猫微服

之前移植了一款颜值极高的纸砚双拼，想着纯前端类的软件应该都是一样的操作，所以把操作记录下来，方便以后复习查看，也相当于一个教程吧。

对于这种场景来说，前端项目开发完成后，我们将构建好的静态页面部署到服务器上。借助 Docker 和 Nginx，可以实现一套轻量、快速、可移植的部署方式，特别适合懒猫微服这种容器化的环境，也很适合日常调试测试使用。

下面将手把手教你如何打包一个 Vue 或 React 项目，并通过 Docker + Nginx 构建一个可复用的前端部署容器镜像，然后就可以把这个部署到懒猫微服删，当然也适用于各种 Linux + Docker 环境。

1 · 准备目录结构

纸砚双拼是Vue的项目，所以直接执行这个命令打包

npm i
npm run build

打包完成后，项目根目录下会生成一个 dist/ 文件夹，里面包含：

• index.html
• 静态 JS、CSS 资源
• 图片等其他引用资源

基本所有前端工程化的流程都是部署这个dist/静态目录。

在开始容器化之前，我们先来整理一下项目结构。

my-static-site/
├── dist/                  # 前端打包后的静态资源目录
├── nginx.conf             # Nginx 配置文件
├── Dockerfile             # Docker 构建文件
└── docker-compose.yml     # docker-compose 管理配置（可选）

主要就是把 dist/ 目录映射到Nginx的根目录。

.dockerignore（防止把 node_modules 等大文件复制进镜像）

项目根目录建议加个 .dockerignore 文件，防止无用文件进入镜像、浪费空间：

node_modules
.git
.vscode
*.log
dist

这里的 dist 虽然是构建产物，但因为我们用的是双阶段构建，会在容器里重新生成，不需要提前放入。

2 · Dockerfile（双阶段构建：先构建，再用 Nginx 托管）

我们采用双阶段构建方案，能够最大限度减小最终镜像体积，只包含运行时必须的内容。

# 构建阶段
FROM node:18-alpine AS build

WORKDIR /app

# 复制package.json和package-lock.json
COPY package*.json ./

# 安装依赖 - 使用npm install代替npm ci
RUN npm install

# 复制源代码
COPY . .

# 构建应用
RUN npm run build

# 生产阶段
FROM nginx:alpine

# 复制构建产物到nginx目录
COPY --from=build /app/build /usr/share/nginx/html

# 复制nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露80端口
EXPOSE 80

# 启动nginx
CMD ["nginx", "-g", "daemon off;"]

• 使用 node:alpine 和 nginx:alpine 轻量镜像，构建出来的镜像体积非常小
• 分阶段构建，确保生产镜像中没有多余文件

nginx.conf（自定义 Nginx 配置）

Nginx 配置文件如下：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 禁止缓存 index.html，确保始终获取最新版本（避免缓存导致更新不生效）
    location = /index.html {
        root   /usr/share/nginx/html;
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }

    # 静态资源缓存设置
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        root   /usr/share/nginx/html;
        expires 1d;
    }

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

3 · 构建与部署

3.1 本地构建测试

执行以下命令构建镜像并启动：

docker build -t my-frontend .
docker run -p 8080:80 my-frontend

打开浏览器访问 http://localhost:8080，确认页面正常显示。如果用的是懒猫微服，可通过它的 web 浏览器或 ssh 转发方式访问容器。

3.2 可选使用 docker-compose

如果本地调试可以使用

version: '3'

services:
  cors-tester:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    restart: unless-stopped

之前打包踩的坑

打包多了之后Docker 会积累不少旧镜像、缓存和挂载卷，下面这些命令能够清理磁盘空间：

使用pg-docker或者lzc-docker来替代

强制无缓存构建镜像

docker compose build --no-cache

不使用任何缓存，适合依赖变动或调试构建问题时使用。

📦 查看磁盘空间占用详情

docker system df -v

查看镜像、容器、网络和卷的占用情况，排查“空间去哪了”。

🧹 强制清理所有未使用资源（含挂载卷）

docker system prune -af --volumes

删除所有未使用的镜像、容器、网络和卷，释放最大磁盘空间。
注意：慎用，可能会清掉你没保存的 volume 数据。