こんにちは、shuji4649です。
記念すべきTutonのアドベントカレンダーの1日目です！

この記事では、RoboCupJunior RescueのCMSをRenderに構築してみようと思います。
難しいことはなるべく省いて説明していきたいと思うのでRCJ Rescueの人はぜひやってみてください。
手元にCMSがあると色んな事ができて便利です。

CMSって？

RoboCupJuniorのRescueリーグで使用されている運営システムです。
たぶんCompetition Management System。Webのコンテンツ・マネジメント・システムとは別物だと思います。
コースマップの作成やスコア計算、大会管理などができます。

こちらのGitHubリポジトリで公開されていて、誰でもデプロイすることができます。

Renderって？

Webアプリケーションを簡単に公開できるサービスです。
個人のプロジェクトを公開したいときにとても便利です。
Renderだけだと色々違う情報が出てくるのでRender.comで調べるといいです。

全体像

以下のものを使用します。

GitHub
- ソースコードを置きます
- このリポジトリをforkしてきて使います
MongoDB Atlas
- 各種データを保存します
- Renderの中でMongoDBを立てるのは難しいので外部サービスを使います
Render
- プロジェクトをデプロイします

構築しよう！

MongoDB Atlasの準備

RCJのCMSでは、ユーザー情報や大会記録などのデータをMongoDBというデータベースで管理しています。
ここでは、MongoDB Atlasというクラウドサービスにデータベースを用意します。

まず、こちらのサイトにアクセスしてユーザー登録&サインインしてください。

このプロジェクトページにアクセスできたら、右上のNew Projectボタンを押して新規プロジェクトを作成します。

プロジェクト名を入力して進みます。

Add Membersは飛ばします。複数人で管理したければ適宜設定してください。

するとプロジェクトが作成されこのようなページに飛びます。
次はClusterを作成します。+ Createボタンを押してください。

Freeプランを選択します。

Nameに適当に入力し、ProviderはAWS、RegionはTokyo(ap-northeast-1)を選択します。（他の物でも大丈夫だとは思います。）

入力したらCreate Deploymentを押してください。

するとこのような画面に移ります。

データベースにアクセスするためのユーザーを作成します。
必要があればUsername等を変更し、Create Database Userを押してユーザーを作成します。
作成したらChoose a connection methodを押して次に進みます。

以下のような画面に移ります。Connect to your applicationのDriversを選択してください。

するとこの画面に遷移します。
DriverはNode.jsでOKです。
3.Add your connection string into your application codeというところにデータベースと接続するためのURIが発行されています。これをコピーしておいてください。

クラスターが作成できたので、データベースを作成します。
こちらのAdd dataを押してください。

Create Database on Atlasを選択します。

Database nameとCollection nameを入力します。
Collection nameは初めに作成するテーブルみたいなものです。データベース作成時に最低1つのCollectionを作っておかないといけないらしいです。適当にusersなどと入力しておきます。
入力できたらCreate Databaseを押してデータベースを作成します。

先ほど控えておいた接続文字列に以下のように内容を付け加えて控えておいてください。
あとでアプリケーションの環境変数として設定します。

- mongodb+srv://xxxxxx:xxxxxx@xxxxxx.xxxxxx.mongodb.net/?appName=xxxxxxxxx
+ mongodb+srv://xxxxxx:xxxxxx@xxxxxx.xxxxxx.mongodb.net/?appName=xxxxxxxxx/{Database name}?retryWrites=true&w=majority&tls=true

最後に、Renderからアクセスするための設定を行います。
作成したプロジェクトを開き、左側のナビゲーションバーからSecurity Quickstartを開いてください。
下の方に、Where would you like to connect from?というセクションがあります。
はじめはプロジェクトを作成したPCのアドレスがリストに入っていますが、今回はRenderで構築するのでこれとは違うIPアドレスからアクセスします。
世界中どこからでもアクセスできるように0.0.0.0/0を追加してください。

これでMongoDBの準備は完了です！

RenderでRedisの準備

RCJ CMSはRedisというデータベースも使用します。
こちらはRender上で準備します。

まず、Renderのアカウントを作りサインインしてください。

右上の+Newから、

Key Valueを選びます

このようなページが開きます。
Nameは適当に入れてください。

Instance TypeはFreeを選びます。
再起動したときにデータが消えるようですが、今回の用途ではそこまで大きな問題ではないように思うので多分大丈夫です。
Deploy Key Value Instanceで作成してください。

作成すると、Infoページからこのような接続情報を得ることができます。
Internal Key Value URLを控えておいてください。後で環境変数に設定します。

リポジトリ連携＆デプロイ！！

それでは、いよいよRCJ-CMSのプロジェクトをRenderでデプロイしていきたいと思います！！

まず、こちらのrcj-rescue-cmsのリポジトリを自分のアカウント（かOrganization）にforkしてきます。

forkとは？

他のユーザーやOrganizationのリポジトリを、自分のリポジトリとしてコピーすることです。

今回はtuton-RCJのOrganizationにforkします。

MongoDB Atlasを使う都合上、コードを一か所編集する必要があります。

forkしてきたリポジトリで、mongo_express_config.jsの9行目のssl:falseをssl:trueに変更してコミットしておいてください。

それでは、このリポジトリをRenderに持ってきます。

Renderの+NewからWeb Serviceを選びます。

このようなページが開きます。
RenderではGitHubと簡単に連携させることができます。
GitHubボタンを押し、指示に従って自分のアカウントやOrganizationと連携させてください。

するとこのようにリポジトリを選択できるようになります。
先ほどforkしたリポジトリを選択してください。

service type(Web Service)、Language(Docker)、Branch(master),Region(Singapore)はデフォルトのままでよいと思います。もし必要であれば変更してください。

Instance TypeはFreeを選びます。

一番下にEnvironment Variables（環境変数）というセクションがあります。
ここで、以下の内容を環境変数として追加してください。

NAME_OF_VARIABLE	value
DB_CONNECT_STR	MongoDBの接続文字列 `mongodb+srv://xxx:xxx@xxx.n1uaeya.mongodb.net/xxx?retryWrites=true&w=majority&tls=true`
REDIS_HOST	Internal Key Value URLから先頭の`redis://`と末尾の`:{ポート番号}`を除いたもの `red-xxxxxxxxxxxxxxxx`
REDIS_PORT	Internal Key Value URLの末尾のポート番号。たぶん`6379`

入力できたらDeploy Web Serviceを押してデプロイします！！！
少し時間がかかりますが、デプロイがうまくいくとこのようにLiveと表示され、表示されているリンクからアクセスするとCMSが開きます！！！

最初は以下のパスワードで入れます。

Username	Password
admin	adminpass

さあ、あなたはもう大会運営者です。好きに遊び倒してください。

ユーザー管理画面でユーザーの追加ができます。新しく管理者ユーザーを作ったらadminのアカウントは削除しておくとよいでしょう。

さいごに

それでは、ロボカッパーのみなさん、よいCMSライフを！

何か間違っているところや分からない所があればDMかコメントで教えてください。