読者です 読者をやめる 読者になる 読者になる

【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、HTTPSSSHが基本。

  • 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