やりたいこと
-
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でも使ってみたいので、プロキシを立てる方向で。
下記の環境をベースに使わせてもらいました。
ベースの環境から使いやすいように書き換える
まず、以下をダウンロードするなりgitを使ったりしてローカルに展開しておきます。
GitHub - esplo/docker-local-ssl-termination-proxy: A simple SSL Termination Proxy for localhost
フォルダの作成
ベースの環境を適当なところに展開したらディレクトリを作成
多分Mac、Win共通のコマンド
# 展開したフォルダ内へ移動
cd 作業用フォルダ
# フォルダ作成
# nginxの設定を入れておくフォルダ
mkdir web
# htmlとか入れておくフォルダ
mkdir htdocs
各ファイルを書き換え
docker-composeを書き換え
docker-compose.ymlを以下に置き換え。
ちなみに、PHPと書いてますが、別にPHPがないと動作しないわけではなく、単に自分の環境で使いたかっただけです。
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という名前で以下の内容を保存。
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というファイル名で以下を追加。
#!/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
追加したら、ターミナルを開いて以下を実行してファイルに実行権限を与えます。
cd 作業ディレクトリ
# 作業
chmod u+x docker-start.command
試しに実行
docker-start.commandをダブルクリックするとターミナルで実行されます。
Mac版の場合ターミナルに表示されている通り、リターンなどを押すとdocker-stopが実行されて終了します。
Windows用
手動で実行させます。
環境変数を.envというファイル名でdocker-compose.ymlと同じ階層で以下を保存する必要があります。（HOST_IPは動作するように設定）
PORT=8080
HOST_IP=192.168.XXX.XXX
ACCESS_PORT=4433
このとき、エクスプローラーではピリオドで始まるファイルに名前変更できないので、例えば以下のようにコマンドプロンプト上で名前変更する。
# ファイル名変更
rename text.txt .env
コマンドプロンプトで以下を実行するとサイトが立ち上がります。
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に保存します。
<!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