SASSをwebpackでコンパイルした時の設定メモ
SASSをwebpackを使ってコンパイルしたときの設定メモです。
npmモジュールのインストール
モジュールはこれだけ必要でした。
SASSのファイルは、node-sass -> sass-loader -> css-loader -> style-loader と渡されてCSSとなり、extract-text-webpack-pluginで、ファイルとして切り出しを行うようです。
npm init npm install --save-dev webpack webpack-dev-server npm install --save-dev node-sass style-loader css-loader sass-loader npm install --save-dev extract-text-webpack-plugin
webpack.jsの記述
エントリーポイントは src/css/index.scss、出力先は、dist/css/app.css としました。
includePaths[]を指定することで、node_module以下にあるsassもimportできるようにしています。
const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 略 module.exports = [ { // 略 }, { context: __dirname + '/src/css', entry: { app: './index.scss' }, output: { path: __dirname + '/dist/css', filename: './[name].css' }, module: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ('css-loader?-url&minimize&sourceMap!sass-loader?outputStyle=expanded&' + 'includePaths[]=' + path.resolve(__dirname, './node_modules')) }) } ] }, devtool: 'source-map', plugins: [ new ExtractTextPlugin('./[name].css') ] } ];
下記参考にさせていただきました。
http://qiita.com/yaaah93/items/f8293846134efc83634a
http://qiita.com/nicchi__1985/items/e30e73de6d8443909537
CentOS6系にMySQL5.7を一撃インストール
CentOS6系にMySQL5.7をインストールした時のメモ書き。
インストール時に発行される初期パスワードをシェルで取り出してログイン。
その後パスワードを仮のものに変更(これを一度やらないと色々操作できない）。
パスワード制約をゆるくして、再度わかりやすいワードで設定し直しました。
function install { echo installing $1 shift yum -y install "$@" >/dev/null 2>&1 } yum install -y https://dev.mysql.com/get/mysql57-community-release-el6-11.noarch.rpm >/dev/null 2>&1 install "MySQL" mysql mysql-server mysql-devel chkconfig --add mysqld chkconfig --level 345 mysqld on echo "Start and Initialize MySQL" service mysqld start >/dev/null 2>&1 mpw=$(cat /var/log/mysqld.log | grep "A temporary password is generated for root@localhost" | awk '{print $NF}') mysql -uroot -p$mpw --connect-expired-password <<SQL -- CONFIG PASSWORD POLICY -- SET PASSWORD FOR root@localhost=password('passwordPASSWORD@999'); SET GLOBAL validate_password_length=4; SET GLOBAL validate_password_policy=LOW; -- SET ROOT PASSWORD -- SET PASSWORD FOR 'root'@'localhost' = PASSWORD('root'); -- REMOVE ANONYMOUS USERS -- DELETE FROM mysql.user WHERE User=''; -- REMOVE REMOTE ROOT -- DELETE FROM mysql.user WHERE User='root' AND Host NOT IN ('localhost', '127.0.0.1', '::1'); -- REMOVE TEST DATABASE -- DROP DATABASE IF EXISTS test; DELETE FROM mysql.db WHERE Db='test' OR Db='test\\_%'; -- RELOAD PRIVILEGE TABLES -- FLUSH PRIVILEGES; CREATE USER 'vagrant'@'localhost' IDENTIFIED BY 'vagrant'; GRANT ALL PRIVILEGES ON *.* to 'vagrant'@'localhost'; SQL
作成したユーザは下記になります。
ID root@localhost PW root ID vagrant@localhost PW vagrant
CentOS6系にRed5サーバを構築する
Webプレイヤーの動作検証のためrtmpのストリームが必要になったので構築してみました。
インストール
cd /usr/local/src wget https://github.com/Red5/red5-server/releases/download/v1.0.9-RELEASE/red5-server-1.0.9-RELEASE.tar.gz tar -xzvf red5-server-1.0.9-RELEASE.tar.gz mkdir -p /usr/local/app/ mv red5-server /usr/local/app/. cd /usr/local/app/red5-server/
localhost以外で使う場合はアクセス制限の解除をする
vim /usr/local/app/red5-server/webapps/installer/WEB-INF/red5-web.properties <<<<< webapp.virtualHosts=localhost, localhost:5080 >>>>> webapp.virtualHosts=localhost, localhost:5080, 192.168.11.110, 192.168.11.110:5080
起動スクリプト作成
vim /etc/init.d/red5-server
red5-server
#!/bin/bash # For RedHat and cousins: # chkconfig: 2345 85 85 # description: Red5 flash streaming server # processname: red5-server PROG=red5 RED5_HOME=/usr/local/app/red5-server DAEMON=$RED5_HOME/$PROG.sh PIDFILE=/var/run/$PROG.pid # Source function library . /etc/rc.d/init.d/functions [ -r /etc/sysconfig/red5 ] && . /etc/sysconfig/red5 RETVAL=0 case "$1" in start) echo -n $"Starting $PROG: " cd $RED5_HOME $DAEMON >/dev/null 2>/dev/null & RETVAL=$? if [ $RETVAL -eq 0 ]; then echo $! > $PIDFILE touch /var/lock/subsys/$PROG fi [ $RETVAL -eq 0 ] && success $"$PROG startup" || failure $"$PROG startup" echo ;; stop) echo -n $"Shutting down $PROG: " killproc -p $PIDFILE RETVAL=$? echo [ $RETVAL -eq 0 ] && rm -f /var/lock/subsys/$PROG ;; restart) $0 stop $0 start ;; status) status $PROG -p $PIDFILE RETVAL=$? ;; *) echo $"Usage: $0 {start|stop|restart|status}" RETVAL=1 esac exit $RETVAL
起動設定
chmod 755 /etc/init.d/red5-server chkconfig --add red5-server service red5-server start
続きはこちらをご参照で。。
http://centos.server-manual.com/centos6_red5.html
参考にさせていただきました。
http://centos.server-manual.com/centos6_red5.html
http://www.84kure.com/blog/2016/02/03/red5-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-centos-7/
https://stackoverflow.com/questions/35332121/error-in-red5-net-status-netconnection-connect-failed#comment58416312_35349632
http://qiita.com/alingogo/items/1176a7d42b9c0b36515c
unicornのlogrotate設定サンプル
/etc/logrotate.d 配下に下記を置く。
日次ローテート + 90日間保存で設定しています。
ローテートしたログは圧縮するが、直近の１世代分はそのまま
/var/www/app/shared/log/*.log {
daily
missingok
rotate 90
dateext
compress
delaycompress
lastaction
pid=/var/www/app/shared/tmp/pids/unicorn.pid
test -s $pid && kill -USR1 "$(cat $pid)"
endscript
}※メモ
Unicornには、USR1シグナルを送ると、ログファイルを開きなおす機能が備わっている。
そのため、現在のログをリネームした後、USR1シグナルを送信してログをローテートする。
serviceコマンドでunicorn起動するための設定サンプル
下記ファイル を /etc/init.d/ に配置する。
#!/bin/sh # chkconfig: 345 99 01 # description: unicorn as Rails app server SERVICE="unicorn" ENV="production" RAILS_ROOT="/var/www/app/current" CONFIG=$RAILS_ROOT"/config/unicorn/"$ENV".rb" PID_FILE=$RAILS_ROOT"/tmp/pids/unicorn.pid" start() { START_CMD="cd $RAILS_ROOT && (RAILS_ENV=$ENV /usr/bin/env bundle exec unicorn -c $CONFIG -E $ENV -D)" su -l $USER -c "$START_CMD" & echo "service $SERVICE [start]" } stop() { STOP_CMD="cd $RAILS_ROOT && /usr/bin/env kill -s QUIT `cat $PID_FILE`" su -l $USER -c "$STOP_CMD" & echo "service $SERVICE [stop]" } status() { PID=`pgrep -f $CONFIG | wc -l` if [ $PID -eq 0 ]; then echo "$SERVICE stop" else echo "running $SERVICE ..." fi } case $1 in start) start ;; stop) stop ;; restart) stop start ;; status) status ;; *) echo "Usage: $SERVICE [start|stop|restart|status]" ;; esac exit 0
下記コマンドで service に登録する
# /etc/init.d # sudo chkconfig --add unicorn
使い方
# sudo service unicorn [start|stop|restart|status]
webpack+Reactの環境構築メモ
npm install
$ cd my_project $ npm init $ npm install webpack -g $ npm install --save react react-dom $ npm install --save-dev webpack webpack-dev-server $ npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015
ReactDOM
DOM に React 要素をレンダーするためのモジュール
webpack
複数のファイルを変換してまとめるツール
たとえば複数のjsを変換してひとつにまとめたり。
babel (babel-cor)
JSコードの変換ツール
babel-loader
bableをwebpackで使うためのライブラリ
babel-preset-react
jsxをjsに変換するためのpreset(JSXはReact.createElementの糖衣構文)
babel-preset-es2015
ES2015をES5に変換するためのpreset
webpack.config.js
const webpack = require("webpack"); module.exports = { // minify // plugins: [ // new webpack.optimize.UglifyJsPlugin() // ], context: __dirname + '/src', entry: { js: './js/index.js' }, output: { path: __dirname + '/dist', filename: './js/app.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } }, { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, devServer: { // contentBase: 'dist', host: '127.0.0.1', port: 8080 }, };
ビルド
webpack
開発サーバ起動
package.jsonのscriptsに
"start": "webpack-dev-server"
追加して
npm run start
http://dackdive.hateblo.jp/entry/2016/04/13/123000#webpackconfigjs-の例
Elasticsearchことはじめ
仕事でElasticsearch使う必要があったので、GettingStarted！
これはなに？
分散型RESTful検索/分析エンジン
https://www.elastic.co/jp/products/elasticsearch
特徴
検索時は条件との完全一致ではなく"関連性が高いもの"を返す
http://gihyo.jp/dev/serial/01/js-foundation/0008
インストール
rpm -ivh https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.2.1.rpm chkconfig --add elasticsearch service elasticsearch start
基本操作
https://www.elastic.co/guide/en/elasticsearch/reference/5.2/getting-started.html
起動確認
curl -X GET http://localhost:9200 { "name" : "Ovee1U6", "cluster_name" : "elasticsearch", "cluster_uuid" : "_-CFvUxgRFy_4Q4lwKWMjw", "version" : { "number" : "5.2.1", "build_hash" : "db0d481", "build_date" : "2017-02-09T22:05:32.386Z", "build_snapshot" : false, "lucene_version" : "6.4.1" }, "tagline" : "You Know, for Search" }
インデックスの登録
curl -X PUT http://localhost:9200/customer?pretty { "acknowledged" : true, "shards_acknowledged" : true }
インデックス一覧
curl -X GET http://localhost:9200/_cat/indices?v health status index uuid pri rep docs.count docs.deleted store.size pri.store.size yellow open customer nXJXYUdyRpG_yxh-qTp7_w 5 1 0 0 650b 650b
ドキュメント登録
curl -X PUT http://localhost:9200/customer/external/1?pretty -d ' { "name": "John Doe" } '
インデックス/タイプが未作成の場合は一緒に作成される。
ID未指定の場合はPOSTメソッドを指定する。
ドキュメント確認
curl -X GET http://localhost:9200/customer/external/1 { "name": "John Doe" }
インデックス削除
curl -X DELETE http://localhost:9200/customer?pretty { "acknowledged" : true }
更新操作
変更
curl -X POST http://localhost:9200/customer/external/1/_update?pretty -d ' { "doc": {"age": 20} } '
ageカラムがある場合は上書き、ない場合は追加される。
他のカラムに影響はない。
メソッドはPUTではなくPOSTなのに注意。
スクリプト使った変更
curl -X GET http://localhost:9200/customer/external/1?pretty -d ' { "script": "ctx._source.age += 5" } '
ドキュメント削除
curl -X DELETE http://localhost:9200/customer/external/1?pretty
一括登録
curl -XPOST 'localhost:9200/customer/external/_bulk?pretty&pretty' -H 'Content-Type: application/json' -d' {"index":{"_id":"1"}} {"name": "John Doe" } {"index":{"_id":"2"}} {"name": "Jane Doe" }
検索＆集計
テストデータ登録
curl -X POST 'localhost:9200/bank/account/_bulk?pretty&refresh' --data-binary "@accounts.json" curl http://localhost:9200/_cat/indices?v
サンプルjsonはここから
https://raw.githubusercontent.com/elastic/elasticsearch/master/docs/src/test/resources/accounts.json
ファイル名の前に@をつける必要がある。
書き方１
curl -XGET 'localhost:9200/bank/_search?q=*&sort=account_number:asc&pretty' { "took" : 83, "timed_out" : false, "_shards" : { "total" : 5, "successful" : 5, "failed" : 0 }, "hits" : { "total" : 1000, "max_score" : null, "hits" : [ { "_index" : "bank", "_type" : "account", "_id" : "0", "_score" : null, "_source" : { "account_number" : 0, "balance" : 16623, "firstname" : "Bradshaw", "lastname" : "Mckenzie", "age" : 29, "gender" : "F", "address" : "244 Columbus Place", "employer" : "Euron", "email" : "bradshawmckenzie@euron.com", "city" : "Hobucken", "state" : "CO" }, "sort" : [ 0 ] }, ... ] } }
q=* -> すべてを指定
sort=account_number:asc -> ソート指定
書き方２
curl -XGET 'localhost:9200/bank/_search?pretty' -H 'Content-Type: application/json' -d' { "query": { "match_all": {} }, "sort": [ { "account_number": "asc" } ] } '
取得件数指定
curl -XGET 'localhost:9200/bank/_search?pretty' -H 'Content-Type: application/json' -d' { "query": { "match_all": {} }, "sort": [ { "account_number": "asc" } ], "from": 10, "size": 10 } '
取得カラム指定
curl -XGET 'localhost:9200/bank/_search?pretty' -H 'Content-Type: application/json' -d' { "query": { "match_all": {} }, "_source": ["account_number", "balance"] } '
完全一致検索
curl -XGET 'localhost:9200/bank/_search?pretty' -H 'Content-Type: application/json' -d' { "query": { "match": { "address": "mill" } } } '
bool queryを用いた複数条件指定
curl -XGET 'localhost:9200/bank/_search?pretty' -H 'Content-Type: application/json' -d' { "query": { "bool": { "must": [ { "match": { "age": "40" } } ], "must_not": [ { "match": { "state": "ID" } } ], "filter": { "range": { "balance": { "gte": 20000, "lte": 30000 } } } } } } '
集計
curl -XGET 'localhost:9200/bank/_search?pretty' -H 'Content-Type: application/json' -d' { "size": 0, "aggs": { "group_by_state": { "terms": { "field": "state.keyword" } } } } '
aggs は aggregations(集計) の略。
SQLでいうとこんな感じ。
SELECT state, COUNT(*) FROM bank GROUP BY state ORDER BY COUNT(*) DESC
集計(平均値を出す)
curl -XGET 'localhost:9200/bank/_search?pretty' -H 'Content-Type: application/json' -d' { "size": 0, "aggs": { "group_by_state": { "terms": { "field": "state.keyword", "order": { "average_balance": "desc" } }, "aggs": { "average_balance": { "avg": { "field": "balance" } } } } } } '
ざっとこんな感じで。
