knaka Tech-Blog

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

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

web Laravel php

index:

概要:

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

参考

https://qiita.com/snowdog/items/9c96ee0fa6ed096e8940

設定

/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(８０番)　は通信できないように。記載せず、
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

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

firebase javascript

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

環境

chrome 79 以降
webサーバ

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

参考

https://firebase.google.com/docs/cloud-messaging/js/client?hl=ja

https://firebase.google.com/docs/cloud-messaging/js/receive?hl=ja

https://qiita.com/ryo_hisano/items/1171beca22d5a04ed802

参考の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通知画面が。表示できました。

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

index:

概要

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

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

感想

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

画像

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

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

その他

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

update

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