Hoppscotch 環境構築

概要

hoppscotchの環境構築の記事がなかったので共有いたします。

Hoppscotchとは

postmanのOSS版みたいな感じ。
なのでUIはpostmanと非常に似ており、使用感もほぼ同じだと思われる。

Hoppscotchを使用する理由は、最近Postmanのフリープランが改悪され、コレクションの実行が月25回に制限されたからである。

Official Doc

環境構築

1. envファイルを作成する

環境変数は公式のインストール手順を参考にしてしまえばOK

そして作成したのが以下。
変更しているのはDATABASE_URL=postgresql://db-user:db-pass123@hoppscotch-db:5432/hoppscotchだけ。

#-----------------------Backend Config------------------------------#
# Prisma Config
DATABASE_URL=postgresql://postgres:db-pass123@hoppscotch-db:5432/hoppscotch # or replace with your database URL

# (Optional) By default, the AIO container (when in subpath access mode) exposes the endpoint on port 80. Use this setting to specify a different port if needed.
HOPP_AIO_ALTERNATE_PORT=80

# Auth Tokens Config
JWT_SECRET=secretcode123
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=anothersecretcode123

# Recommended to be true. Set to false if you are using http.
# Note: Some auth providers may not support http requests and may stop working when set to false.
ALLOW_SECURE_COOKIES=true

# Sensitive Data Encryption Key while storing in Database (32 character)
DATA_ENCRYPTION_KEY=********************************

# Hoppscotch App Domain Config
REDIRECT_URL=http://localhost:3000
WHITELISTED_ORIGINS=http://localhost:3170,http://localhost:3000,http://localhost:3100
VITE_ALLOWED_AUTH_PROVIDERS=GOOGLE,GITHUB,MICROSOFT,EMAIL

# Google Auth Config
GOOGLE_CLIENT_ID=*****
GOOGLE_CLIENT_SECRET=*****
GOOGLE_CALLBACK_URL=http://localhost:3170/v1/auth/google/callback
GOOGLE_SCOPE=email,profile

# Github Auth Config
GITHUB_CLIENT_ID=*****
GITHUB_CLIENT_SECRET=****
GITHUB_CALLBACK_URL=http://localhost:3170/v1/auth/github/callback
GITHUB_SCOPE=user:email

# Microsoft Auth Config
MICROSOFT_CLIENT_ID=*****
MICROSOFT_CLIENT_SECRET=*****
MICROSOFT_CALLBACK_URL=http://localhost:3170/v1/auth/microsoft/callback
MICROSOFT_SCOPE=user.read
MICROSOFT_TENANT=common

# Mailer config
MAILER_SMTP_ENABLE=true
MAILER_USE_CUSTOM_CONFIGS=false
MAILER_ADDRESS_FROM=<[e-mail]>
MAILER_SMTP_URL=smtps://[e-mail]:[e-mail] # 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=[e-mail]
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=http://localhost:3000
VITE_SHORTCODE_BASE_URL=http://localhost:3000
VITE_ADMIN_URL=http://localhost:3100

# Backend URLs
VITE_BACKEND_GQL_URL=http://localhost:3170/graphql
VITE_BACKEND_WS_URL=wss://localhost:3170/graphql
VITE_BACKEND_API_URL=http://localhost:3170/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=false

2. docker-composeファイルを作成

以下のように作成した。
データの永続利用はなんとなく追加したのでなくても大丈夫。

services:
  hoppscotch-app:
    image: hoppscotch/hoppscotch:latest
    container_name: hoppscotch-app
    ports:
      - "3000:3000"
      - "3100:3100"
      - "3170:3170"
    env_file:
      - .env
    restart: unless-stopped
    networks:
      - hoppscotch
    depends_on:
      - hoppscotch-db

  hoppscotch-db:
    image: postgres:latest
    container_name: hoppscotch-db
    environment:
      POSTGRES_PASSWORD: db-pass123
      POSTGRES_DB: hoppscotch
      TZ: Asia/Tokyo
    ports:
      - "5432:5432"
    volumes:
      - postgres-data:/var/lib/postgresql/data
    networks:
      - hoppscotch

networks:
  hoppscotch:
    external: true

volumes:
  postgres-data:

3. docker-compose up

docker network create hoppscotch
docker compose -f docker-compose.yml up -d
docker-compose run --rm --entrypoint sh hoppscotch-app -c "pnpx prisma migrate deploy"

これを実行したら大丈夫。

自分はスクリプト化したのでツリー構成と合わせてこんな感じになりました。

.
├── docker-compose.yml
├── .env
├── env.example
└── utils
    └── init.sh

init.sh
中身↓

SCRIPT_DIR=$(cd $(dirname $0); pwd)
cd $SCRIPT_DIR

cd ../

docker stop hoppscotch-app
docker rm hoppscotch-app
docker stop hoppscotch-db
docker rm hoppscotch-db

docker network create hoppscotch
docker compose -f docker-compose.yml up -d
docker-compose run --rm --entrypoint sh hoppscotch-app -c "pnpx prisma migrate deploy"

これでhttp://localhost:3100/にアクセスしたらログイン画面が出てくるので、それぞれ適当にログインして作業できます。