# 【DockerCompose】hoppscotch 安裝

使用線上版 [https://hoppscotch.io/](https://hoppscotch.io/)

## 確認安裝套件 (安裝 Node.js、npm、pnpm)

##### [https://docs.hoppscotch.io/documentation/self-host/community-edition/prerequisites](https://docs.hoppscotch.io/documentation/self-host/community-edition/prerequisites)

## 安裝pnpm

---

### ✅ 最推薦：使用 `curl` 官方安裝腳本

```bash
curl -fsSL https://get.pnpm.io/install.sh | sh -

```

安裝完後，`pnpm` 會被安裝到：

- `~/.local/share/pnpm`
- `~/.local/share/pnpm/pnpm` 是主程式
- 也會把 `~/.local/share/pnpm` 加到你的 `PATH` 環境變數中（需重新開機或重新登入 shell）

> 如果你沒有自動加到 PATH，可手動加在 `.bashrc` 或 `.zshrc`：

```bash
export PATH="$HOME/.local/share/pnpm:$PATH"

```

然後重新載入：

```bash
source ~/.bashrc
# 或者
source ~/.zshrc

```

---

### 👇 替代方式：透過 `npm` 安裝（需先裝好 Node.js）

如果你已經有 Node.js 和 npm：

```bash
npm install -g pnpm

```

---

### 🚀 驗證是否安裝成功

```bash
pnpm -v

```

會輸出版本號，例如：

```
9.1.2

```

---

### ✅ 附註：如果你還沒裝 Node.js

建議搭配 `nvm`（Node Version Manager）來安裝 Node.js，再用 `npm` 裝 `pnpm`：

```bash
# 安裝 nvm（Node.js 管理工具）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 載入 nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# 安裝 Node.js（例如最新版）
nvm install node

# 再裝 pnpm
npm install -g pnpm

```

---

## build Image && container

```shell
# clone 專案
git clone https://github.com/hoppscotch/hoppscotch.git

cd hoppscotch
# 確認port沒衝突(有的話要修改docker-compose.yml => ports)
hoppscotch-aio:
    profiles: ["default"]
    container_name: hoppscotch-aio
    restart: unless-stopped
    build:
      dockerfile: prod.Dockerfile
      context: .
      target: aio
    env_file:
      - ./.env
    depends_on:
      hoppscotch-db:
        condition: service_healthy
    ports:
      - "3005:3000"
      - "3100:3100"
      - "3170:3170"
      - "3200:3200"
      - "3080:80"

# 使用default 類型(profiles: ["default"])(all in one)
docker compose --profile default up -d
```

---

<span>成功運行必要的容器後，下一步是建立管理員帳戶來管理 Hoppscotch。  
</span>系統會自動將第一個透過管理儀表板登入的使用者指定為管理員。

<div data-callout-type="warning" id="bkmrk-%E5%BB%BA%E7%AB%8B%E7%AE%A1%E7%90%86%E5%93%A1%E5%B8%B3%E8%99%9F"><div><span style="color: #222222; font-size: 2.8275em; font-weight: 400;">建立管理員帳號</span></div></div>1. <span>開啟新的瀏覽器標籤並造訪</span>`http://localhost:3100`<span>。</span>
2. <span>這將授予您存取管理儀表板的權限。</span>
3. <span>使用您的憑證登入或建立一個新帳戶。</span>
4. <span>第一個登入的使用者將被賦予管理員權限。</span>

## <span class="cursor-pointer"><span>訪問 Hoppscotch 應用程式</span></span>

<span>設定管理員帳戶後，您現在可以開始使用 Hoppscotch 應用進行 API 測試和開發。</span>

1. <span>開啟新的瀏覽器標籤並造訪</span>[`http://localhost:3000`](http://localhost:3000/)<span>。</span>
2. <span>開始使用 Hoppscotch 無縫測試和開發您的 API。</span>