Webサービスを作ってみました。

WEB サービスを作りました。

名前は「POSTSON」JSON データを POST して使うので「POSTSON」！
ネーミングセンス無さ過ぎてつらい
データベースを使用したアプリだし、中のコードをそのまま見せるとか怖くてできませんが、
今回使用したパッケージとか構成について,
振り返りも含めて書いてみたいと思います。

目次

使い方

アプリの使い方は、

  1. データとメールアドレスを登録
  2. データ有効化用 URL が届くので、データ有効化用 URL にアクセス。
  3. データ配信 URL と削除用 URL が届くので、自分のアプリでデータ配信 URL にアクセスして JSON データを取得する。
  4. 不要になったら削除用 URL にアクセスしてデータ削除する
    (削除しなくても、1 週間でデータが消える。)

構想

そもそもなんで作った？そんな話。

Node.js とかラズパイを触り始める前は、当時知見がほとんどなかった HTML・css とかの勉強をしていて、
そういうことしてると、サーバーとやり取りするものを作ってみたいのに「わ・か・ら・ん？！」ってなって模索してた時期が有った。

この理由って、フロントエンドの勉強に軸置きたいのに、バックエンドやるの？みたいな感覚が有って、
暗中模索・敵がでかすぎる！！みたいな無力感だった気がする。

今なら全体の構成が多少理解できてるし、作れる(もちろん、まったく資料見ないでは少し厳しいけど・・・。)けど、
当時はやや辛かった記憶。
作れないならと公開されてる利用フリーの API 探してみるけど微妙・・・。という具合。

そんな１年くらい前にあったらよかったなーってものを作ってみました。
なので利用者のターゲットは

  • フロントエンドは作れる
  • サーバーサイドの知見はない
  • サーバとやり取りするものを作りたい

という人
ターゲットが狭すぎる気がする。ニッチにもほどがある

ポイントは

  • 自分の欲しいデータを登録できること

サービスとして公開するために

  • 利用者だけにデータ提供される URL を公開できる。
  • 利用者がデータの削除ができる。
  • 一定期間でデータを削除できる。

スキルアップとして

  • Node.js で構築する。

なんてことを決めて取り掛かかり、一時ラズパイに浮気しながらも週末に頑張ってだいたい 3 か月で、完成まで持ってこれました。
ここまでで意外と役に立ったのが、Amazon で kindle で公開されてる技術書が意外とよくてコンパクトにまとまっていて、
概要をつかむにはすごくよかった。
kindle unlimited 入っててよかったと思った理由の一つ

フロントエンド

フロントエンドは、SPA で作ろうというのだけが目標にあって

  • vue.js
  • jQuery
  • bootstrap
    を主に使用

vue-cli を用いて.vue の単一コンポーネントで構成。
Vue.js は、分かりやすくかつ生産性が高くて、ほんとに「Evan You さんありがとう」って叫びたい。

サーバーの通信周りの処理の実装のために Jquery を使用。
今振り返れば、DOM は仮想 DOM を Vue.js で操作するし、
Polyfill をちゃんと設定できれば、Fetch API とかでネイティブなものを使ってもよかったよねと思う。
そうしたら、レスポンスヘッダで判断して json データが勝手にパースされているのに気が付かなくて、
2 時間詰まったりしなかったかも・・・しれない。

レイアウトは、ホームページでも使用している Bootstrap を使用。
vue.js と組み合わせるために使ったBootstrap+Vueが曲者で、
独自タグ？が多くて、bootstrap でレイアウトするつもりで別なもの使っているような感覚。
体感の学習コストが高くて挫折しかけた。
次からは Bootstrap にこだわらず、生産性が上がれば css ライブラリはなんでもいいかなって思う。

サーバーサイド

サーバーサイドでやりたかったのは、

  • 既存の Apache との共存
  • 利用者のみへのデータ配信用 URL の連絡
  • 定期的なデータ処理
  • 動的な URL 生成
    といった具合

