[AWS RDS] バックアップサイクルと保持期間

データベース(Amazon RDS)のバックアップ設定
– バックアップサイクル 1回／日
– バックアップ保持期間 7日

このほか、RDSでは自動バックアップ(自動スナップショット)に加えて、5分毎にデータベース変更ログのアーカイブが自動で行われる

なるほど、バックアップからの復旧もカバーしとかないとあかんのか。
障害対応は神経使うな。

[Laravel8.x] simple-defaultのページネーションをカスタマイズしたい

まず、paginationでsimple-defaultを使用している時の表示

	<div class="d-flex justify-content-center">
            {!! $products->appends(request()->input())->links('vendor.pagination.simple-default') !!}
    </div>

previous, nextと表示されています。

/resources/views/vendor/pagination/simple-default.blade.php

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="disabled" aria-disabled="true"><span>@lang('pagination.previous')</span></li>
            @else
                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
            @endif

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
            @else
                <li class="disabled" aria-disabled="true"><span>@lang('pagination.next')</span></li>
            @endif
        </ul>
    </nav>
@endif

@lang(‘pagination.next’) はどこを読みに行っているかというと、これ。
/resources/lang/en/pagination.php

    'previous' => '&laquo; Previous',
    'next' => 'Next &raquo;',

jaにコピーします。
/resources/lang/en/pagination.php

    'previous' => '&laquo; 前へ　',
    'next' => ' 次へ &raquo;',

まあこれで良いけど、画像も試しておきたい。

画像はこちら

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="disabled" aria-disabled="true"><span></li>
            @else
                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev"><img src="{{ asset('storage/img/left.png') }}">&nbsp;</span></li>
            @endif

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li> <a href="{{ $paginator->nextPageUrl() }}" rel="next">&nbsp;<img src="{{ asset('storage/img/right.png') }}"></a></li>
            @else
                <li class="disabled" aria-disabled="true"><span></li>
            @endif
        </ul>
    </nav>
@endif

画像よりテキストの方が良いな

[AWS Network ACLs] ipアドレスベースでアクセス制御したい

AWS EC2で異常を検知した場合、ipアドレスベースでアクセス制御したい
セキュリティグループだと、プロトコルタイプ(http, https等)でしか制御できないが、ACLsだとipで制御できるらしい。

ACLsとは

ネットワークアクセスコントロールリスト (ACL) は、1 つ以上のサブネットのインバウンドトラフィックとアウトバウンドトラフィックを制御するファイアウォールとして動作する、VPC 用のセキュリティのオプションレイヤーです。

ほう。

rule numberの値が小さいほど、優先度が高い

Sourceでipアドレスを入力してdenyとするとアクセス拒否できる。
htaccessだとec2だけだが、ACLsだとVPS自体にアクセスできないようにできるので、良いですね。

[AWS ELB] ALBのログをS3に出力

apache2のaccess.log, error.logだけでなく、ALBのログも取得したい

1. S2にbucketを作成します。
– access-log-hoge
– permissionは Block all public access でOK

2. bucket policyを編集する
account IDで、tokyoは582318560864となる。
https://docs.aws.amazon.com/elasticloadbalancing/latest/classic/enable-access-logs.html
ap-northeast-1 Asia Pacific (Tokyo) 582318560864

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::582318560864:root"
      },
      "Action": "s3:PutObject",
      "Resource": "arn:aws:s3:::access-log-hoge/AWSLogs/${aws-id}/*"
    },
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "delivery.logs.amazonaws.com"
      },
      "Action": "s3:PutObject",
      "Resource": "arn:aws:s3:::access-log-hoge/AWSLogs/${aws-id}/*",
      "Condition": {
        "StringEquals": {
          "s3:x-amz-acl": "bucket-owner-full-control"
        }
      }
    },
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "delivery.logs.amazonaws.com"
      },
      "Action": "s3:GetBucketAcl",
      "Resource": "arn:aws:s3:::access-log-hoge"
    }
  ]
}

4. ALB側でaccess logをenabledにする

5. bucket
logファイルの出力を確認

うん、なんか出来てるっぽいな。

以下のようなディレクトリで出力される
Amazon S3　/ access-log-hoge / AWSLogs/ ${account-id}/ elasticloadbalancing/ ap-northeast-1/ 2021/ 01/ 17/

ファイル名
${account-id}_elasticloadbalancing_ap-northeast-1_app.hoge-prd-alb.*.log.gz

gzファイルなのでdownloadして中身をみる。
うーん、timestampがUTCなのがちょっと見にくいが、そのほかはapacheのaccess.logのように確認できる

