はじめに
船井総研デジタルのoswです。Re:dash
というものを業務で初めて知り、便利だったのでローカルに構築してみました。
学習環境
- Win 11 Home / 22H2
- WSL2 / Ubuntu 22.04.3 LTS
- Docker Desktop 4.23.0
この記事のゴール
下記をゴールとします。
- dockerコンテナでRe:dash環境を構築
- サンプルDB(MySQL)を作成し、Winのブラウザ経由でDBの内容を閲覧出来るようにする
Re:dashとは
Re:dashはOSSでデータソースを登録することで、それらのデータをブラウザベースで閲覧することが出来るようになります。
一部ですが登録出来るデータソースには下記のようなものがあります。
環境構築
データソースの作成
まずはRe:dashで参照するデータソースを作成します。今回はMySQLでサンプルDBを作成し、それを閲覧できるようにします。
下記構成でデータソースを作成することにします。
MySQL
├── DB
│ └── sample.sql
├── Dockerfile
├── compose.yml
└── my.cnf
CREATE DATABASE redash;
CREATE TABLE redash.test (
id INT NOT NULL AUTO_INCREMENT,
name CHAR(30) NOT NULL,
PRIMARY KEY (id)
);
INSERT INTO
redash.test (name)
VALUES
("user01"),
("user02"),
("user03"),
("user04"),
("user05"),
("user06"),
("user07"),
("user08"),
("user09"),
("user10");
FROM mysql
EXPOSE 3306
ADD ./my.cnf /etc/mysql/conf.d/my.cnf
CMD ["mysqld"]
services:
mysql:
container_name: redash-mysql
build: .
image: redash-mysql
command: --default-authentication-plugin=mysql_native_password
volumes:
- ./DB:/docker-entrypoint-initdb.d
environment:
- MYSQL_ROOT_PASSWORD=root
networks:
- redash
networks:
redash:
# Re:dash公式リポジトリで利用するネットワークを参照。MySQLコンテナと通信可能にする
external: true
name: redash_default
[mysqld]
character-set-server=utf8
[mysql]
default-character-set=utf8
[client]
default-character-set=utf8
Re:dashの入手
Re:dashはAWS EC2のインスタンスとしても提供されているようですが、今回はgithubの公式リポジトリを利用しローカルにコンテナを作成します。
そこで下記でクローンします。
$ git clone https://github.com/getredash/redash.git
次にクローンしたredash
ディレクトリ直下に次のファイルを作成します。
REDASH_SECRET_KEY=redash
REDASH_COOKIE_SECRET=redash
GOOGLE_CLIENT_ID=redash
Re:dashコンテナの起動
$ cd redash
$ docker compose up -d
$ docker compose run --rm server create_db
upにそれなりに時間が掛かりますが、ひとまず下記でRe:dashにアクセス出来るようになります。
Re:dashの環境設定
UIを整える
視認性が悪いのでUIを整えます。下記コマンド実行時、要求するnodeのバージョンと異なっているとエラーが出る場合は条件に合うバージョンを選定してください。
かなり時間がかかりますが、これでUIの視認性が良くなります。
$ yarn --frozen-lockfile
$ yarn build
# 参照するデータソース(MySQL)のコンテナを起動。MySQLディレクトリ直下で実行
$ docker compose up -d
念のため普段自分が使ってるアドレスを設定し、adminユーザを作成してログインします。
データソースの設定
ログイン後、画面左下にあるSettings
-> +New Data Source
-> mysql
と入力し選択可能なデータソースからMySQL
を選択します。
続いて下記のように設定します。今回はあくまでテスト環境なのでrootでそのままアクセスしています。
項目 | 詳細 |
---|---|
Name | SampleDB |
Host | mysql |
Port | 未入力 |
User | root |
Password | root |
Database Name | redash |
それより下 | すべてデフォルト |
設定を保存し、「Test Connection」でSuccess
となれば設定完了です。
クエリの作成
DBに接続できるようになったので、Re:dashで閲覧するために必要となるクエリを作成します。
サイドメニュー
-> Create
-> New Query
を選択します。
今回は単純に次のように作成しています。
- クエリ名
- Test Query
- クエリ詳細
SELECT * FROM redash.test;
デフォルトでDBが選択されている状態なので、クエリをそのまま入力するだけで問題ありません。右下のExecute
で実行して確認することもできます。
問題ないことを確認したらSave
で保存、右上のPublish
を押下します。(Publish
しておかないとダッシュボードで作成したクエリが参照できません)
ダッシュボードの作成
サイドメニュー
-> Create
-> New Dashborad
を選択、任意の名前を入力します。
ダッシュボードの編集画面に遷移後、右下のAdd Widget
-> 先程作成したクエリ
を選択 -> Add to Dashboard
-> Done Editing
を選択します。
これでダッシュボードを開くと作成した各クエリが実行され、すぐに確認出来るようになります。
おわりに
あくまでテスト環境なのでそのまま本番用に使う訳にはいきませんが、構築しておくと開発する際に非常に便利だと思います。触って色々試してみようと思います。