使ったのは

  • express
  • node-mailer
  • promise-mysql
  • crypto
  • cron
  • forever
    を主に使用

既存の Apache との共存は、プロキシを設定して内部の別ポートに飛ばすことをしているけど、
このために Apache の勉強もしたけど、言うほど勉強でもなかった気がする。
というのも、調べると定型的な設定で、勉強するほどでもなかった・
でもこれをやったおかげで、URL で転送するルール定義でサーバー上で複数のサーバー処理するプロセスを立てる算段が付いたので良かった。
(他にも web サービス作りたいからね。)

利用者のみにデータ配信をするために、google アカウントの連携とか、twitter 連携とか考えたけど、
結論として今回はたぶんメール配信がいいと思って、node-mailer を使ってみながらNode.js でメール送信を作ってみる。なんて、
記事も作った。
この時、非同期処理を promise、await、async で処理することをいろいろ試したので、非同期処理で困ることはほとんどなくなった。

データベースは、MariaDBを使っているけど
node.js から使うために入れたmariadb パッケージがうまく使いこなせなくて、
コールバックを promise で包む処理を作りこみきれず、失意の中でpromise-mysqlに出会った事は忘れない。
「調べる」ことをあきらめてはいけないと今でも思う。
この時の結果として記事Windows に MariaDB をインストールは mariadb パッケージを使っているのに、
本番では使っていない。
mariadb パッケージを使っている人にpromise-mysqlがいいぞって感じの記事を作ってもいい気がする。
結構よくできたんじゃないかな？と思っていて、DB のテーブルの設計資料も書いてみた。
本職ではおそらく経験できない事なので、いい経験になったなと思う。
応用情報の次に高度情報処理技術者でどれを受けるか迷っていたので、データベーススペシャリストを受けてみるのもいいかもしれないと今は思う。
相変わらず調子がいい

動的な URL を作るために、入力からハッシュ文字列が作りたくて crypto を使った。
処理自体は、url を変数として取り扱ってるだけなので大したことはしていないと思う。

定期的な繰り返し処理のために、cronも使っているけど、
これも面白くて、サーバーで crontab の設定をするよりかなり難易度が下がった気がする。
cron を使って定期的なラズパイでのセンシングをさせるのに使うのもおもしろそうだなと思ってる。

そしてサービスとして常駐させるためにforeverを使ったけど、
リリース直前にアプリケーションが起動を繰り返す挙動を繰り返したことは忘れない。
そして多分もう -w を入れることはきっとしない。
Stack Overflow を読んでみることも大事で、英語から逃げてはいけないと痛感する。
他にもサービス化するツールは有るけど forever を使ったのは、readme を見てわかりやすかったのとシンプルだったから
次は pm2 使うかも、でも高度な設定はたぶん使わないかな規模的には。

他にもいろいろあって

入力をしてもらうわけだし(ちょうど Google の勧告もあったのだけど)やっぱり SSL 化は必須だよね。
と思って Let’s Encrypt を設定したり、その証明書が期限切れで数日ブラウザから警告受けたり・・・。

これから

今回、フロントからバックエンドまで一通り(本職の人から取るに足らないかもしれないけど)、
どうにか作り切ることができました。
この経験はすごく大事にしてゆきたいし、やっぱり手を動かして開発するのは楽しいし、
途上でつらくても頑張れる。

次のサービス・アプリのプランはあるので、今回の反省も含めて次のことを調べつつ進めたい。

  • Vue.js と組み合わせやすい CSS ライブラリや、Nuxt.js とか
  • jQuery 以外の Ajax 処理用ライブラリとそれを利用した実装
  • Google アカウント・twitter アカウント連携
  • PWA

あと、ラズパイと組み合わせて何かしたい。
玄関のドアが開いたらメール送ってもらおうかな。

ほとんど、役にも立たない記事になってるけど、
ちょっとでもアプリ作りたくて立ち上がろうとしてる人へのエールになっていたらうれしいなと思います。

ではでは。