BIツール Apache Supersetのデモ環境作成した時のメモ

仕事で樹形図を表示したいけど、簡単にデモするためのイイ感じのものないかなという相談があったので、デモ環境を用意した時のメモ

環境

  • Ubuntu 17.0.4
  • Docker
  • Docker-Composer

参考にしたサイト BIツールのApache Supersetを試してみた – ニフティものづくりブログ
ただ、cloneしてくるリポジトリの構成が変わってしまってるのか、このブログのままではインストール出来なかった。

デモ環境の構築

git clone https://github.com/amancevice/superset.git
cd superset/examples/
sudo ./demo.sh | postgres

途中で、デモ環境にログインするためのユーザIDとかを設定し、しばしシェルが終わるのを待つ… インストールが完了すると、http://<IPアドレス>:8088/ にアクセスする。 最初にログイン画面が表示されるので、設定したユーザの情報でログインする。 既にダミーデータも投入されているので、すぐにSupersetが触れる環境が用意できる。 f:id:hinosita:20170928233330p:plain

検証とかが終わると、シェルの実行を終了するとデータとかも全て削除してくれるので変にデータが残ったりもしない。 今回はちょっとしたデモのために用意したので、Superset事態はほぼ触ってないけどDBから直接値を取得し、ビジュアライゼーションを簡単に行えたり、直接SQLを実行出来たりと最近のBIツールの機能はありそうなのと、OSSなので時間を作ってちゃんと見てみたいな。

開発時のJavaScriptの環境変数などの管理

最近JavaScirptでAPI key取扱いをどうしようかと思い、ちょっと試してみたこと。

最初行っていたのは自分のマシンの環境変数を設定して、 webpack.config.jsのpluginsで読み込む方法。 この方法でも実装は可能なんですが、複数人で作業とかする時に環境依存や環境変数の値が被ったりするとめんどそうなので、別の方法がないかを検討 あと、環境変数の管理をするのがめんどい…

前提条件

  • node.js npmが動作すること
  • webpackが動作すること

dotenvのインストール

npm install --save-dev dotenv

dotevnはプログラム実行時の環境変数を、.envファイルで管理するためのライブラリ

github.com

webpackの設定

var webpack = require('webpack');
require('dotenv').config();

var defineEnv = new webpack.DefinePlugin({
  'process.env': {
    'TEST': JSON.stringify(process.env.TEST)
  }
});

module.exports = {
  context: __dirname + '/app',

  entry: {
    js: "./sample.js"
  },

  output: {
    path: __dirname + '/dist',
    filename: "./bundle.js"
  },

  plugins: [defineEnv]
};

.envファイル

TEST=apikey

前半で.envファイルから環境変数を取得し、defineEnv という変数に設定しておく。 build対象のjsファイルから環境変数が読み込めるようにするために、pluginsdefineEnv を設定する。

jsファイルから読み込み方

console.log(process.env.TEST);

process.env.*** という形式で実装すると、build後のjsファイルで.envファイルの値で置き換えたjsファイルが出力される。

注意点

  • githubとかに公開する時は .env 、build後のファイルはアップしない。 これをアップしたら全く意味が無いので、しっかりとgitignoreしておく

  • フロントエンドのjsの場合は、実行時にDeveloper toolsのソースは隠蔽出来ない。 build後のファイルにはAPIkeyが直書きされているので、ここまでは隠蔽することは出来ない。

あくまでこの方法は、誤ってgithubとかにAPI keyを公開してしまわないようにするための対応策です。

サンプルのソース

github.com

Ubuntu 17でOpenStreetMap Tile Serverをたててみる

OpenStreetMap Tile Serverを最新のUbuntuで立てた際のメモ

はじめに

ちょっと仕事で、OpenStreetMap Tile Serverを立てる機会があったのですが、既存のサーバはUbuntu 14で立てられてたので再構築するなら新しいOSのバージョンにしようと思ったのがきっかけです。 既存のUbuntu 14の方は、apt-getでpackageをインストールすると簡単に立てられるのですが、Ubuntu 16以降はpackageをインストールが出来ない。

最小はDockerでDocker Hubからいい感じのコンテナイメージ持ってきてやろうと思ったのですが、Docker Hubを検索するとどのコンテナもUbuntu 14ベースで作成されていたので断念… そのため、まずは1から最新のUbuntuにインストールしてみました。

OpenStreetMap Tile Serverとは

ざっくり言うとOpenStreetMapを配信するためのサーバです。 OpenStreetMapは、公式の配信サーバも利用できるのですが独自に立てることも出来るんわけなんです。

どんな形で仕組みで配信されるかというと、以下のサイトの図がいい感じにまとまってるので引用させてもらいます。

ircama.github.io

今回の環境

インストール手順

基本的にはこちらのサイトの手順に則ってます。ライブラリとかの関係で一部修正している部分があります。

