背景

PHP カンファレンス福岡 2019 のセッションの裏側で「PHPコードチャレンジ~マネクラからの挑戦状~」が開催されており、こちらのWebサイトコードゴルフ大会で優勝して、 10 万円分のクーポンを獲得したので、有効活用できないかと思ったのが背景です。

だれ？

めもりー (@m3m0r7) です。最近、 BASE 株式会社という会社で働き始めました。

ハムスター監視システムって？

過去に PHP 勉強会の LT で軽く紹介させていただきました。どういったものかは下記のスライドを見ていただけるとわかるかなと思います。
過去のスライドのため自己紹介が、転職活動中となっておりますが、現在はしていません。

英語版は下記です。

実はリニューアル中

スライドの最後の方にも書いている通り、スクリプトが落ちる課題があり、こちらの解消とアプリケーションの最適化も兼ねて、現在ハムスター監視システムをリニューアルしています。

コードは OSS にしているので、どういうコードが気になる方は下記からどうぞ！

ちなみに OSS にしている理由は PHP 勉強会でコードは公開してますか？と質問されてしてません！します！と宣言したので、公開した経緯があります。

・フロントエンド (ロリポップマネージドクラウドに設置)

TypeScript で書いていたんですが、急いでリリースしたいということもあり、ほとんど any です。もはや TypeScript 使う意味というツッコミはお受けしてません。

・サーバーサイド (こちらは ConoHa に設置)

こちらをロリポップマネージドクラウドに設置しておらず、 ConoHa に設置している理由は、 root 権限が ConoHa にはあるからというのが理由です。
あと仕組み上、インフラそのものを触りたかったっていうのもあります。

・カメラストリーミング用のスクリプト (自宅に設置)

今回はこのフロントエンドのおはなしです。

ロリポップマネージドクラウドの管理画面

上記のような感じです。クーポン所持額見てもらえるとわかるんですが、 10 万円分です。 10 万円すごい！

ちなみに、クーポンを入力すると下記のようなモーダルが出てきました。

クーポンの有効期限が来年 (2020 年) の 7 月までのようで、使い切れないなと思ったので、コンテンツキャッシュ機能も ON にして、積極的に消費していくようにしました。

デプロイ

ものすごく簡単で、管理画面から Node コンテナを選んで起動します。
書いてあるように下記のように実行するだけでなんと、デプロイしてくれる！めっちゃ便利

$ cd /path/to/magnolia-client
$ git remote add lolipop ssh://hogehoge/
$ git push lolipop master

また、SSH して、 user_command.sh を作成すれば、デプロイ時にコマンドを叩く事もできるようです。
依存モジュールのインストールが npm ではなく、 yarn だったのと、 .env が必要だったので下記のようにしました。

#!/bin/sh

/usr/local/bin/yarn install
/usr/local/bin/yarn build

if [ -e  /var/app/shared/.env ]; then
 ln -s /var/app/shared/.env .env
fi

もともとの実装から変更した点

package.json のみの変更だけですみました。普通に動いています。

"scripts": {
   ...
   "start": "node ./server.js",
   ...
 }

もともと、 start を start:prd と書いていたのですが、start ではないとだめっぽい？ので変更しています。また、ドキュメントは koa ですが、 magnolia-client は Express を使っています。

下記引用：

続いてディレクトリに作成されている package.json を開いて scripts に start という項目を追加します。マネージドクラウドにおけるコンテナ起動処理のデフォルト設定ではこの記載によりアプリケーションが起動されます。

ということで、利用させていただいてます！ロリポップさんありがとうございます！