【AWS】EC2 ALインスタンスを立ち上げ時にやることまとめ
基本的なソフトウェア設定及び更新
- yum(パッケージ管理システム)のアップデート
$ sudo yum update -y
- タイムゾーンを日本時間に変更
$ sudo ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
- ハードウェアクロック向け設定ファイル変更
$ echo -e 'ZONE="Asia/Tokyo"\nUTC=false' | sudo tee /etc/sysconfig/clock
- 言語を日本語に設定
$ echo "LANG=ja_JP.UTF-8" | sudo tee /etc/sysconfig/i18n
ユーザ
ec2-userはデフォルトで存在するユーザの為、セキュリティホールになりがちです。必ず別のユーザーを作成し削除しましょう。
- ユーザを追加する
$ sudo adduser hogehoge
- ユーザにsudo権限を付与する
$ sudo usermod -G wheel hogehoge $ sudo visudo hogehoge ALL=(ALL) NOPASSWD: ALL
- ec2-userのssh設定を追加したユーザと同期する
$ sudo rsync -a ~/.ssh/authorized_keys ~hogehoge/.ssh/ $ sudo chown -R hogehoge:hogehoge ~hogehoge/.ssh $ sudo chmod -R go-rwx ~hogehoge/.ssh $ sudo ls -al ~hogehoge/.ssh
- ec2-userの削除
追加したユーザにssh接続が出来る事と、管理者権限が付与されている事を確認後に実行
$ udo userdel ec2-user
セキュリティ
- セキュリティグループの設定
AWSコンソール上で、[EC2]→[セキュリティグループ]を選択し、必要なポートのみ開放する。
Webサービスの用途で使う場合にはHTTP、HTTPS、SSHが基本。
- MFAの利用
詳しくはこちら
dev.classmethod.jp
【c3.js】凡例アイコンを四角から丸に変更する
c3.jsでグラフを描画した時、標準では凡例のアイコンが色つきの四角で表示されます。(■)
そのアイコンを丸(●)で描画する方法は下記です。
本執筆では、c3.jsのバージョン0.4.11で動作を確認しています。
c3.jsのバージョンによって動作が異なる場合がありますのでご了承ください。
c3.jsのL4258~の部分をこのように修正してください。
修正前
l.append('text') .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) .each(function (id, i) { updatePositions(this, id, i); }) .style("pointer-events", "none") .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200) .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText); l.append('rect') .attr("class", CLASS.legendItemEvent) .style('fill-opacity', 0) .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendRect : -200) .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendRect); l.append('line') .attr('class', CLASS.legendItemTile) .style('stroke', $$.color) .style("pointer-events", "none") .attr('x1', $$.isLegendRight || $$.isLegendInset ? x1ForLegendTile : -200) .attr('y1', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendTile) .attr('x2', $$.isLegendRight || $$.isLegendInset ? x2ForLegendTile : -200) .attr('y2', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendTile) .attr('stroke-width', config.legend_item_tile_height);
修正後
l.append('text') .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) .each(function (id, i) { updatePositions(this, id, i); }) .style("pointer-events", "none") .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200) .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText); l.append('rect') .attr("class", CLASS.legendItemEvent) .style('fill-opacity', 0) .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendRect : -200) .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendRect); l.append('rect') .attr('class', CLASS.legendItemTile) .style("pointer-events", "none") .style('fill', $$.color) .attr('x', xForLegendRect2) .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegend) .attr('width', 10) .attr('height', 10) .attr('rx', 10) .attr('ry', 10);
修正後は、X軸の位置がxForLegendRect2で定義されるようになります。
その為、X軸の位置を決める関数xForLegendRect2を追加しましょう。
c3.jsのL4216に下記関数を定義します
xForLegendRect2 = function (id, i) { return xForLegend(id, i) - 10; };
- 10しているのは、アイコン名から左に10移動した位置にアイコンを表示する為です。
この数値や関数はカスタマイズして使ってください。
最後に、c3.cssのL15の下記の部分を修正します
.c3-legend -item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path { shape-rendering: inherit; }
以上で、凡例アイコンを丸にする事ができました。
サンプルとしてfiddleでソースを公開しています。
jsfiddle.net