knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

aws LightSail + ubuntu +docker SSL 設定 #php #Laravel #aws

index:

概要:

前の HTTPS化のインフラ関連で、
aws LightSail で、LetsencryptによるSSL
Ubuntu 16+ docker + Laravel 5.8 構成となります。

環境

amazon aws LightSail
Ubuntu 16
nginx
docker
docker-compose
AWS Route53
Letsencrypt

前提 、使用しない部分

・ロードバランサ使用しない、
AWS Certificate Manager 使用しない
Amazon CloudFront 使用しない

前提、事前の準備等

ドメイン取得済、今回は Route53でドメイン取得
・Laravel 追加済
・docker, docker-compose の追加済
aws LightSail の固定IPを、Route53で
 取得したドメインに。割り当てておく

参考の設定

github.com


手順

・LightSail は、Ubuntu 16のみ
 wordpress等 アプリ無
HTTPS は、初期で通信できない為
 LightSail>ネットワーキング>静的IP >
 ファイアウォールで、
HTTPS 443を、追加しておく。

f:id:knaka0209:20200209193327p:plain

Letsencrypt で、SSL

・nginx等のHTTPサーバを、立ち上げておきます。
外部からLetsencryptが、ドメインを確認するらしく。通信に失敗すると
 処理が、進まなかった為。

・例で、example.com は、設定ドメイン
・仮に、HTTPを、docker nginxで立ち上げたフォルダ
 /home/ubuntu/work/docker_nginx_Light
・途中で、メールアドレス等の入力あり
・成功すると、  /etc/letsencrypt/live
 あたりに、SSL証明書が発行される

cd /tmp
git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
./letsencrypt-auto
./letsencrypt-auto certonly --webroot -w /home/ubuntu/work/docker_nginx_Light -d example.com
sudo cp /etc/letsencrypt/live/example.com/fullchain.pem /home/ubuntu/work/docker_nginx_Light/ssl/server.crt
sudo cp /etc/letsencrypt/live/example.com/privkey.pem /home/ubuntu/work/docker_nginx_Light/ssl/server.key

docker-compose.yml

https://github.com/kuc-arc-f/docker_Light_SSL/blob/master/docker-compose.yml

version: '3'

services:
 web:
    build: ./docker-nginx
    ports:
        - 80:80
        - 443:443
    depends_on:
        - app
    volumes:
        - ./:/var/www/html
        - ./docker-nginx/default.conf:/etc/nginx/conf.d/default.conf
        - ./ssl:/etc/nginx/ssl
    links:
        - app
 app:
    build: ./docker-php
    depends_on:
        - db
    links:
        - db
    volumes:
        - ./:/var/www/html
 db:
    image: mysql:5.7.19
    volumes:
        - ./db/mysql_data:/var/lib/mysql    
    ports:
        - 3306:3306
    environment:
      MYSQL_ROOT_PASSWORD: root         #
      MYSQL_DATABASE: laravel         #
      MYSQL_USER: db_user           #ユーザ名
      MYSQL_PASSWORD: password   #ユーザ用パスワード

コンテナ起動

・LEMP (nginx)構成 + Laravel の、SSL対応コンテナを起動


./ssl に、Letsencrypt のSSL関連ファイルを配置

docker-compose up -d

https://設定したドメイン 、でSSL化できました。

chrome で、設置ページを開くと
 Letsencrypt証明書の情報が見れました
 有効期間は、90日らしいですね。


f:id:knaka0209:20200209195314p:plain

docker + nginx で、HTTPS/SSL化 の設定

index:

概要:

前の HTTPS化のインフラ関連で、
Ubuntu 16 の例となります。

環境

Ubuntu 16
docker
nginx
docker-compose

参考の設定

github.com

手順

・dokcer のインストールは、省略しますが。
 前の参考記事は、下記です。
knaka0209.hatenablog.com


・nginxのSSL は、前の記事を参考にしています
knaka0209.hatenablog.com

SSL関連ファイル、秘密鍵など は
 ./ssl フォルダに配置しておきます。

docker-compose.yml

https://github.com/kuc-arc-f/docker_nginx_SSL/blob/master/docker-compose.yml

version: '3'

services:
 web:
    build: ./docker-nginx
    ports:
        - 80:80
        - 443:443
    volumes:
        - ./:/var/www/html
        - ./docker-nginx/default.conf:/etc/nginx/conf.d/default.conf
        - ./ssl:/etc/nginx/ssl

