本文将指导你如何为一个结合了 Prisma 和 Nuxt.js 的全栈项目创建优化后的 Docker 镜像，并使用 pnpm 作为包管理器。

我的项目最终镜像大小从 1.12GB 缩减到了 160.21MB。

我的项目构成

Nuxt.js 是一个基于 Vue.js 的服务器端渲染应用框架，非常适合于构建现代化的 Web 应用。

我的项目直接采用 Nuxt 构建全栈项目。

• Nuxt3
• Prisma
• PNPM

开始构建

首先，我们将使用 node:20-alpine 这个更轻量级的基础镜像来减小最终镜像的大小。Alpine Linux 因其安全、简单且体积小而广受欢迎。

多阶段构建是减少 Docker 镜像大小的有效策略之一。我们将使用三个阶段来构建我们的镜像。

第一阶段：构建依赖项

1
2
3
4
5
6
7
8
9
10
11

ARG NODE_VERSION=node:20-alpineFROM $NODE_VERSION AS dependency-baseWORKDIR /appRUN npm install -g pnpmCOPY package.json pnpm-lock.yaml ./RUN pnpm install --frozen-lockfile`

这一阶段负责安装我们项目的依赖项。我们使用了 pnpm 来代替 npm，pnpm 在缓存和磁盘使用上更为高效。

大部分项目也用 pnpm 而不是 npm 作为包管理工具了。

第二阶段：构建应用程序

1
2
3
4
5

FROM dependency-base AS production-baseCOPY . .RUN pnpm run build

在这一阶段，我们复制了项目代码并执行构建命令。这里的构建指的是 Nuxt.js 的构建过程，它会生成静态文件和服务器端渲染所需的资源。

第三阶段：生成生产镜像

1
2
3
4
5
6
7
8
9
10
11
12
13
14

FROM $NODE_VERSION AS productionCOPY --from=production-base /app/.output /app/.outputENV NUXT_HOST=0.0.0.0 \    NUXT_APP_VERSION=latest \    DATABASE_URL=file:./db.sqlite \    NODE_ENV=productionWORKDIR /appEXPOSE 3000CMD ["node", "/app/.output/server/index.mjs"]

最后，我们创建了适用于生产环境的镜像。这个镜像仅包含用于运行应用程序的必要文件，减少了不必要的层，使得镜像尽可能地保持精简。

我们还定义了一些环境变量，比如 NUXT_HOST 和 DATABASE_URL，这些是 Nuxt.js 应用和 Prisma 所需要的。其中，DATABASE_URL 被设置为使用项目根目录下的 SQLite 文件作为数据库。

最终通过暴露端口 3000 并指定启动命令来运行 Nuxt.js 应用程序。

不同构建方式的镜像大小比较

分别为：

• 3 步构建
• 2 步构建
• 直接构建

Dockerfile 总览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# Use a smaller base imageARG NODE_VERSION=node:20-alpine# Stage 1: Build dependenciesFROM $NODE_VERSION AS dependency-base# Create app directoryWORKDIR /app# Install pnpmRUN npm install -g pnpm# Copy the package filesCOPY package.json pnpm-lock.yaml ./# Install dependencies using pnpmRUN pnpm install --frozen-lockfile# Stage 2: Build the applicationFROM dependency-base AS production-base# Copy the source codeCOPY . .# Build the applicationRUN pnpm run build# Stage 3: Production imageFROM $NODE_VERSION AS production# Copy built assets from previous stageCOPY --from=production-base /app/.output /app/.output# Define environment variablesENV NUXT_HOST=0.0.0.0 \    NUXT_APP_VERSION=latest \    DATABASE_URL=file:./db.sqlite \    NODE_ENV=production# Set the working directoryWORKDIR /appEXPOSE 3000# Start the appCMD ["node", "/app/.output/server/index.mjs"]

作为一个拥有全端加密且能进行端到端连接的服务。Tailscale 现在的免费账户已经支持连接 100 台设备，这对于个人用户来说绰绰有余。我的内网设备几乎都在使用 Tailscale 连接。在前段时间发布的 用 VS Code 管理服务器，我有独特的服务器管理方式 中表明我很喜欢用 Remote SSH，我经常借住 Tailscale 组成的内网使用 Remote SSH 进行远程开发。

然而，Tailscale 在中国大陆的网络环境中存在一个问题，就是经常出现高延迟或者连接不上的情况。好在官方允许用户自建 DERP 服务，以充当中继，解决这个问题。再也不用担心写代码写一半就突然断了，而且优秀的网络体验也能提高 VS Code 的 Port Forward 的体验，方便远程预览开发。

由于我本身就有一台低配置的云服务器，过去曾经使用 Caddy 作为反向代理服务器来运行我的 Alist 项目。所以这次也考虑在同一台服务器上使用 Caddy 作为反向代理来部署 DERP 项目。

采用 Caddy 主要是他相比较于 Nginx 使用很简单的配置就能满足大部分需求，还有体验良好的自动 SSL 管理。能省很多事。

废话不多说，直接开始配置了。

配置 Docker

1
2
3
4
5
6
7
8
9
10
11

// docker-compose.ymlversion: '3'services:  derper:    image: fredliang/derper    restart: always    ports:      - 3478:3478/udp      - 23333:443    environment:      - DERP_DOMAIN=derp.example.com

然后启动

1

sudo docker compose up

配置 Caddy

1
2
3
4

// Caddyfilederp.example.com {    reverse_proxy localhost:23333}

重载 Caddy 的配置

1

sudo docker compose exec -w /etc/caddy caddy caddy reload

别忘了解析你的域名到你的 Caddy 服务器上。

配置 Tailscale

在 Access Controls 中配置

直达链接：https://login.tailscale.com/admin/acls/file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{  // ... 其他 ACL 配置  "derpMap": {    "OmitDefaultRegions": true, // 是否只连接自建 derper 节点    "Regions": {      "900": {        "RegionID": 900,        "RegionCode": "myderp",        "Nodes": [          {            "Name": "1",            "RegionID": 900,            "HostName": "derp.example.com", // 域名            "STUNPort": 3478,            "DERPPort": 443,          }        ]      }    }  }}

结束。

参考

1. GitHub - fredliang44/derper-docker: tailscale‘s selfhosted derp-server docker image
2. Custom DERP Servers
3. How NAT traversal works
4. Tailscale 基础教程：部署私有 DERP 中继服务器
5. 浅探 Tailscale DERP 中转服务

最近在服务器上面自建了 Sentry。

用 script 方法加入到网站后，始终没有效果，然后在控制台中发现了下面的报错。

The Sentry loader you are trying to use isn’t working anymore, check your configuration.

于是去 Github 上找了下，看着应该是国内网络的问题。

在 sentry/sentry.conf.py 内添加下面内容可以解决。

1

JS_SDK_LOADER_DEFAULT_SDK_URL = "https://browser.sentry-cdn.com/%s/bundle.tracing.replay.debug.min.js"

然后记得重启 Sentry 的 Docker 服务

1
2

sudo docker compose restartsudo docker compose up -d

• Sentry JS lazily-loadable loader doesn't work · Issue #22715 · getsentry/sentry

自从 Typora 开始收费之后，我彻底转向使用 VS Code（Visual Studio Code） 进行文章撰写。作为一款 Markdown 编辑器，它已经完全满足了我的需求。

然而，我开始思考是否可以将 Visual Studio Code 用作服务器管理器。在此之前，我一直使用 FinalShell 进行服务器管理，这款工具具备以下特点，也是我所喜欢的：

• 简单的服务器资源监控
• 服务器文件浏览
• 终端功能
• 多服务器管理

当 VS Code 发布 Remote SSH 功能时，我并没有太过关注。该功能的初衷是用于远程开发，而我并没有远程开发的需求。然而，当我开始进行远程开发时，我决定尝试使用 Remote SSH。结果令我惊喜地发现，Remote SSH 非常适合用于服务器管理工作。

那么，VS Code 有哪些特点，并且满足了我哪些需求呢？

VS Code 的特点

多服务器管理

通过在你需要访问的远程服务器中配置好 SSH Key，便可以轻松地设置 Remote SSH，并指定服务器的 IP 地址，从而直接通过 Remote SSH 访问服务器。

1
2
3
4
5
6
7

Host server1    HostName 服务器 1 的 IP 地址    User 用户名Host server2    HostName 服务器 2 的 IP 地址    User 用户名

通过这样的配置，然后就可以方便地在 VS Code 中访问和管理多个服务器。只需单击服务器列表中的相应服务器，即可快速连接到目标服务器，并在远程环境中执行所需的操作。

文件浏览器

和正常一个项目的使用一样，VS Code 可以打开服务器的一个文件夹。然后我们就可以进行各种各样的文件浏览器的常规操作。还可以使用搜索功能快速查找和定位特定的文件。

我通常就会直接把账号目录直接打开。

同时还可以直接集成 VS Code 本身拥有的强大的文件编辑能力。

从此告别 ls、mkdir、touch、vi 等操作。

方便快捷的终端体验

可以同时打开多个终端实例，并在它们之间切换。每个终端实例都可以独立运行命令，并保留其输出历史记录。

还可以在编辑器的多个标签页或分割视图中同时打开不同的终端实例，以便同时执行不同的命令。

除此之外，在 VS Code 中，可以通过右键单击文件或文件夹，选择"在终端中打开"，快速打开终端并自动切换到对应的路径。再也不用痛苦的到处 cd 了。

Docker GUI 管理

由于我大部分服务都是放在 Docker 上，所以对于 Docker 的使用是非常高频的。

如果你在服务器上使用 Docker 进行容器化管理，VS Code 通常就会推荐你安装 Docker 扩展，然后就可以并以图形化界面的形式管理和操作 Docker 容器。可以方便地查看和管理容器、镜像、网络和卷等 Docker 资源，执行常见的 Docker 命令，以及监控容器的状态和日志。

这基本覆盖了大部分 Docker 常用的操作，也让我大部分时间不再需要使用 Portainer 或是命令行了。

Git GUI 集成

VS Code 提供了强大的 Git GUI 集成功能，可以在代码仓库上进行版本控制和协作。可以直接通过 GUI 进行查看提交历史、比较文件差异、切换分支、合并代码，以及推送和拉取代码等操作。

丰富的个性化主题、插件生态

如果本身就使用 VS Code，便可以直接继承自己的审美。同时 VS Code 比其他终端管理软件拥有更为丰富丰富的个性化主题选项，可以根据自己的喜好和习惯选择适合的主题。也具有丰富的插件社区。

其它

除此之外，VS Code 本身就具有跨平台支持、多语言支持等特性，而且它完全免费。

如何使用 VS Code 进行服务器管理

你需要满足如下条件

• 能够运行 VS Code 的电脑
• 正版的 VS Code
• 生成 SSH Key 并完成配置
• Remote SSH 插件

其实你需要的并不多，核心是 VS Code 中的 Remote SSH 插件。

配置 SSH Key

你需要在你的电脑上生成 SSH Key，并将公钥配置到服务器上以实现免密登录。你可以在网上查找相关教程了解如何生成和配置 SSH Key。

配置 Remote SSH

通过 这个链接 安装 Remote SSH 后。

你可以按照以下步骤来打开和配置 SSH 主机：

1. 在 VS Code 左下方找到 Remote SSH 的图标按钮。
2. 点击该按钮，然后选择 “Connect to Host” 选项。
3. 再次点击 “Configure SSH Hosts”。

就可以在 VS Code 中进行配置，指定服务器的 IP 地址和用户名。示例配置如下：

1
2
3
4
5
6
7

Host server1    HostName 服务器 1 的 IP 地址    User 用户名Host server2    HostName 服务器 2 的 IP 地址    User 用户名

完成配置后便可以在左下角直接连接服务器了。

插件以及其他推荐

Monitor Pro 插件

资源监控，由我开发。

Monitor Pro 是一款资源监控工具，实时跟踪系统指标。监测 CPU、内存、网络、文件系统使用率，电池百分比和充电状态。可自定义顺序和刷新间隔，提供高占用警报。适用于开发人员、系统管理员和普通用户。

https://marketplace.visualstudio.com/items?itemName=nexmoe.monitor-pro

Docker 插件

如果你在使用 Docker 容器来部署应用程序，这个插件可以帮助你在 VS Code 中管理和调试 Docker 容器。

Wakatime 插件

统计你在服务器上的摸鱼时间。

zsh 与 ohmyzsh

使用 ohmyzsh 以及它的生态，为你的命令行集成自动补全和纠错功能。

没错，这篇文章的标题是小胡同学开玩笑时帮我起的。双十一阿里的活动机最为火爆款应该就是2C2G3M的这款99元机了。这么便宜的小鸡还能白嫖？是真的可以白嫖。这个信息是韩宇发面上群里的，有兴趣的可以看一下，https://docs.qq.com/doc/DTEFhbU5CanZoTG1o 。这位大佬是推广500台，目前好像还有不到一百台了。开始我对这项活动表示怀疑的，哪不知上午购买的，下午就返现给我了。白嫖的东西，不拿白不拿。

因为手里没有备案的域名，那这白嫖的阿里云服务器拿来干什么？那就拿来跑Docker项目吧！

大家知道Docker是全命令，没有UI界面的，像我这样的小白，当然是想搞一个Docker中文管理面板了，

一.目前主流的Docker中文管理面板及区别

1. Portainer：Portainer是一款知名的开源Docker管理工具，提供了友好的用户界面，支持多种语言，包括中文。它支持多种Docker环境，包括Docker Swarm、Kubernetes和Docker单机模式。Portainer可以与Docker轻松安装在独立的Linux/Windows服务器/集群上，可以管理注册表、网络、卷、镜像和容器，还可以保存配置，并配置Docker Swarm和堆栈
2. FAST OS DOCKER：FAST OS DOCKER是一款国产中文面板，界面简洁，功能不错，尚在完善开发中。它可以为用户提供docker总览、本地容器管理、远程镜像拉取、服务器磁盘映射、服务器网络管理等功能，基本能满足中小型单位对容器管理的全部需求
3. Docker UI：Docker UI是一个使用Docker Remote API的web接口，目的是提供一个简洁纯净的客户端实现，为了连接和管理Docker。然而，该工具目前已经无人维护，因此建议使用其他工具如Portainer。

综上所述，Portainer是一个功能齐全的开源Docker管理工具，FAST OS DOCKER是一款国产中文面板，而Docker UI则是一个已经无人维护的工具。

二.Docker环境安装

我的服务器环境是Ubuntu，下面介绍的是如何在Ubuntu上安装 Docker。

1.更新软件包索引，并且安装必要的依赖软件，来添加一个新的 HTTPS 软件源：

sudo apt update sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

2.使用下面的 curl 导入源仓库的 GPG key：

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

4.安装 Docker 最新版本

sudo apt update sudo apt install docker-ce docker-ce-cli containerd.io

5.一旦安装完成，Docker 服务将会自动启动。你可以输入下面的命令，验证它：

sudo systemctl status docker

输出将会类似下面这样：

● docker.service - Docker Application Container Engine
     Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
     Active: active (running) since Thu 2020-05-21 14:47:34 UTC; 42s ago
...

三.安装portainer-ce中文版

大家一定要注意portainer-ce并没有原生的中文版，而是国内大佬进行汉化的。那安装方式有两种，一种是先安装英语版的portainer-ce，然后再安装汉化补丁。另外一种方式就是直接安装大佬做好的集成的portainer-ce中文版。我在这里踩了个大坑，

安装好英文版portainer-ce进行打汉化补丁，但是问题出来了，如上图出错提示。意思是portainer-ce连接不上Docker环境。英文版的可以连接，汉化版的却不行，那问题一定出现在汉化上面。后来通过群里往记同学的帮助，才找到问题所在。原来是汉化版数据文件路径和英文版的冲突而导致的。

所以，老张在这里推荐新手小白们，还是直接安装portainer-ce集成中文版。仓库地址：https://hub.docker.com/r/6053537/portainer-ce 。一键代码安装，傻瓜无脑操作。

docker run -d --restart=always --name="portainer" -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock 6053537/portainer-ce

OK了，开始你的Docker折腾之旅吧！