【待整理】在 VPS 上部署 Umami

第一阶段

步骤 1：准备工作目录

在你的 VPS 上找一个地方（例如 ~/apps/），为 Umami 创建一个独立的目录：

bash
mkdir -p ~/apps/umami
cd ~/apps/umami

步骤 2：创建 docker-compose.yml

在这个目录下创建一个 docker-compose.yml 文件：

bash
nano docker-compose.yml

把下面的内容复制进去。请务必修改 APP_SECRET 为一段随机的长字符串（可以闭着眼睛敲一段字母+数字）：

yaml
version: '3.8'
services:
  umami:
    image: ghcr.io/umami-software/umami:postgresql-latest
    container_name: umami
    environment:
      - DATABASE_URL=postgresql://umami_user:umami_secure_pass@umami-db:5432/umami_db
      # ⚠️ 必须修改：用于生成 Token 的密钥，随便敲一段长字符串
      - APP_SECRET=g7H2kL9pQ4sW1vX5zN3mB8vC0xY6tReWqA
      - NODE_ENV=production
    ports:
      - "127.0.0.1:3000:3000" # 仅允许本地访问，通过 Nginx 暴露，更安全
    depends_on:
      - umami-db
    restart: always
  umami-db:
    image: postgres:15-alpine
    container_name: umami-db
    environment:
      - POSTGRES_USER=umami_user
      - POSTGRES_PASSWORD=umami_secure_pass # 建议与上面 DATABASE_URL 保持一致
      - POSTGRES_DB=umami_db
    volumes:
      - umami-db-data:/var/lib/postgresql/data
    restart: always
volumes:
  umami-db-data:

步骤 3：启动容器

bash
docker compose up -d

启动后，你可以用 docker compose ps 查看状态，确保两个容器都是 Up 状态。

第二阶段：配置 Nginx 反向代理与 SSL

需要给 Umami 分配一个二级域名（例如：analytics.yourdomain.com）。

步骤 1：解析域名

步骤 2：修改 Nginx 配置

在你的 Nginx 配置文件里（通常在 /etc/nginx/sites-available/ 或 /etc/nginx/conf.d/），新建一个虚拟主机配置：

nginx
server {
    listen 80;
    server_name analytics.yourdomain.com; # 换成你的二级域名
    location / {
        proxy_pass http://127.0.0.1:3000; # 转发到 Umami 容器端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

保存后，重启 Nginx (sudo systemctl restart nginx)。

步骤 3：申请 SSL 证书（HTTPS）

推荐使用 Certbot 一键申请免费的 Let's Encrypt 证书：

bash
sudo certbot --nginx -d analytics.yourdomain.com

跟随提示完成，Certbot 会自动帮你把上面的 Nginx 配置升级为 HTTPS（443 端口）。

第三阶段：初始化 Umami 后台

在浏览器打开你刚刚配置好的域名：https://analytics.yourdomain.com
看到登录界面后，输入官方默认的管理员账号密码：

用户名： admin
密码： umami

⚠️ 登录后的第一件事： 点击右上角设置，进入配置，把默认密码改掉。
添加网站： * 在 Umami 后台点击 "Websites" -> "Add website"。

输入你的 Next.js 项目名字和域名（如 yourdomain.com）。
保存后，点击该网站旁边的 "Edit" 按钮，你会看到一串 Website ID（一串 UUID），拷贝它。

第四阶段：在 Next.js 项目中集成

现在 Umami 服务端完全独立运行了，Next.js 只需要负责在前端给它“喂数据”。

直接在你的根布局 app/layout.tsx (或 layout.js) 中，把 Umami 的脚本挂载到 <body> 之后：

tsx
import Script from 'next/script'
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body>
        {children}
        
        {/* 仅在生产环境下加载 Umami 统计 */}
        {process.env.NODE_ENV === 'production' && (
          <Script
            async
            src="https://analytics.yourdomain.com/script.js" // 你的 Umami 外网地址
            data-website-id="你的-WEBSITE-ID-填在这里"
          />
        )}
      </body>
    </html>
  )
}

yaml

version: '3.8' services: umami: image: ghcr.io/umami-software/umami:postgresql-latest container_name: umami environment: - DATABASE_URL=postgresql://umami_user:umami_secure_pass@umami-db:5432/umami_db # ⚠️ 必须修改：用于生成 Token 的密钥，随便敲一段长字符串 - APP_SECRET=g7H2kL9pQ4sW1vX5zN3mB8vC0xY6tReWqA - NODE_ENV=production ports: - "127.0.0.1:3000:3000" # 仅允许本地访问，通过 Nginx 暴露，更安全 depends_on: - umami-db restart: always umami-db: image: postgres:15-alpine container_name: umami-db environment: - POSTGRES_USER=umami_user - POSTGRES_PASSWORD=umami_secure_pass # 建议与上面 DATABASE_URL 保持一致 - POSTGRES_DB=umami_db volumes: - umami-db-data:/var/lib/postgresql/data restart: always volumes: umami-db-data:

nginx

server { listen 80; server_name analytics.yourdomain.com; # 换成你的二级域名 location / { proxy_pass http://127.0.0.1:3000; # 转发到 Umami 容器端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }

tsx

import Script from 'next/script' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="zh"> <body> {children} {/* 仅在生产环境下加载 Umami 统计 */} {process.env.NODE_ENV === 'production' && ( <Script async src="https://analytics.yourdomain.com/script.js" // 你的 Umami 外网地址 data-website-id="你的-WEBSITE-ID-填在这里" /> )} </body> </html> ) }

第一阶段

步骤 1：准备工作目录

步骤 2：创建 docker-compose.yml

步骤 3：启动容器

第二阶段：配置 Nginx 反向代理与 SSL

步骤 1：解析域名

步骤 2：修改 Nginx 配置

步骤 3：申请 SSL 证书（HTTPS）

第三阶段：初始化 Umami 后台

第四阶段：在 Next.js 项目中集成

相关内容

一个电子画框

linux 常用的命令与操作

pve 虚拟化

如何从 ISBN 得到可跨域访问的图书封面图片URL

一个小而美的书摘播放器

文章大纲

相关内容

一个电子画框

linux 常用的命令与操作

pve 虚拟化

如何从 ISBN 得到可跨域访问的图书封面图片URL

一个小而美的书摘播放器

【待整理】在 VPS 上部署 Umami

第一阶段

步骤 1：准备工作目录

步骤 2：创建 docker-compose.yml

步骤 3：启动容器

第二阶段：配置 Nginx 反向代理与 SSL

步骤 1：解析域名

步骤 2：修改 Nginx 配置

步骤 3：申请 SSL 证书（HTTPS）

第三阶段：初始化 Umami 后台

第四阶段：在 Next.js 项目中集成

相关内容

一个电子画框

linux 常用的命令与操作

pve 虚拟化

如何从 ISBN 得到可跨域访问的图书封面图片URL

一个小而美的书摘播放器

文章大纲

相关内容

一个电子画框

linux 常用的命令与操作

pve 虚拟化

如何从 ISBN 得到可跨域访问的图书封面图片URL

一个小而美的书摘播放器