・nginx設定
 default.conf
https://github.com/kuc-arc-f/docker_nginx_SSL/blob/master/docker-nginx/default.conf

コンテナ起動

docker-compose up -d

https://設置ドメイン
で、HTTPS ページ開けました

nginx + ubuntu で HTTPS(SSL)の設定 #php

index:

概要:

nginx の、HTTPS化で、
Ubuntu 16 の例となります。
自作SSL証明書で、chrome等では警告は、初回出ます

設定

/etc/nginx/ssl
の下に、関係ファイル作成します。


秘密鍵

sudo openssl genrsa -out /etc/nginx/ssl/server.key 2048

CSR(証明書署名要求)の作成

sudo openssl req -new -key /etc/nginx/ssl/server.key -out /etc/nginx/ssl/server.csr

「Common Name」には、サーバのドメイン名を入力します。

CRT(SSLサーバ証明書)の作成

sudo openssl x509 -days 3650 -req -signkey /etc/nginx/ssl/server.key -in /etc/nginx/ssl/server.csr -out /etc/nginx/ssl/server.crt

nginx設定

・パスの例ですが、 下記に配置して
/etc/nginx/sites-available/default.conf
リンクを、
/etc/nginx/sites-enabled/ に、追加すると、反映できました

・HTTP(80番) は通信できないように。記載せず、
443 のSSLのみに、設定

server {
    listen 443 ssl;

    #
    ssl_certificate     /etc/nginx/ssl/server.crt;
    ssl_certificate_key /etc/nginx/ssl/server.key;

    #
    root /var/www/html;

    location / {
        try_files $uri $uri/ =404;
    }
}

確認など

・nginx 再起動します

https://設置ドメイン/ で、HTTPS 通信可能となります

・自作SSL証明書で、ブラウザで警告でますが。
ページは開けます
chrome の場合 URLの左に、保護されてない通信
 と表示されます。

f:id:knaka0209:20200202102706p:plain

・正式な基地局が発行している証明書ではないので、
 証明書は無効と、表示されますね。
f:id:knaka0209:20200202103003p:plain

Laravel 5.8 + firebase Cloud Messaging で、web push通知対応の チャット機能の作成

前のLaravel 関係で
firebase Cloud Messaging, Notification API 等で web push通知対応の
チャット機能の作成となります。

参考のコード

github.com

画面

・通知
 メンバーからの、通知ポップアップと。着信音が出力されます

f:id:knaka0209:20200119171018p:plain

・チャットの画面
dbに、メッセージを保存しておき。
過去の投稿も表示可能です。

f:id:knaka0209:20200119171046p:plain

・チャット一覧
 ほぼCRUDですが、チャット作成、参加が可能
f:id:knaka0209:20200119171612p:plain

実装など

・ルーティング 、画面や API

Route::get('/chats/add_member', 'ChatsController@add_member')->name('chats.add_member');
Route::resource('chats', 'ChatsController');
//
Auth::routes();
//
Route::get('/home', 'HomeController@index')->name('home');


/**************************************
 * API
 **************************************/
Route::prefix('api')->group(function(){
    Route::get('/apichats/get_post', 'ApiChatsController@get_post');
    Route::post('/apichats/update_token', 'ApiChatsController@update_token');
    Route::post('/apichats/update_post', 'ApiChatsController@update_post');
});

・コントローラ
ChatsController.php
https://github.com/kuc-arc-f/lara58a_6chat/blob/master/app/Http/Controllers/ChatsController.php

・Blade
チャット画面: chats/show.blade.php
https://github.com/kuc-arc-f/lara58a_6chat/blob/master/resources/views/chats/show.blade.php

・FCM(firebase Cloud Messaging) の設定や、
 鍵等の取得は、前のブログと同様です

参考のページ

Cloud Messaging の設定など
knaka0209.hatenablog.com

Update

・Update 2020/02/16
上記の、チャット 機能のデモページを追加しました
https://knaka0209.net/chats

・メンバー間で、チャットする場合、ユーザー登録が必要になり。
・guestユーザーは、画面表示など確認は可能です
guest@kuc-arc-f.com / password 、でログインできます

firebase Cloud Messaging + Notification APIで、Web push通知

firebase Cloud Messaging を使用して、
ブラウザにpush通知の内容となります。

環境

chrome 79 以降
webサーバ

ドメインは、localhost でも動作しました

参考のpush画面

