いつかリハビリするために

学んだ技術を忘れてしまった時に思い出すためのメモです

Adobe XDからのコーディング

Adobe XDで作ったデザインからhtmlとcssを自動生成できるAnimaというプラグインがある。

www.animaapp.com

 

 

コーディングの手間を省けることで人気のプラグインだが、実際に使ったらXDのデザインを再現できなかった。

  • タブバーの下線がない
  • ロゴが表示されない
  • 中央揃えの要素が左右にズレる
  • ブロック間に設定したマージンが消えている

 

ただhtmlのベースは参考にできるので、これを元にcssを書き直せば使えそうだと感じた。生成されたコードをそのまま使えるわけではないが、時間の短縮にはなりそうだ。

GCPでのファイアウォールルールの設定方法を誤解していた

TwitterAPIを使ったサービスをGoogle Compute Engineにデプロイしているが、データベースに接続するページを開くと500 Internal Server Errorになってしまう。

journalctl -eでエラーメッセージを見ると

psql: could not connect to server: Connection timed out
Is the server running on host "servername" and accepting
TCP/IP connections on port 5432?

とあった。

このエラーメッセージでグーグル検索すると このエラーが出たら、そもそもポート5432が空いているかtelnetを使って確認するべきとの情報を得た。

それなので telnet ホスト名 5432 で接続してみたら Operation timed out となった。
ネットワークで疎通できないときの、原因の切り分け方:プログラマー社長のブログ:オルタナティブ・ブログ
によれば
これはファイアウォールでパケットが遮断されているために SYNパケットを繰り返し送っても、なんの応答も得られていないという状態である可能性が高いとのこと。 この情報を得たのでファイアウォールルールをもう一度確認しようと思った。

GCPファイアウォールルールを見ると、どのインスタンスにも付与されていないタグをターゲットに指定していた。 これを実際に使っているインスタンスに付けたタグに変更したらtelnetで疎通できた。 もう一度データベース接続をするページを開くと無事データが取得され表示されていた。

ファイアウォールルールを存在しないインスタンスに設定するという普通はしないミスをしたために、ネットで検索しても役立つ情報に辿り着くのに苦労してしまったが、無事解決できてよかった。