README_ja.md

Cindy-Realtime

ラテシン(製作者：上杉さん)の後継として始まったプロジェクトです。

Cindy(シンディ)は水平思考ゲームをプレイするためのWebサイトです。バックエンドにPythonのWebフレームワークであるDjango、フロントエンドにNode.jsを用いています。 その他の技術的特徴として、WebAPIにGraphQL、リアルタイム更新にWebSocketを用いています。

Webサイト はこちら Cindyの遊び方については非公式 Wiki をご参照ください。

Cindyという名前はCindy Is Not Dead Yet(シンディは死んでいない)の頭文字をとって名付けられました。Cindyはラテシンのキャラクターです。

旧Cindyとの違い

Cindy-Realtimeは旧[Cindy][1] からデータを引き継いでいますが、フロントエンドを刷新しました。

Cindy-Realtimeの変更点

• リアルタイム方式を採用(WebSocket)
• ReactによるUIの改良、保守性の向上 😄
• GraphQLとRelayを導入し、RESTライクなAPIより高速な読み込みを実現

逆にできなくなったこともあります。

• 古いブラウザのサポートを終了
• シングルスレッドのPaaSにはデプロイ不可能

これらの大幅な変更のために、旧CindyとCindy-Realtimeは別のリポジトリとして公開しています。 今のところ、どちらのリポジトリもサポート中です

要件

• Python3.5

  pip install -r requirements.txt

• Postgresql (MySQLを使う場合はmysql.cnfを使用)

  # Debian-based systems
  apt-get install postgresql

• Redis DB

  # Debian-based systems
  apt-get install redis-server

• nodejs manager (最新のnpmまたはbower、assets.7zを使いたい場合のみ)

  cd ./react-boilerplate && npm install
  
  # Use npm (bower is somewhat alike)

コミットする

1. リポジトリをクローンする

   git clone https://github.com/heyrict/cindy-realtime

2. 必須アプリケーションをインストールする. pythonとpipをPATHに設定してください。python3やpip3を使うこともできます。

3. PostgreSQLの設定

   • postgresqlを開き、ユーザーとデータベースを作成してすべての権限を許可します。

     CREATE DATABASE cindy;
     CREATE USER cindy WITH PASSWORD 'cindy';
     ALTER ROLE cindy SET client_encoding TO 'utf8';
     ALTER ROLE cindy SET default_transaction_isolation TO 'react committed';
     ALTER ROLE cindy SET timezone TO 'UTC';
     GRANT ALL PRIVILEGES ON DATABASE cindy TO cindy;
     \q;
     

   • ./cindy/security.py ファイルのPOSTGREDB_SETTINGSをご自身の設定に従って編集します。テンプレートはこちら。

   • djangoを使って必要なデータを生成します。

     python3 manage.py makemigrations && python3 manage.py migrate
     python3 manage.py compilemessages
     make schema

4. Node.jsの依存関係を解決してビルドします。

   cd ./react-boilerplate && npm run build:dll && npm run serve

5. localhostでサーバーを起動します。

   daphne cindy.asgi:application

6. ターミナル/コマンドプロンプトに表示されたリンクにアクセスします。

デプロイ

注意: これはnginx, ubuntu16.04LTSを使った場合の例です。別の方法も可能です。 また、設定ファイルをご自身のシステムに合わせて変更することにご注意ください(例えばユーザー名、パスなど)。

1. JavaScriptのアセットを取得する

   1. コミットするの1-3を実行する。Node.jsは必須ではないことに注意
   2. javascriptのアセットを収集

   こちらからassets.7zをダウンロードして展開します。

   wget https://github.com/heyrict/cindy-realtime/releases/download/$CINDY_VERSION/assets.7z
   7zr x assets.7z

   ご自身でビルドする場合

   cd ./react-boilerplate && npm run build
   ../manage.py collectstatic

2. Nginxの設定

   # 管理者権限が必要な場合があることにご注意ください。
   cp ./config/nginx-cindy-config /etc/nginx/sites-available/cindy
   ln -s /etc/nginx/sites-available/cindy /etc/nginx/sites-enabled
   # certbotを使ってSSL認証します
   # HTTPSを有効にしない場合はスキップしてください。
   # (HTTPのみを有効にする場合はnginx-cindy-configを手動で編集してください。)
   certbot --nginx -d cindy.com -d www.cindy.com
   service nginx restart

3. daphneの設定

   cp ./config/daphne.service /etc/systemd/system/
   systemctl enable daphne
   service daphne start

4. (以下は必須ではありません、 nodejsが必要です) step2-3の代わりにprerenderを使ったNginxの設定

   # 管理者権限が必要な場合があることにご注意ください。
   ## nginxの設定
   cp ./config/nginx-cindy-config-nginx-cindy-config-with-prerender /etc/nginx/sites-available/cindy
   ln -s /etc/nginx/sites-available/cindy /etc/nginx/sites-enabled
   service nginx restart
   ## daphneとprerenderの設定
   cp ./config/prerender.service ./config/daphne.service /etc/systemd/system/
   systemctl enable daphne
   systemctl enable prerender
   service daphne start
   service prerender start

プロジェクトの協力者

• kamisugi(上杉)
• kamisan(上参)
• shakkuri(しゃっくり)
• sarubobo(さるぼぼ)
• ernath(エルナト)