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

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.shuangpin


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

![image-20250531195827292](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250531195827292.png)

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

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

---

### 1 · 准备目录结构

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

```bash
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 托管）

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

```dockerfile
# 构建阶段
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 配置文件如下：

```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 本地构建测试

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

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

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

#### 3.2 可选使用 docker-compose

如果本地调试可以使用
```yaml
version: '3'

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


#### 之前打包踩的坑

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

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

####  强制无缓存构建镜像

```bash
docker compose build --no-cache
```

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

#### 📦 查看磁盘空间占用详情

```bash
docker system df -v
```
![](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250603161544308.png)
> 查看镜像、容器、网络和卷的占用情况，排查“空间去哪了”。

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

```bash
docker system prune -af --volumes
```
![image-20250603161544308](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250603161544308.png)

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