やりたいこと

WebCodeCamJSというライブラリをベースにバーコードリーダーを実装する。
クライアントサイドで動作するため、サーバに余計な負荷をかけない。
Dockerとdocker-composeを使って手軽な動作テスト環境を作る。
WebCodeCamJSをカスタマイズさせて、より使いやすくする。
チェックデジットを自前で実装して、より誤検出をへらす。
手軽にテスト動作させてみたい。

環境

MacOS 10.13.6
Docker for Mac 18.06.0
docker-compose version 1.22.0

Macを使ってますが、windows用も記載しています。

HTTPSでアクセス出来る環境を使う

WebRTCを利用するので、localhostもしくはHTTPSでの接続が出来るようにします。
iOSでも使ってみたいので、プロキシを立てる方向で。
下記の環境をベースに使わせてもらいました。

Dockerでlocalhostにhttpsアクセスできるプロキシを立てる

ベースの環境から使いやすいように書き換える

まず、以下をダウンロードするなりgitを使ったりしてローカルに展開しておきます。

GitHub - esplo/docker-local-ssl-termination-proxy: A simple SSL Termination Proxy for localhost

フォルダの作成

ベースの環境を適当なところに展開したらディレクトリを作成
多分Mac、Win共通のコマンド

command

# 展開したフォルダ内へ移動
cd 作業用フォルダ
# フォルダ作成
# nginxの設定を入れておくフォルダ
mkdir web
# htmlとか入れておくフォルダ
mkdir htdocs

各ファイルを書き換え

docker-composeを書き換え

docker-compose.ymlを以下に置き換え。
ちなみに、PHPと書いてますが、別にPHPがないと動作しないわけではなく、単に自分の環境で使いたかっただけです。

docker-compose.yml

version: "3"
services:

  proxy:
    build: .
    ports:
      - ${ACCESS_PORT}:443
    expose:
      - ${ACCESS_PORT}
    environment:
      - PORT=${PORT}
      - HOST_IP=${HOST_IP}
    
  web:
    image: nginx:1.13.5-alpine
    depends_on:
    - app
    ports:
    - "${PORT}:80"
    volumes:
    - ./web/default.conf:/etc/nginx/conf.d/default.conf
    - ./htdocs:/var/www/html

  app:
    image: php:7.1.9-fpm-alpine
    volumes:
    - ./htdocs:/var/www/html

config

先程作成した./webフォルダにdefault.confという名前で以下の内容を保存。

default.conf

server {
    listen 80;
    server_name _;
    root  /var/www/html;
    index index.php;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(\.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

dockerを動作させるコマンドファイル

docker-composeを動作させるコマンドを予め書いておいて、ダブルクリックで動作させます。
ちなみに、このコマンドファイルを本番環境で使うのは奨められません。あくまでテスト用として使用してください。

Mac用

ファイル名は何でも良いのですが、とりあえずdocker-start.commandというファイル名で以下を追加。

docker-start.command

# !/bin/sh

# このファイルの場所に移動
cd `dirname $0`

set -eu

CMDNAME=`basename $0`

export PORT=8080
export HOST_IP=`ipconfig getifaddr en0`
export ACCESS_PORT=4433
echo "access here ----------------------------"
echo "https://$HOST_IP:$ACCESS_PORT/index.html"
echo "----------------------------------------"

docker-compose up -d
read -p 'return keyで終了します' a
docker-compose stop

追加したら、ターミナルを開いて以下を実行してファイルに実行権限を与えます。

command

cd 作業ディレクトリ
# 作業
chmod u+x docker-start.command

試しに実行

docker-start.commandをダブルクリックするとターミナルで実行されます。
Mac版の場合ターミナルに表示されている通り、リターンなどを押すとdocker-stopが実行されて終了します。

Windows用

手動で実行させます。
環境変数を.envというファイル名でdocker-compose.ymlと同じ階層で以下を保存する必要があります。（HOST_IPは動作するように設定）

.env

PORT=8080
HOST_IP=192.168.XXX.XXX
ACCESS_PORT=4433

このとき、エクスプローラーではピリオドで始まるファイルに名前変更できないので、例えば以下のようにコマンドプロンプト上で名前変更する。

command

# ファイル名変更
rename text.txt .env

コマンドプロンプトで以下を実行するとサイトが立ち上がります。

command

docker-compose up -d
# ２回め以降は下記でもOK
# docker-compose start
# 停止するときは以下
# docker-compose stop

カスタマイズ

export PORT=8080は、htdocsへのアクセスポート、export ACCESS_PORT=4433はhttps://192.168.XXX.XXX:4433/index.htmlのように実際にアクセスするための直接アクセス先のポートです。
必要に応じて書き換えてください。

HelloWorld!

をindex.htmlという名前で./htdocsに保存します。

index.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
Hello World!
</body>
</html>

ブラウザ

ターミナルにhttps://192.168.XXX.XXX:4433/index.htmlのようなアクセス先のURLが出ますので、それをブラウザで開きます。
Macのsafariの場合、証明書関係の表示が出ると思いますので「詳細表を示」ボタンから、「このwebサイトを閲覧」をクリック、アラートの「webサイトを閲覧」ボタンクリックしてパスワード入力後、閲覧出来るようになります。

WebCodeCamJS

GitHub - andrastoth/webcodecamjs: Demo page

ライセンスはMIT。
後ほどいろいろ変更して使いやすくしてみます。

とりあえずテスト動作

WebCodeCamJSをhtdocsフォルダに展開して、https://192.168.XXX.XXX:4433/index.htmlにアクセスしてみましょう。
アクセスしたら下にスクロールすると、再生ボタンとか停止ボタンがついたところがあるので、再生ボタンを押すと接続されているカメラが起動してスキャンされます。

カスタマイズと構成ファイル

こちらに記載しました。
https://qiita.com/mm_sys/items/6e5e927ef75ab82fa8d3