2019-10-06に投稿

10/6進捗

概要

  • 動画スライドコンポーネントの実装
  • 蓋ざんまいサイトとの連携
  • 独自ドメイン取りました
     - トラブルシューティング
  • 日別試合結果累計バグ対処
    • 原因

動画スライドコンポーネント

主にキャップ野球用の対応ですが、皆さんyoutubeとかtwitterにばらばらに動画を上げているので、蓋ざんまい非公式サイトではその集約の役割も果たしていました。

ただ、蓋ざんまいサイトでは
- 縦列に配置してコンテンツが長くなってしまう

という欠点があり、試合結果を一律JCBL-SCORE側で表示する対応をするため、どんなUIがいいか考えた結果、カルーセルみたいに横にスライドするのがよいという考えに。

使ったコンポーネント

  • react-slideshow
    • 今回新たに採用したコンポーネント
  • react-youtube
    • JCBL-SCOREで既に採用
  • react-twitter-embed
    • 蓋ざんまいサイトで既に採用

実装結果

蓋ざんまいサイトとの連携

蓋ざんまいで独自に実装していた試合結果ページを廃止(アクセスはできますがリンクは張っていません)して、一律JCBL-SCORE側で試合結果を表示するようにしました。

独自ドメイン取りました

  • 旧ドメイン(netlify)
    • https://jcblscore-react.netlify.com/league/cap_baseball
  • 新ドメイン
    • https://jcbl-score.com/league/cap_baseball

だいぶ短縮できました。
設定自体は大して難しくなく、ちょっと古いですが以下のサイトなどを参考に進めました。

手順としては、
1. ネームサーバの設定をnetlifyのものにする
2. DNSが浸透するまで待つ
3. Let's encryptでSSL証明書を発行する(netlifyがやってくれる)

トラブルシューティング

3でちょっとはまりました。
ERR_CERT_COMMON_NAME_INVALID(プライバシーエラー)が出てしまうのです。
作られた証明書を見ると、subjectが「*.netlify.com」になっています。証明する対象が間違っているわけです。
よくよく考えると、新しいドメインにリダイレクトしていないままLet's encryptの処理をしていたので、redirects

[https://jcblscore-react.netlify.com/*](https://jcblscore-react.netlify.com/*) https://jcbl-score.com/:splat 301!

1行追記します。これで証明書を発行し直すとプライバシーエラーが解消されました。

日別試合結果累計バグ

原因

APIコンテナとDBコンテナのタイムゾーンがGMTで、DBに入っている値がJSTだったので、日付で比較しようとすると、SQLで>や
composeファイルで書くと有効な対応策がないので、SQLに渡す際に日付オブジェクトにするのをやめました。


ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

所有者限定モードのためこのボードには投稿できません
コメント