・受信メッセージが、デスクトップに表示できました
win10ですが

f:id:knaka0209:20200115171250p:plain

準備など

firebase (firebase.google.com )
にログインし、作成したプロジェクトを開く

・Project Pverview >設定(歯車アイコン)>プロジェクトの設定

・Cloud Messaging タブ 開きます。

・サーバーキー
 トークンを、コピーしておきます。

・送信者 ID (送信時に使用)
  IDを、コピー
・鍵ペア(公開鍵)
 ウエブ設定> ウエブプッシュ証明書 、のあたり
 初回は、鍵の作成で。良かったと思います。

 鍵ペアを、コピーしておきます。

・Notification API で通知ですが、
 テストする場合。
 ブラウザの通知、許可を設定しておく必要があります。

参考のコード

github.com

実装など

ドメイン直下に、
 firebase-messaging-sw.js, manifest.json
を配置

・firebase-messaging-sw.js
 に、送信者ID を、設定

firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
 下記、messagingSenderId の部分
});

・受信、送信画面
https://github.com/kuc-arc-f/fcm_sample1/blob/master/test/fcm_recv2.html

・firebase 設定で、送信者ID を、設定
 下記、messagingSenderId の部分

・公開鍵、
 下記 YOUR_PUBLIC_VAPID_KEY_HERE の部分 設定

firebase.initializeApp({
   'messagingSenderId': 'YOUR-SENDER-ID'
 });
//FCM
const messaging = firebase.messaging();
messaging.usePublicVapidKey('<YOUR_PUBLIC_VAPID_KEY_HERE>');

・サーバーキー の設定
上記の、トークン追加

const FCM_SERVER_KEY = "YOUR-SERVER-KEY";

・token取得
 送信先トークンを、画面起動時に取得

    messaging.getToken().then((currentToken) => {
        if (currentToken) {
            sendTokenToServer(currentToken);
            IID_TOKEN = currentToken;
            textInstanceIdToken.value = IID_TOKEN;
//        console.log(currentToken);
        } else {
            // Show permission request.
            alert("ブラウザ通知を許可に設定下さい。メッセージを送受信できません");
            console.log('No Instance ID token available. Request permission to generate one.');
            // Show permission UI.
            updateUIForPushPermissionRequired();
            setTokenSentToServer(false);
        }
    }).catch((err) => {
        console.log('An error occurred while retrieving token. ', err);
        setTokenSentToServer(false);
    });

受信

    messaging.onMessage((payload) => {
//        console.log('Message received. ', payload);
        var notify = payload.notification;
        console.log(notify.title );
    });

送信

fetchで、送信例です
・FCM_SERVER_KEY は、上記のサーバーキー 
toは、上記で取得した。送信先 token

function test_send(){
//console.log(IID_TOKEN.length );
    var send_title = elem_title.value;
    var send_body = elem_body.value;

    if(IID_TOKEN.length < 1){ return; }
    var key = FCM_SERVER_KEY;
    var to = IID_TOKEN;
    var notification = {
        'title': send_title,
        'body': send_body,
        'icon': 'firebase-logo.png',
        'click_action': 'http://localhost'
    };

    fetch('https://fcm.googleapis.com/fcm/send', {
    'method': 'POST',
    'headers': {
        'Authorization': 'key=' + key,
        'Content-Type': 'application/json'
    },
    'body': JSON.stringify({
        'notification': notification,
        'to': to
        })
    }).then(function(response) {
//        console.log(response);
    }).catch(function(error) {
        console.error(error);
    })
};


・送信すると、firebase (firebase Cloud Messaging) 経由で
 メッセージが送信され、上記の画面のような
 push通知画面が。表示できました。

Laravel 5.8で、CSVインポート機能

前のLaravel 関係で
CSVアップロードで、DB更新となります。

参考のコード

github.com

実装など

・コントローラ
計測値等の、管理ですが