[aws ec2] maatwebsite/excel 3.1.26 requires phpoffice/phpspreadsheet ^1.15 -> satisfiable by phpoffice/phpspreadsheet[1.15.0, 1.16.0].

composer updateした時に、エラーになる。

$ composer update
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

Problem 1
– maatwebsite/excel 3.1.26 requires phpoffice/phpspreadsheet ^1.15 -> satisfiable by phpoffice/phpspreadsheet[1.15.0, 1.16.0].
– maatwebsite/excel[3.1.20, …, 3.1.25] require phpoffice/phpspreadsheet ^1.14 -> satisfiable by phpoffice/phpspreadsheet[1.14.0, 1.14.1, 1.15.0, 1.16.0].
– maatwebsite/excel[3.1.18, …, 3.1.19] require phpoffice/phpspreadsheet ^1.10 -> satisfiable by phpoffice/phpspreadsheet[1.10.0, …, 1.16.0].
– maatwebsite/excel[3.1.7, …, 3.1.17] require phpoffice/phpspreadsheet ^1.6 -> satisfiable by phpoffice/phpspreadsheet[1.6.0, …, 1.16.0].
– maatwebsite/excel[3.1.0, …, 3.1.6] require phpoffice/phpspreadsheet ^1.4 -> satisfiable by phpoffice/phpspreadsheet[1.4.0, …, 1.16.0].
– maatwebsite/excel 3.2.x-dev requires phpoffice/phpspreadsheet ^1.11 -> satisfiable by phpoffice/phpspreadsheet[1.11.0, …, 1.16.0].
– maatwebsite/excel 3.1.x-dev requires phpoffice/phpspreadsheet ^1.16 -> satisfiable by phpoffice/phpspreadsheet[1.16.0].
– phpoffice/phpspreadsheet[1.4.0, …, 1.16.0] require ext-gd * -> it is missing from your system. Install or enable PHP’s gd extension.
– Root composer.json requires maatwebsite/excel ^3.1 -> satisfiable by maatwebsite/excel[3.1.0, …, 3.2.x-dev].

To enable extensions, verify that they are enabled in your .ini files:
– /etc/php.ini
– /etc/php.d/20-bz2.ini
– /etc/php.d/20-calendar.ini
– /etc/php.d/20-ctype.ini
– /etc/php.d/20-curl.ini
– /etc/php.d/20-dom.ini
– /etc/php.d/20-exif.ini
– /etc/php.d/20-fileinfo.ini
– /etc/php.d/20-ftp.ini
– /etc/php.d/20-gettext.ini
– /etc/php.d/20-iconv.ini
– /etc/php.d/20-json.ini
– /etc/php.d/20-mbstring.ini
– /etc/php.d/20-mysqlnd.ini
– /etc/php.d/20-pdo.ini
– /etc/php.d/20-phar.ini
– /etc/php.d/20-simplexml.ini
– /etc/php.d/20-sockets.ini
– /etc/php.d/20-sqlite3.ini
– /etc/php.d/20-tokenizer.ini
– /etc/php.d/20-xml.ini
– /etc/php.d/20-xmlwriter.ini
– /etc/php.d/20-xsl.ini
– /etc/php.d/20-zip.ini
– /etc/php.d/30-mysqli.ini
– /etc/php.d/30-pdo_mysql.ini
– /etc/php.d/30-pdo_sqlite.ini
– /etc/php.d/30-xmlreader.ini
You can also run `php –ini` inside terminal to see which files are used by PHP in CLI mode.

よく見ると
require ext-gd * -> it is missing from your system. Install or enable PHP’s gd extension.

ext-gdが足りないと書いてある。
$ sudo yum install php-gd.x86_64

$ sudo su –
$ cd /var/www/hoge
$ composer update
$ exit

めっちゃ焦るな。侮ってた自分がアホや。インフラエンジニアって大変やな。

[ScrollReveal] スクロールアニメーションを実装したい

ブラウザをスクロールするとアニメーションが動くやつを実装したい。
ScrollRevealというので実装できるらしいので試してみる。

Github: https://github.com/jlmakes/scrollreveal/tree/master

<body>
	<div class="container">
		
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<h1 class="headline">Widget Inc.</h1>
	</div>
	<script src="https://unpkg.com/scrollreveal"></script>
	<script>
		var ScrollrevealFade = {
		    origin: 'left',
		    distance: '0px',//移動範囲
		    scale: 1,//拡大表示（１で横スクロールが始まる）
		    rotate: { x: 20, y: 20, z: 20 }, //
		    duration: 1200, //アニメーションの速度
		    delay :200 //要素が表示するまでの待機時間（ディレイ）
		};
		ScrollReveal().reveal('.headline', ScrollrevealFade, 100);
	</script>
