あさた研メモ

主に私が気づいたこととか困った時のメモとか書き留めとく用。

自分のホームページを作った話

雑記 React.js Typescript DevOps

概要

紆余曲折を経て、自分の音楽活動用のホームページを作った。

(追記: いろいろあって閉鎖した)

その苦労した箇所を適当に書きなぐっておく。

事の発端

流石にTwitterだけじゃ自分の今までの活動をまとめきれないと思い、 せっかく技術的にアプローチできるのだから自サイトを立ち上げることを決意した。

あと流行りの技術とか使ってみたかったので、いいきっかけだった。

使用技術

frontend

React.js + Material-UI

どこの勉強会いってもReactがVueの話が出てくるので、せっかくだし使ってみようと思って1から勉強。

せっかくだしついででTypescriptで書くことを決意。

backend

まだガワしか作ってないからAPIもクソもないが、そのうち作る。 じゃないと機能拡大ができない。

いまのところElixir(Phoenix)かNode使うかって考えている。

DevOps

Travis-CIによるテスト&デプロイを利用。 ここが一番大変だった。後述。

苦労したところ・わからないところ

React.js

そもそもちゃんとjsとかts書いたことなかったので、かなり基礎的なところを書きながら勉強した。

結局 create-react-apps があったので、これを利用して開発を開始。

未だに正解がわからないが、コンポーネントとかstateの管理とかは「それっぽく」動くようになった。

Typescriptで書くチュートリアルがないため、しょっちゅうエラーをはいていた。 特にPropsやStateの型関連？

interface IProps {};
interface IState {
  value: number
};

class Hoge extends React.Components<IProps, IState> {
  ...
}

結局上記のように書いて解決できることを知ったが、なんで型引数が必要なのかわかってない。

constructorで暗黙的に呼び出しているからなのかな…？

一応エラーは解消できたので書き方としては正しいんだと思う。

しかしここは完全に勉強不足なので、他のReactで構成されたOSSとかを覗いてみるのもいいかもしれない。

Reactのテストについて

どういうことを検証するためにどんなテストをしていいのかわからなかった。

単純にメソッドのインプット・アウトプットを見るだけのテストならわかるが、 多分それだけじゃ不足しているっぽい。

どうやらスナップショットテストというのがあるらしいのは分かったが、それによって何がわかって嬉しいのかがわからずじまい。

もう一回ドキュメント読むなりして解決しないといけない。

Travis-CI

大きく苦戦したのがこいつ。

計画として、下図のような構成を考えていた。

f:id:asataken:20190208200206p:plain
構成図

このうち、masterへのpushをトリガーにテストするのはとても簡単だったのだが、 デプロイがなかなかうまくいかずにだいぶ時間をかけた。

Travis上でbuildまでして、buildが成功したらそれをrsyncでサーバにデプロイしようと考えた。

一応ドキュメントを読んで秘密鍵の暗号化とかはできていたのだが、何故か入れない。

結局何が行けなかったかというと、サーバ側に置く公開鍵の所有者問題だった。

開発ローカル上で作った鍵をサーバに送って配置したのだが、 所有者が自分のPCになってしまっていたため、動いていなかったのである。

要するに、chownでデプロイ用ユーザに所有権を移したら動いた。

そしてデプロイ。
サーバ上のホームページルートにデプロイ先のシンボリックリンクを貼ってみたが、動かなかった。
403 Forbidden が出るのだ。

しかしこれも調べたら非常に単純で、権限問題だった。

Nginxがデプロイ先のディレクトリにアクセスできていなかっただけだった。

参考:

lv4.hateblo.jp

書いてみるとあっけないが、これをすべて解決するのに丸3日かかった。

完全に調査力不足だったと思う。

今後

ガワはひとまず動くものが作れたので、今後やるべきは以下のこと。

  • DB設計
    • 自分の曲や曲の詳細、曲につけるタグ、更新情報、DiscographyなどをDBでしっかり管理できるようにしなければ
  • API作成
    • PhoenixかNode,js、もしくはDeno…？
    • Microserviceにも挑戦してみたいが、サーバ代が…
  • 管理画面作成
    • このままだと1曲追加するのにわざわざコードいじらなきゃいけないので、DBだけ変更できるように自分用管理画面を作らないとこの先が辛い
  • Reactのテスト
    • そもそもフロントエンドに関しての知識が壊滅的に足りないので、フロントエンドでは何がテストできていれば安心できるのかをちゃんと知る必要がある
  • Reduxの導入
    • State周りが結構つらいのを、どうやらある程度解決できるらしい…？流行ってるし使って見る価値アリだと思う
  • monitoring
    • 一応現状Mackerelを使っているが、せっかくならPrometheus + Grafana もやってみたい
  • デザインの見直し
    • 圧倒的にデザインできないので、かっこいいUIにしたい、でもこれは後回し

雑な感想

まずは形になるものができてよかった。

だが、圧倒的に勉強不足が目立った。

わからないけど動いてる、みたいなのがあまりに多すぎるので、継続的に開発を続ける中で解決していきたい。