Manually building a tile server (16.04.2 LTS) | switch2osm

各種パッケージのインストール

サイトに記載されてるpackageで、libpng12 デフォルトでインストール出来ないため、リポジトリを追加します。

sudo apt-add-repository "deb http://us.archive.ubuntu.com/ubuntu/ xenial main universe"
sudo apt-get update

パッケージのインストール

sudo apt install libboost-all-dev git-core tar unzip wget bzip2 build-essential autoconf libtool libxml2-dev libgeos-dev libgeos++-dev libpq-dev libbz2-dev libproj-dev munin-node munin libprotobuf-c0-dev protobuf-c-compiler libfreetype6-dev libpng12-dev libtiff5-dev libicu-dev libgdal-dev libcairo-dev libcairomm-1.0-dev apache2 apache2-dev libagg-dev liblua5.2-dev ttf-unifont lua5.1 liblua5.1-dev libgeotiff-epsg

PostgreSQL / postgis のインストール

postgresql-9.5-postgis-2.2 だけ postgresql-9.6-postgis-2.3 にバージョン更新しています。 更新しなくても、インストールは出来るのですが、警告画面みたいのが出たのでバージョンを更新しました。

sudo apt-get install postgresql postgresql-contrib postgis postgresql-9.6-postgis-2.3

PostgreSQL / postgisの初期設定します。

sudo -u postgres -i
createuser mod_tile #mod_tileのUnixユーザはいる前提 
createdb -E UTF8 -O mod_tile gis

postgisの設定

psql
\c gis
CREATE EXTENSION postgis;
CREATE EXTENSION hstore;
ALTER TABLE geometry_columns OWNER TO mod_tile;
ALTER TABLE spatial_ref_sys OWNER TO mod_tile;
\q

postgresユーザからログアウト

exit

osm2pgsqlツールのインストール

mkdir ~/src
cd ~/src
git clone git://github.com/openstreetmap/osm2pgsql.git
cd osm2pgsql

osm2pgsqlに必要なライブラリをインストール

sudo apt install make cmake g++ libboost-dev libboost-system-dev libboost-filesystem-dev libexpat1-dev zlib1g-dev libbz2-dev libpq-dev libgeos-dev libgeos++-dev libproj-dev lua5.2 liblua5.2-dev
mkdir build && cd build
cmake ..
make
sudo make install

Mapnikのインストール

Mapnikに必要なライブラリをインストール

sudo apt-get install autoconf apache2-dev libtool libxml2-dev libbz2-dev libgeos-dev libgeos++-dev libproj-dev gdal-bin libgdal1-dev libmapnik-dev mapnik-utils python-mapnik

Mapnikのインストールされていることの確認

python
>>> import mapnik
>>>
>>> quit()

mod_tileとrenderdのインストール

cd ~/src
git clone git://github.com/SomeoneElseOSM/mod_tile.git
cd mod_tile
./autogen.sh
./configure
make
sudo make install
sudo make install-mod_tile
sudo ldconfig

tileのスタイルの設定

cd ~/src
git clone git://github.com/gravitystorm/openstreetmap-carto.git
cd openstreetmap-carto
sudo apt install npm nodejs-legacy
sudo npm install -g carto
carto -v 

Mapnikのスタイルの設定ファイルを生成

carto project.mml > mapnik.xml

日本のデータを登録

オープンストリートマップのデータを取得

mkdir ~/data
cd ~/data
wget http://download.geofabrik.de/asia/japan-latest.osm.pbf

作成したPostgreSQLgis DBにデータを登録

osm2pgsql -d gis --create --slim  -G --hstore --tag-transform-script ~/src/openstreetmap-carto/openstreetmap-carto.lua -C 2500 --number-processes 1 -S ~/src/openstreetmap-carto/openstreetmap-carto.style ~/data/japan-latest.osm.pbf

今回用意した環境だと、データ投入に約4時間程かかりました。

低ズームの国境などのシェイプファイルの取得

cd ~/src/openstreetmap-carto/
scripts/get-shapefiles.py

フォントファイルの取得

sudo apt-get install fonts-noto-cjk fonts-noto-hinted fonts-noto-unhinted ttf-unifont

renderdの設定

  • /usr/local/etc/renderd.conf

作成したmapnik.xml ファイルの場所を指定する

XML=/home/mod_tile/src/openstreetmap-carto/mapnik.xml

Apacheの設定

mod_tilerenderd フォルダの作成と所有者の変更

sudo mkdir /var/lib/mod_tile
sudo chown mod_tile /var/lib/mod_tile

sudo mkdir /var/run/renderd
sudo chown mod_tile /var/run/renderd

mod_tileモジュールの設定ファルを設定

  • mod_tile.conf
LoadModule tile_module /usr/lib/apache2/modules/mod_tile.so