</body>
</html>

スクロール(表示位置に入る)と、アニメーションが入ります。
この例だと、上から降ってくる感じ。

なるほど、面白い。

[Mackerel] AWS EC2でのhost設定

EC2のMackerel導入手順。取り敢えず確認しておきます。

1. Amazon Linux 2 AMI (HVM), SSD Volume Typeでインスタンスをlaunch

2. mackerelの管理画面から新規ホストの登録を行います。

– Amazon Linux 2 LTS

curl -fsSL https://mackerel.io/file/script/amznlinux/setup-all-yum-v2.sh | MACKEREL_APIKEY='hoge' sh

3. sshログイン
$ ssh ec2-user@${ip} -i ~/.ssh/aws-dev.pem

4. 先ほどのyum setupを実行する

curl -fsSL https://mackerel.io/file/script/amznlinux/setup-all-yum-v2.sh | MACKEREL_APIKEY='hoge' sh

$ sudo /sbin/service mackerel-agent start
$ sudo journalctl -u mackerel-agent.service

mackerelの管理画面のHostsで確認します。

大丈夫そうですね。
テスト用なので、退役にして、ec2はterminateします。

よっしゃああああああああああああああ

[Laravel8.x] SendGridでメール送信する

$ composer require sendgrid/sendgrid

.env

SENDGRID_API_KEY=""
FROM_EMAIL=test@gmail.com
FROM_NAME=HPSCRIPT

controller

public function test(){
    	$this->sendMail();
    	return view('index');
    }

public function sendMail(){
    	$email = new \SendGrid\Mail\Mail();
    	$email->setFrom(getenv('FROM_EMAIL'), getenv('FROM_NAME'));
    	$email->setSubject("test");
    	$email->addTo('***');

    	$sendGrid = new \SendGrid(getenv('SENDGRID_API_KEY'));
    	$email->addContent(
            "text/plain",
            strval(
                view(
                    'index'
                )
            )
        );
    	$email->addContent(
    		"text/html",
    		strval(
    			view(
    				'index'
    			)
    		)
    	);
    	
    	try {
    		$sendGrid->send($email);
    		return true;
    	} catch (Exception $e) {
    		echo $e;
            // Log::debug($e->getMessage());
            return false;
        }
    }

メール配信を無料ではなくてちゃんと月額課金の契約して行くと、ステージ変わった感があるな。
感慨深いものがある。

[AWS S3] 静的ファイルをホスティングする

S3に静的ファイルをホスティングできるらしい。
S3でホームページやサービスを運営してるってあまり聞かないような印象だが試しにやってみたい。

### bucketの作成
適当にバケットを作成します。
– static-s3-test

バケットにtest.htmlを配置し、make publicとします。

アクセスできるようになりました。

ルーティングはわからんが。。
一通りできると安心するね。

[video] modalで動画を表示したい

modal-video.jsを使う場合

	<link rel="stylesheet" type="text/css" href="/css/modal-video.min.css">
	
</head>
<body>
	<div class="container">
		<div class="video-container">
			<button class="js-modal-btn" data-video-id="${youtube ID}">Videoを開く</button>
			<div class="video-sidebar">
				<h1>Video Test</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
			</div>
		</div>
		<h1>H1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
		<img src="img/img1.jpg" class="object-fit" width="400px" height="200px"><br><br>
	</div>
	<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="/js/jquery-modal-video.min.js"></script>
	<script>
  		$(".js-modal-btn").modalVideo();
	</script>

jqueryを使っている場合、modal-video.min.jsでは反応しない。jquery-modal-video.min.jsにする必要がある。

### fancyboxのモーダルを使う場合

	<link rel="stylesheet" href="/css/jquery.fancybox.css" type="text/css" media="screen" />
	<style>
		#video {
			display: none;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="video-container">
			<button class="modal" href="#video">Videoを開く</button>
			<div id="video">
				<video id="player" controls width="640" height="360">
					<source src="/video/hoge.mp4">
				</video>
			</div>
			<div class="video-sidebar">
				<h1>Video Test</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
			</div>
		</div>
		<h1>H1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
		<img src="img/img1.jpg" class="object-fit" width="400px" height="200px"><br><br>
	</div>
	<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox.js"></script>
	<script>
  		$(function(){
  			$(".modal").fancybox({
  				'onComplete':function(){
  					vidplay();
  				}
  			});
  			function vidplay(){
  				var video = document.getElementById("player");
  				if(video.paused){
  					video.play();
  				} else {
  					video.paused();
  				}
  			}
  		});
	</script>

display noneとして、ボタン押下時にmodalで表示する。
modal-videoでもfancyboxでも、どっちも使えそう。