今回はnode.jsを使ったサービスを作ってみました。
実際は２年前に原型は完成していたのですが、知名度が０で誰ともマッチできないことが分かっていましたので、お蔵入りしていました。
node.jsとsocket.ioの知識が得られていたので満足していましたが、最近ツイッターを開始したので何かフォロワーさんに見せれるものを思い、思い出したかのようにdropboxから探し出し、一ヶ月程度修繕しリリースしました。

作ったもの

チャットガチャ
https://chatgacha.com/

匿名でランダムな人とマッチングしてチャットができるサービスです。
シンプルに作ることとシンプル過ぎないことに注意しました。
既存のランダムチャットサービスにはない機能として、ブラックリスト機能があります。
これを実装するのが結構骨がありハマりやすかったです。

技術編 使っているもの

• nginx
• node.js
• express
• socket.io
• pug
• Letsencrypt
• さくらVPS
• vsftpd

Let's Encrypt（SSL/https化）

強いて言えば 、サーバー構築をする前に一番ネックになりそうだなと思っていたことは「Letsencrypt」でのSSL化でした。
普段は、VPSを使わずにレンタルサーバーを使ってクリック１つで実装してきたので、ちょっとビビっていましたが、さくらVPSにはスタートアップスクリプトというものがあり、クリックするだけで実装することができました。
https://vps-news.sakura.ad.jp/tutorials/vps-letsencrypt/

同時にnginxもインストールされたのでかなり楽ができました。

vsftpdもついでに暗号化

FTPでファイルを送受信するためにvsftpdを使っています。
「vsftpd　暗号化」で雑に検索していたのですが、検索している間に「Let's Encrypt」が流用できるのではないかと思って、
「vsftpd　Let's Encrypt」で検索することによって簡単に暗号化することに成功しました。
何で検索するかによって作業時間が大幅に減ったりするのが面白いところですね。
※セキュリティをガチでやっている方は真似しないほうがいいかもしれません。

node.jsのポート番号を隠すためにnginxを使う

ローカルで開発していたとき、スマホの実機で確認するために「192.168.x.x:3000」的な感じで開発をしていました。
実働サーバーではポート番号を隠したいので、自然とnginxを使うことにしました。
また、ここでもSSL化の話になるのですが、node.js側でSSLの対応はしなくて良いということがわかりました。
さくらVPSのスタートアップポイントスクリプトでSSL化した際にnginxをインストールしているので、nginxの設定はサクサク進みました。

IPアドレスの取得で大きくハマる

ローカルでnginxを使わずに開発していました。
実際nginxを使うことになり、IPアドレス取得問題にぶち当たって時間を取られました。
結論のコードだけを書いておきます。

//動く　○
io.on('connection', function(socket){
    var ip = socket.request.headers['x-forwarded-for'] || socket.request.connection.remoteAddress;
}

socket.ioでIPを取得したいのに関わらず、node.js側で（？）IPを取得しようと思って検索していたことが問題でした。

//こういうので頑張っていた　☓
var os = require('os');
console.log(os.networkInterfaces());

また、nginx側の設定でもクライアントのIPアドレスをnode.jsに送るようにしなければなりません。
こっちは記事が多いので割合します。

pugはそこそこ便利

if文が使える。
これはTOPページのコード。TOPのときだけタイトルだけにしたかった。
分からないとタイトルは　「ホーム / チャットガチャ」になっていたと思います。

if `${page.url}` !== ''
  title= `${page.pagetitle} / ${title}`
else
  title= `${title}`

デザインについて

デザインについては素人。個人開発者としては一番ネックかもしれない。
いつもはBootstrapを使って騙し騙し作っていたが今回は使わなかった。
基本的には、サルカワさんを参考にした。https://saruwakakun.com/
また、背景には、subtlepatternsの画像を使った。 https://www.toptal.com/designers/subtlepatterns/
背景やフォントを変更するだけでかなり見栄えがよくなったので、拘るといいかもしれない。
細かいアイコンを使おうと思っていたが、その割には重たくなるので途中で使うのをやめた。

チャットサービスなので、優しい感じにしたかった。
色は青か緑がいいかと思った。基本、角丸のデザインにした。

.box{
   box-shadow: 0 0 8px gray;
}

こんな感じで中央のdivに影をつけてみたら、とても良くなっていったと思います。

普段からよく使うツール

PNG圧縮:　https://compresspng.com/ja/
今の時代表示速度に注目が集まっている。少しでも画像を軽くしたい。ということで使っています。
TOPページの表示速度をディベロッパーツールで調べたところ「213sm」でした。結構表示速度は拘っています。
さくらVPSも気休めですが、東京のデータセンターを選択しています。

アイコン一式をつくる： https://iconifier.net/
ペイントツールなどでアイコンを作ったあといろいろなアイコンのサイズを生成してくれます。
いつも使っています。

感想　まとめ

技術以外の話　https://crieit.net/posts/dd9cbaa9f9828546dc1b3c1c0c0989e1

２年前に作ったサービスなのであまり覚えていませんが、印象に残っていることはデータベースを使わずにランダムマッチングができるということです。
普段からLAMPでサービスを作ってきましたのでいろいろ刺激がありました。
localstorageは結構便利で、ブラックリストの保存やマイページの情報保存に使っています。
また、お問い合わせはツイッターのみにすることによってメールサーバーも立てていません。
個人開発としては楽ができるところはトコトンしたほうがいいでしょうね。

herokuで公開する予定だったんですが、VPSが使えるのでこっちにしました。
今では満足しています。

純粋に知らない人と話すというのは刺激が強い方だと思っていますので、是非使って見てください。