設定の反映

sudo a2enconf mod_tile
  • /etc/apache2/sites-available/000-default.conf
LoadTileConfigFile /usr/local/etc/renderd.conf
ModTileRenderdSocketName /var/run/renderd/renderd.sock
# Timeout before giving up for a tile to be rendered
ModTileRequestTimeout 0
# Timeout before giving up for a tile to be rendered that is otherwise missing
ModTileMissingRequestTimeout 30

Apacheの設定ファイルを再読込

sudo service apache2 reload

renderdの初回起動

renderd -f -c /usr/local/etc/renderd.conf

起動したら、http://サーバのIPアドレス/hot/0/0/0.png にアクセスする。 下の画像がブラウザに表示される。 f:id:hinosita:20170818065318p:plain

まとめ

各ツールを1つずつインストールしながら、最新のubuntuでtile serverが動作するところまでは確認が取れました。 今回の手順をDockerファイルにまとめてコンテナ化が今後の課題かな。

HTMLファイルだけでReactを実行

Reactだけではないのですが、最近のJSフレームワーク系を始めようとすると、そのフレームワークだけでなくES2016/ES2017・Webpack・babel・npmなどと覚えることが多くて、大変そうってのはよく聞いたり。 確かに公式のドキュメントやいろんなブログやQiita見ても同じように書いてるので、それが標準なんですけどもう少し簡単に始めたいと思ってる人っているのかな? 一昔前のjQueryなどのようにCDNからソースを読み込んで、自分用のコードを書いたらブラウザで確認できる的な! 一応、Reactでもそれは出来るのです。

ReactをHTMLファイルだけで実行するコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React Sample</title>
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    )
  </script>
</body>
</html>

これでReactがHTMLファイルとブラウザだけで動作してます。

簡単な説明

各種ライブラリの読み込み

<script src="https://unpkg.com/react@15/dist/react.min.js"></script> 
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

上2つのライブラリがReactのコアのコードとDOM周りを管理するためのライブラリ 一番下はJSXをJavaScriptに変換するためのブラウザ上でbabelを動作させるためのライブラリ。

アプリの本体

  <div id="root"></div>

  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    )
  </script>

scriptタグの部分の h1タグ の部分がJSXで、id=root の箇所に h1タグ を挿入するといったイメージで動作します。

結論

一応動作はしますが、本来のプロダクトではこのような方法は行わないはずです。 プロダクトだと、最初に上げたようなツールとかを利用して開発が進められると思います。

ただ、個人でちょっとReact勉強してみようと思うけどやることが多いな、まずはReactの学習だけに専念したいって方にはこういう実行方法でも良いのではないかと思いました。 上にコード全部載ってるのですが、今回のサンプルコード

github.com

docker-composeでPHP環境を作成してみた

ちょっと仕事でPHPを使いそうな気がしてるので、その開発環境用にと思い数年ぶりにPHPの環境を作成。 せっかく作るなら、dockerとか利用して少しはモダンにやろうと思って、UbuntuにDockerをインストールしてからDocker-comporse経由でphp_infoを表示するところまでやってみたのでそのメモです。

Dockerのインストール

この辺はDockerの公式サイトの手順通りにやったので、すんなりといきました。

docs.docker.com

インストールコマンド群
$ sudo apt-get update
$ sudo apt-get install apt-transport-https ca-certificates curl software-properties-common
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
$ sudo apt-key fingerprint 0EBFCD88
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
$ sudo apt-get update
$ sudo apt-get install docker-ce
dockerのインストールの確認
docker -v

docker-comporseのインストール

この辺はDockerの公式サイトの手順通りにやったので、すんなりといきました。

docs.docker.com

インストールコマンド群
$ curl -L https://github.com/docker/compose/releases/download/1.15.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose

※ /usr/local/bin でPermision errorになった場合には sudo -i でrootユーザに変更してから、curl コマンドを行う

docker-comporseのインストールの確認
docker-comporse -v

ここまで、docker環境が出来たので、次にnginx + PHP環境をDocker上に作成していく。

今回のフォルダ構成
├── docker
│   ├── docker-compose.yml
│   ├── nginx
│   │   ├── Dockerfile
│   │   └── server.conf
│   └── phpfpm
│       └── Dockerfile
└── public
    └── index.php

docker-compose.yml の作成

nginxのコンテナとPHPのコンテナ(webというコンテナ名にしてる)の起動手順などを記載しておく

version: '2'
services:
  nginx:
    build: ./nginx
    ports:
      - "80:80"
    volumes:
      - ../public:/var/www/html
    links:
            - web:web
    container_name: nginx

  web:
    build: ./phpfpm
    volumes:
      - ../public:/var/www/html
    container_name: web

実際の各コンテナのbuildの設定は、各コンテナのフォルダを用意しDockerファイルに設定する

