😀

OrthancにOHIF Viewerを接続したメモ

2023/04/11に公開

Docker

dicom

pacs

tech

別記事で構築したOrthancにOSSのDICOMビューア「OHIF Viewer」接続したメモです

公式ページ：https://ohif.org/

検証環境

OS: Ubuntu20.04
Docker: 23.0.1
Docker Compose: v2.16.0（plugin）

単体で動かしてみる

Dockerイメージの作成＆実行

自分のGithubアカウントを作成し、公式リポジトリをforkしておく。
forkしたリポジトリをローカルにcloneする。

$ git clone https://github.com/github_account/ohif_viewers.git

$ git remote add upstream https://github.com/OHIF/Viewers.git
$ git fetch upstream
$ git checkout -b v2-legacy upstream/v2-legacy

Dockerfileは特に変更せず、以下のコマンドでDockerイメージをビルドする

$ docker image build -t ohif-viewer .

ビルド出来たら以下のコマンドで起動する

docker run -p 3000:80/tcp --name ohif_viewer ohif-viewer:latest

Webブラウザでhttp://ohif_host:3000/にアクセスすると、公式のデモ画像が表示される。
※http://ohif_host部分は自身の環境等に合わせ読み替えてください

Orthancと統合

公式ドキュメントを参考に下記の構成で設定ファイルを作成

Nginx & OHIF Viewerの設定

以下の設定フィルを作成する

nginx.conf

server {
    listen 80;
    
    server_name 127.0.0.1 localhost; # substitute your machine's IP address or FQDN and port

    proxy_intercept_errors off;
    gzip on;
    gzip_types text/css application/javascript application/json image/svg+xml;
    gzip_comp_level 9;
    etag on;

    charset     utf-8;

    client_max_body_size 75M;   # adjust to taste

    location /pacs-admin/ {
        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;

        expires          0;
        add_header       Cache-Control private;
        proxy_pass       http://orthanc:18042/;
    }

    location /pacs/ {
        if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow_Credentials' 'true';
                add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
        }
        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;

        expires           0;
        add_header        Cache-Control private;
        proxy_pass        http://orthanc:18042/;
        # CORS Magic
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow_Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    }

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

app-config.js

window.config = {
  routerBasename: '/',
  showStudyList: true,
  servers: {
    dicomWeb: [
      {
        name: 'Orthanc',
        wadoUriRoot: '/pacs/wado',
        qidoRoot: '/pacs/dicom-web',
        wadoRoot: '/pacs/dicom-web',
        qidoSupportsIncludeField: false,
        imageRendering: 'wadors',
        thumbnailRendering: 'wadors',
      },
    ],
  },
};

Orthancの設定

以下の内容をorthanc.jsonに追加し、DICOMwebで接続できるようにする

orthanc.json

  "DicomWeb": {
    "Enable": true,
    "Root": "/dicom-web/",
    "EnableWado": true,
    "WadoRoot": "/wado",
    "Host": "localhost",
    "Ssl": false,
    "StowMaxInstances": 10,
    "StowMaxSize": 10,
    "QidoCaseSensitive": false
  }

Docker composeの設定追加

docker-compose.ymlにohif_viewerの設定を追加する

docker-compose.yml

(略)
services:
  ohif_viewer:
    image: ohif-viewer:latest
    container_name: ohif_viewer
    hostname: viewer
    depends_on: 
      - orthanc
    ports:
      - 80:80
    volumes:
      - ./ohif_config/nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - ./ohif_config/app-config.js:/usr/share/nginx/html/app-config.js:ro
    environment:
      - TZ=Asia/Tokyo
    networks:
      develop_nw:
        ipv4_address: 192.168.50.21
  orthanc:
  （略）

起動確認

以下のコマンドで起動

$ docker compose up -d

http://ohif_host/でOHIF Viewerがhttp://ohif_host/pacs-admin/でOrthancが表示される