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が触れる環境が用意できる。
検証とかが終わると、シェルの実行を終了するとデータとかも全て削除してくれるので変にデータが残ったりもしない。 今回はちょっとしたデモのために用意したので、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ファイルで管理するためのライブラリ
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ファイルから環境変数が読み込めるようにするために、plugins
に defineEnv
を設定する。
jsファイルから読み込み方
console.log(process.env.TEST);
process.env.*** という形式で実装すると、build後のjsファイルで.envファイルの値で置き換えたjsファイルが出力される。
注意点
githubとかに公開する時は
.env
、build後のファイルはアップしない。 これをアップしたら全く意味が無いので、しっかりとgitignoreしておくフロントエンドのjsの場合は、実行時にDeveloper toolsのソースは隠蔽出来ない。 build後のファイルにはAPIkeyが直書きされているので、ここまでは隠蔽することは出来ない。
あくまでこの方法は、誤ってgithubとかにAPI keyを公開してしまわないようにするための対応策です。
サンプルのソース
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は、公式の配信サーバも利用できるのですが独自に立てることも出来るんわけなんです。
どんな形で仕組みで配信されるかというと、以下のサイトの図がいい感じにまとまってるので引用させてもらいます。
今回の環境
- PC Virtual Box上のVM(1CPU、メモリ4G)
- Ubuntu 17
- PostgreSQL
- postgis
- Mapnik
- mod_tile
- renderd
- carto
インストール手順
基本的にはこちらのサイトの手順に則ってます。ライブラリとかの関係で一部修正している部分があります。
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
作成したPostgreSQLの gis
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_tile
と renderd
フォルダの作成と所有者の変更
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
にアクセスする。
下の画像がブラウザに表示される。
まとめ
各ツールを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の学習だけに専念したいって方にはこういう実行方法でも良いのではないかと思いました。 上にコード全部載ってるのですが、今回のサンプルコード
docker-composeでPHP環境を作成してみた
ちょっと仕事でPHPを使いそうな気がしてるので、その開発環境用にと思い数年ぶりにPHPの環境を作成。 せっかく作るなら、dockerとか利用して少しはモダンにやろうと思って、UbuntuにDockerをインストールしてからDocker-comporse経由でphp_infoを表示するところまでやってみたのでそのメモです。
Dockerのインストール
この辺はDockerの公式サイトの手順通りにやったので、すんなりといきました。
インストールコマンド群
$ 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の公式サイトの手順通りにやったので、すんなりといきました。
インストールコマンド群
$ 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
今回のサンプルのソース
yarnでleafletを取得し、Webpackでbuildして、表示するまで。
少しバタバタしてしまったのもあるので、約2ヶ月ぶりのブログです… まぁ、定期的に書くというよりも、動作確認とかした内容とかをメモしていくブログだから定期的な必要はないんだけど、まとめてる余裕もなかったのです。
っで、本題です。 内容的には前回とあまり変わらないです。 今回は、yarnでleaflet.jsを取得し、buildして表示するまでの手順です。
動作環境
node -v v8.0.0 webpack -v 3.0.0
2ヶ月の間に、各ツールがそれぞれメジャーアップデートしてしまいましたw
動作手順
- yarnの初期化と各ライブラリの取得
leaflet
とwebpack
を取得してきます。
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>
CDNやleaflet.jsのソースをHTML側で読み込む時と同様にMapがちゃんと表示できてるのが確認できます。
結論
yarnでJavaScriptのライブラリを管理することで、バージョン管理が楽になったり、表示の際にリクエスト数が減るというメリットはあるかと思います。 ただ、変更するたびにbuildを行わないといけないのは手間なのですが、そのあたりもwebpack-serverとか、変更チェックのツールなどを導入すればたいして手間にならないかと。
今回のサンプルのソースは、githubに置いておきます。
yarnでjQueryを取得し、Webpackでbuildして実行する
簡易メモです。
最近流行りのReactやAngularなどを利用している方からすると、ごく当然の内容ですが。
前提条件
node.jsがインストールされている
yarnがインストールされている
yarnの開発環境を初期化
作業用のディレクトリで以下のコマンドを実行する
yarn init
いくつかの質問が出て来るが、ひとまず
Eneter
で全て回答-
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が普段通り動作する。