OHIF Viewer 醫學影像平台安裝與設定教學

介紹如何在 Linux 中安裝 OHIF Viewer 醫學影像平台，搭配 Orthanc DICOM 影像伺服器，透過 DICOMweb 協定以網頁瀏覽 DICOM 醫學影像。

OHIF Viewer 是 Open Health Imaging Foundation 所開發的一套開放原始碼的醫學影像平台，提供了基礎的影像平台核心架構，其設計以效能為導向，底層採用 Cornerstone.js 函式庫，並支援標準的 DICOMweb 協定，可用於發展各種醫學影像應用。

Orthanc DICOM 影像伺服器

OHIF Viewer 在瀏覽 DICOM 影像時，必須搭配 DICOMweb 影像伺服器，請參考 Orthanc DICOM 影像伺服器安裝與使用教學，安裝好 Orthanc DICOM 影像伺服器，或是使用其他的 DICOMweb 影像伺服器（例如 dcm4chee）。

下載 OHIF Viewer

從 OHIF Viewer 的官方 GitHub 網站下載 OHIF Viewer 的原始碼：

# 下載 OHIF Viewer 原始碼
git clone https://github.com/OHIF/Viewers.git

進入 OHIF Viewer 原始碼目錄，啟用 Yarn Workspaces 後，安裝必要套件：

# 進入 OHIF Viewer 原始碼目錄
cd Viewers/

# 啟用 Yarn Workspaces
yarn config set workspaces-experimental true

# 安裝必要套件
yarn install

OHIF Viewer 設定檔

修改 platform/viewer/.env 設定檔，設定 OHIF Viewer 公開網址的路徑，以及網頁應用程式 App 的設定檔：

# 公開網址路徑
PUBLIC_URL=/ohif_viewer/

# 網頁應用程式 App 設定檔
APP_CONFIG=config/health.js

這裡我們希望 OHIF Viewer 的正式網址路徑為 https://my.host.com/ohif_viewer/，所以將 PUBLIC_URL 設定為 /ohif_viewer/，這個路徑可以依照自己的需求調整。

APP_CONFIG 是用來指定 OHIF Viewer 應用程式的主要設定檔，這裡我們將設定檔指定為 config/health.js，接著自己建立 platform/viewer/public/config/health.js 這個設定檔。在 platform/viewer/public/config/ 目錄中有許多設定檔範例可以參考，最快的方式是從既有的範例來修改，先將 default.js 複製一份至 health.js：

# 複製設定檔範例
cp platform/viewer/public/config/{default.js,health.js}

接著修改一下網址與 DICOMweb 設定：

window.config = {

  // 公開網址路徑
  routerBasename: '/ohif_viewer',

  // ...

  // DICOMweb 伺服器設定（Orthanc）
  servers: {
    dicomWeb: [
      {
        name: 'Orthanc',
        wadoUriRoot: 'https://my.dicom.server/orthanc/wado',
        qidoRoot: 'https://my.dicom.server/orthanc/dicom-web',
        wadoRoot: 'https://my.dicom.server/orthanc/dicom-web',
        qidoSupportsIncludeField: false,
        imageRendering: 'wadors',
        thumbnailRendering: 'wadors',
      },
    ],
  }
}

建構 OHIF Viewer

調整好基本的設定之後，即可建構 production 版本的 OHIF Viewer：

# 建構 OHIF Viewer
yarn run build

建構完成之後，產生的 production 版本的 OHIF Viewer 會放在 platform/viewer/dist/ 目錄之下，接著將此目錄放置於適合長期存放的位置：

# 安置 OHIF Viewer 網頁目錄
cp -r platform/viewer/dist /opt/ohif_viewer

Nginx 網頁伺服器設定

修改 Nginx 網頁伺服器設定檔，

server {

    # ...

    # OHIF Viewer 設定
    location ^~ /ohif_viewer/ {
        root /opt;
        try_files $uri $uri/ /ohif_viewer/index.html;
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }
}

更改 Nginx 設定之後，重新啟動 Nginx 服務：

# 重新啟動 Nginx 網頁伺服器
sudo systemctl restart nginx

這時候開啟 https://my.host.com/ohif_viewer/ 這樣的網址，應該就可以看得到 OHIF Viewer 的內容了。

參考資料

• kitware：VTK.js Video Tutorials: Integrating Scientific Visualizations into OHIF and Other Web Applications