https://github.com/kuc-arc-f/lara58a_5mdat/blob/master/app/Http/Controllers/MdatsController.php

    public function csv_import(Request $request){
        $user_id = Auth::id();
        // CSVファイルをサーバーに保存
        $temporary_csv_file = $request->file('csv_file')->store('csv');
        $fp = fopen(storage_path('app/') . $temporary_csv_file, 'r');
        // 一行目(ヘッダ)読み込み
        $headers = fgetcsv($fp);

        $column_names = [];
        // CSVヘッダ確認
        foreach ($headers as $header) {
            $result = Mdat::retrieveTestColumnsByValue($header, 'SJIS-win');
            if ($result === null) {
                fclose($fp);
                Storage::delete($temporary_csv_file);
                session()->flash('flash_message', '登録に失敗しました。CSVファイルのフォーマットが正しいことを確認してださい。');
                return redirect()->route('mdats.index');
            }
            $column_names[] = $result;
        }
        $csv_items = [];
        while ($row = fgetcsv($fp)) {
            mb_convert_variables('UTF-8', 'SJIS-win', $row);
            $csv_items[] = $row;
        }
        fclose($fp);
//debug_dump( $csv_items );
        $errors = $this->validator($csv_items );
        if(count($errors) > 0 ){
            return redirect()->back()->withErrors($errors)->withInput();
        }

        foreach ($csv_items as $row) {
            $date  =$row[0];
            if(!empty($date)){
                $mdat = Mdat::where('user_id', $user_id )
                ->where('date', $date )->first();
                if(empty($mdat) ){
                    $mdat = new Mdat();
                    $data["date"] = $row[0];
                    $data["hnum"] = $row[1];
                    $data["lnum"] = $row[2];
                    $data["user_id"] = $user_id;
                    $mdat->fill($data );
                    $mdat->save();
                }else{
                    $mdatArray = $mdat->toArray();
                    $mdat = Mdat::find($mdatArray["id"]);
                    $data["date"] = $row[0];
                    $data["hnum"] = $row[1];
                    $data["lnum"] = $row[2];
                    $mdat->fill($data );
                    $mdat->save();
                }    
            }
        }
        return redirect()->route('mdats.index');
    }

画面

f:id:knaka0209:20200104180311p:plain

csv出力

    public function csv_get(){
        $user_id = Auth::id();
        $dt = new Carbon(self::getYm_firstday());
        $now_month= $dt->format('Y-m');
        $startDt = $dt->format('Y-m-d');
        $endDt = $dt->endOfMonth()->format('Y-m-d');
//dd($startDt);
//exit                
        $mdats = Mdat::orderBy('date', 'asc')
        ->where("user_id", $user_id )
        ->whereBetween("date", [$startDt, $endDt ])
        ->get(['date', 'hnum', 'lnum'] )->toArray();
//dd($mdats );
        $csvHeader = ['date', 'Height' , 'Low'];
        array_unshift($mdats, $csvHeader);   
        $stream = fopen('php://temp', 'r+b');
        foreach ($mdats as $mdat ) {
            fputcsv($stream, $mdat );
        }
        rewind($stream);
        $csv = str_replace(PHP_EOL, "\r\n", stream_get_contents($stream));
        $csv = mb_convert_encoding($csv, 'SJIS-win', 'UTF-8');
        return response($csv )
            ->withHeaders([
                'Content-Type' => 'text/csv',
                'Content-Disposition' => 'attachment; filename="mdat.csv"',
            ]);

    }

Seeder

追加データのseederを追加しました。
https://github.com/kuc-arc-f/lara58a_5mdat/blob/master/database/seeds/MdatTableSeeder.php

php  artisan db:seed --class=MdatTableSeeder

Seederクラスのエラーが出る場合、 composerを再実行すると。エラーが回避できました
php composer.phar dump-autoload

ゲーミングマウス 500円、レビュー編

index:

概要

ダイソー様の、500円(税別)で購入できた 
ゲーミングマウスについての記事となります。

・作業PC用の amazonで購入した300円低価格マウス
 が古くなったので、買い替え品を探したところ
 有線USB マウスが、100均様に。販売されていたので購入してみました。

感想

低下価格ですが、良さそうなマウスと思います。

画像

・梱包はそれなりに、安っぽいイメージは無かったようです。
f:id:knaka0209:20191229185001j:plain

・LEDで、マウス光るんですよね
 少し暗い照明で。撮影です
f:id:knaka0209:20191229185025j:plain

その他

・右指の当たる部分は、すべりにくい素材のようで
 押しやすい気がします。
・側面は、普通のプラ素材で、安っぽく見えました
・側面にもボタンが有り、機能はありそうで
よく把握してないのですが。。
 ゲーム用途でなくても、PC作業のマウスとしても使えそうです

update

Update : 2020/01/10
2週間程で、左側のボタンが押しても。反応しない事が
多くなりました。。
個体差は、ありそうですが。耐久性の面でNGかもしれません