【分享】如何在自己的组织里搭建Hoppscotch

从话题继续利用HTTP.RW搭建类似Postman的在线服务继续讨论:

昨天搭建了一个 Hoppscotch 今天来分享一下配置和心得。这是来来回回掰扯了一阵,弄出的最精简配置。

官方仓库: GitHub - hoppscotch/hoppscotch: Open source API development ecosystem - https://hoppscotch.io (open-source alternative to Postman, Insomnia)
官方部署文档:Getting started - Hoppscotch Documentation

如果我们只是部署使用,我们不必把仓库拖下来。只需要找到其中 .env.example 做模版就可以。推荐使用 AIO(All-In-One)方式部署。

.env 配置

我们新建一个目录,假设叫 hoppscotch 把拖下来的 .env.example 改名为 .env,修改其中的配置。这里给一下我的配置作为例子:

#-----------------------Backend Config------------------------------#
# Prisma Config
DATABASE_URL=postgresql://postgres:testpass@hoppscotch-db:5432/hoppscotch

# Auth Tokens Config
JWT_SECRET="secret1233"
TOKEN_SALT_COMPLEXITY=10
MAGIC_LINK_TOKEN_VALIDITY= 3
REFRESH_TOKEN_VALIDITY="604800000" # Default validity is 7 days (604800000 ms) in ms
ACCESS_TOKEN_VALIDITY="86400000" # Default validity is 1 day (86400000 ms) in ms
SESSION_SECRET='add some secret here'

# Hoppscotch App Domain Config
REDIRECT_URL="https://api.http.rw"
WHITELISTED_ORIGINS="https://api.http.rw"
VITE_ALLOWED_AUTH_PROVIDERS=GITHUB

# Github Auth Config
GITHUB_CLIENT_ID="abcdefg"
GITHUB_CLIENT_SECRET="123456"
GITHUB_CALLBACK_URL="https://api.http.rw/backend/v1/auth/github/callback"
GITHUB_SCOPE="user:email"

# Mailer config
MAILER_SMTP_ENABLE="false"
MAILER_USE_CUSTOM_CONFIGS="false"
MAILER_ADDRESS_FROM='"From Name Here" <[email protected]>'

MAILER_SMTP_URL="smtps://[email protected]:[email protected]" # used if custom mailer configs is false

# The following are used if custom mailer configs is true
MAILER_SMTP_HOST="smtp.domain.com"
MAILER_SMTP_PORT="587"
MAILER_SMTP_SECURE="true"
MAILER_SMTP_USER="[email protected]"
MAILER_SMTP_PASSWORD="pass"
MAILER_TLS_REJECT_UNAUTHORIZED="true"


# Rate Limit Config
RATE_LIMIT_TTL=60 # In seconds
RATE_LIMIT_MAX=100 # Max requests per IP


#-----------------------Frontend Config------------------------------#


# Base URLs
VITE_BASE_URL=https://api.http.rw
VITE_SHORTCODE_BASE_URL=https://api.http.rw
VITE_ADMIN_URL=https://api.http.rw

# Backend URLs
VITE_BACKEND_GQL_URL=https://api.http.rw/backend/graphql
VITE_BACKEND_WS_URL=wss://api.http.rw/backend/graphql
VITE_BACKEND_API_URL=https://api.http.rw/backend/v1

# Terms Of Service And Privacy Policy Links (Optional)
VITE_APP_TOS_LINK=https://docs.hoppscotch.io/support/terms
VITE_APP_PRIVACY_POLICY_LINK=https://docs.hoppscotch.io/support/privacy

# Set to `true` for subpath based access
ENABLE_SUBPATH_BASED_ACCESS=true

注意这里的 ENABLE_SUBPATH_BASED_ACCESS 。我推荐使用这种子路径的方式,不然你需要暴露3个端口,或者绑3个域名,属实没必要。

其余配置具体看文档: https://docs.hoppscotch.io/documentation/self-host/community-edition/install-and-build#configuring-the-environment ,我搭建的服务配置就是以上。

有一点比较坑的是,有些配置服务启动后写入数据库,修改 .env 是无效的。你可能要进管理后台修改,或者清空表 InfraConfig ,具体见:Admin dashboard - Hoppscotch Documentation

Docker compose 配置

在目录 hoppscotch 下新建 docker-compose.yml,以下是我搭建的配置:

version: '3.8'

services:
  hoppscotch:
    image: hoppscotch/hoppscotch
    ports:
      - "127.0.0.1:8888:80"
    env_file:
      - .env
    depends_on:
      - hoppscotch-db
    restart: unless-stopped

  hoppscotch-db:
    image: postgres:latest
    user: postgres
    environment:
      POSTGRES_DB: hoppscotch
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: testpass
    volumes:
      - hoppscotch-db-data:/var/lib/postgresql/data

volumes:
  hoppscotch-db-data:

就是这么简单,无需管文档上所说的什么 3000 3170 3100 端口,不推荐。

初始化数据表

经过上面的步骤如果你直接启动,会报错退出,因为初始化的配置表没有。我们需要手动初始化(我想不明白),首先进入容器:

sudo docker compose run hoppscotch sh 进入后执行命令: pnpx prisma migrate deploy 等待成功执行完毕即可退出。

启动,配置Nginx

现在你可以 sudo docker compose up -d 启动服务了。可以看出我没有直接暴露外网,接下来我们使用Nginx把它反代出来。以下是我的 Nginx 配置:

server {
    listen 80;
    server_name api.http.rw;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name api.http.rw;

    charset utf-8;

    ssl_certificate      certs/api.http.rw.crt;
    ssl_certificate_key  certs/api.http.rw.key;

    location / {
        proxy_pass http://127.0.0.1:8888;
		proxy_http_version 1.1;
		proxy_set_header   Upgrade $http_upgrade;
		proxy_set_header   Connection "upgrade";
		proxy_set_header   Host          $http_host;
		proxy_set_header   X-Forwarded-For    $proxy_add_x_forwarded_for;
    }
}

因为它需要用 Websocket 所以需要相关头配置。

以上就是所有的部署配置。

其他说明

  1. Hoppscotch 默认使用本地网络请求,所以不能跨域的接口不能直接使用。
  2. 对于不能跨域的接口,可以通过设置安装浏览器扩展。安装扩展后把自己的站添加进去即可解决跨域问题。

  1. 也可以设置通过代理来请求,则使用代理服务请求。一般使用浏览器扩展请求就好,我没有搭建代理。可以使用官方的代理,也可以自己搭建,仓库在这里:GitHub - hoppscotch/proxyscotch: 📡 A simple proxy server created for https://hoppscotch.io

  1. 搭建好的管理后台在 https://domain/admin 进入的第一个用户默认为管理员。其实后台也没什么可以配置和看的。能管理基础配置和用户基础信息,用户的数据是看不到的。

  2. 可以给自己的团队搭建一个,用它分享API还是很方便的。比如我这里丢个按钮,点击就能知道 DeeplX 怎么用了:

Run in Hoppscotch

  1. 其他未尽事宜欢迎各位补充。
166 Likes

第一!

4 Likes

先收藏在看

1 Like

第二

2 Likes

第二

2 Likes

嗯,这回总算是我第一了

1 Like

前排

3 Likes

支持!!!

1 Like

前排学习

1 Like

前排

1 Like

前排

1 Like

在用基于chrome的客户端,轻量又好用

1 Like

吾皇又是5分到手?

2 Likes

支持~

手把手教学 :+1:

好强 :100:

大水哥好闲

1 Like

始皇一如既往的高质量

1 Like

始皇牛啊 这就去试试

1 Like

前排

1 Like