nginxのDockerファイル

FROM nginx
ADD server.conf /etc/nginx/conf.d/server.conf

nginxのポートの設定等の設定ファイルもDockerファイルと同じフォルダに配置する

server {
    listen 80 default;
    server_name _;
    root /var/www/html;
    index index.php index.html index.htm;
    charset utf-8;

    access_log off;
    error_log off;

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

    location ~ \.php$ {
        fastcgi_pass web:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include       fastcgi_params;
    }
}

phpのDockerファイル

FROM php:fpm

実行される、index.php ファイルを用意する

<?php
phpinfo();

ここまで、起動する準備が完了。

ここからは、 docker-compose.yml が配置されてるディレクトリで実行する

dockerコンテナのイメージを作成する

 docker-compose build

※ build時じゃないと、DockerファイルのADDコマンドとかが動作しないので、buildしておく

dockerコンテナの実行

 docker-compose up -d

起動中のdockerコンテナ確認

 docker-compose ps

起動中のdockerコンテナ停止と削除

 docker-compose down

今回のサンプルのソース

github.com

yarnでleafletを取得し、Webpackでbuildして、表示するまで。

少しバタバタしてしまったのもあるので、約2ヶ月ぶりのブログです… まぁ、定期的に書くというよりも、動作確認とかした内容とかをメモしていくブログだから定期的な必要はないんだけど、まとめてる余裕もなかったのです。

っで、本題です。 内容的には前回とあまり変わらないです。 今回は、yarnでleaflet.jsを取得し、buildして表示するまでの手順です。

動作環境

node -v 
v8.0.0

webpack -v
3.0.0

2ヶ月の間に、各ツールがそれぞれメジャーアップデートしてしまいましたw

動作手順

  • yarnの初期化と各ライブラリの取得 leafletwebpack を取得してきます。
yarn init -y

yarn add leaflet
yarn add webpack

yarn
  • leafletの初期処理の実装 app/index.js
var L = require('leaflet');

var mymap = L.map('mapid').setView([35.68, 139.76], 13);

L.tileLayer('タイルサーバのURL', {
    maxZoom: 18
}).addTo(mymap);

leafletを使い慣れてる方ですと見慣れたコードだと思いますが、1行目だけ普段と違います。

var L = require('leaflet');

yarnで取得してきたleaflet.jsを、ここで読み込んでます。

  • package.jsonにbuildの設定を記述する。
 "scripts": {
    "build": "webpack app/index.js dist/bundle.js"
  }
  • buildの実行
npm run build

dist/bundle.js というleafletを含んだ1つのJSファイルが出力されている。

表示の確認

buildして作成されたjsで正しく、Mapが表示されるかの確認です

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
   integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
   crossorigin=""/>
  <style>
    #mapid { height: 500px; width: 100%; margin:0 }
  </style>
</head>
<body>
  <div id="mapid"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

f:id:hinosita:20170622105811p:plain

CDNやleaflet.jsのソースをHTML側で読み込む時と同様にMapがちゃんと表示できてるのが確認できます。

結論

yarnでJavaScriptのライブラリを管理することで、バージョン管理が楽になったり、表示の際にリクエスト数が減るというメリットはあるかと思います。 ただ、変更するたびにbuildを行わないといけないのは手間なのですが、そのあたりもwebpack-serverとか、変更チェックのツールなどを導入すればたいして手間にならないかと。

今回のサンプルのソースは、githubに置いておきます。

github.com

yarnでjQueryを取得し、Webpackでbuildして実行する

簡易メモです。

最近流行りのReactやAngularなどを利用している方からすると、ごく当然の内容ですが。

前提条件

  • node.jsがインストールされている

  • yarnがインストールされている

  • yarnの開発環境を初期化

    作業用のディレクトリで以下のコマンドを実行する

      yarn init
    

    いくつかの質問が出て来るが、ひとまず Eneter で全て回答

  • yarnでjQueryをインストールする

    yarn に追加するモジュールを add しインストールする

      yarn add jquery  
      yarn
    
  • webpackの導入

    上の作業でjqueryはインストールは完了しているが、インストールされている先がnode_modulesの下にいんすとーるされているため、普段利用するような形式で利用するのはめんどい そのため、modulesをビルドするwebpackを導入する

     yarn add webpack
     yarn
    
  • index.jsの作成

    jQueryを動作する環境の準備が出来たので、実際にコードを実装していく

var $ = require('jquery');

$(function () {
alert("ok");
});
  • package.jsonにbuildの設定を記述する
 "scripts": {
    "build": "webpack app/index.js dist/bundle.js"
  }
  • buildの実行
npm run build

dist/bundle.js というjQueryを含んだ1つのJSファイルが出来る。

このファイルをhtmlから読み込むことで、jQueryが普段通り動作する。