サービスURL

• https://cap-baseball.com

イベント登録フォーム設置

DBに下書き状態でイベント情報を登録するフォームです。
bot対策にrecaptchaを採用しました。

reactJSでgoogle recaptchaを使う

• react-google-recaptcha

site keyを取得する

コンポーネントを設置する

<ReCAPTCHA
    sitekey="Your client site key"
    onChange={onChange}
  />

レスポンシブ対応

【アップデート】レスポンシブ対応完了しました。 pic.twitter.com/6qDO6blIwG

— キャップ野球情報局/サイトリニューアル (@cap_bb_info) January 9, 2020

PC画面での表示を2カラムにしました。

新年2本目のボード投稿になります。
(新年の実績としては1本目)

キャップ野球情報局

https://cap-baseball.com/

成績管理システムとの連携

今回の改修の目玉は、成績管理システム「みんなのSCORE」との連携です。
成績管理システムのデータベースを利用しているのでいわば兄弟サイトです。

試合結果の表示

• リーグ戦
• 練習試合
• 大会(大福大会、佐倉大会など)

の結果をトップページで閲覧できるようになりました。
右下のページング部分から10件ずつ遡ることが可能です。

試合結果詳細

試合結果とともに関連するツイートの表示と
(あれば)試合動画の表示を行います。

チームページ

例：一橋大のページ
通算成績と直近の試合結果が表示されます。

使っている技術

• ReactJS
• Netlify
• NodeJS
• MySQL
• Docker
• nginx

今後の課題

• 一回見ると飽きてしまう(リピーターがいない)
• ブログ記事などの集約・紹介
• コンテンツなどの充実
• 個別記事とチームの紐づけ

経緯

これまで、フロントはnetlify、バックエンドは自宅サーバーという構成でサービス提供していたのですが、某アップデートの際にOSの再起動でdockerが止まって度々サービス断が発生してしまうのが段々いやになってきたのと、インフラの基礎ができてきたのでconoha VPSでインスタンス作ってサーバ移行しました。

サーバ構築

conoha VPSでubuntuインスタンスを作る

初期設定をする

• ConoHa VPS (ubuntu 16.04) 初期設定メモ
• SSH公開鍵認証で接続するまで

DNSの設定をする

• conoha VPS+ムームードメインの特殊な設定方法

SSL証明書を発行する

またしてもLet's encryptに苦しめられました。今回はdocker-composeの中のnginxコンテナに適用するつもりでした。調べたところ、証明書生成用のコンテナは別途あったのですが、わざわざdocker-composeの構成書き直すのも...と思ったので、
nginxだけdockerコンテナを使わない構成に変更しました。

• UbuntuにNginxをインストールする