Server Load Balancer:CLB と WebSocket を使用したリアルタイムメッセージング

ECS03 への Redis のデプロイ

1. ECS03 インスタンスにログインします。

2. 以下のコマンドをコピーして実行し、Redis をインストールおよび設定します。

   # EPEL (Extra Packages for Enterprise Linux) をインストール
   sudo yum install epel-release -y
   # Redis をインストール
   sudo yum install redis -y
   # Redis サービスを開始し、有効化
   sudo systemctl start redis
   sudo systemctl enable redis
   # Redis 設定ファイルを編集してリモート接続を許可
   sudo sed -i 's/^bind 127.0.0.1$/bind 0.0.0.0/' /etc/redis.conf
   sudo sed -i 's/^protected-mode yes/protected-mode no/' /etc/redis.conf
   # 変更を有効にするために Redis サービスを再起動
   sudo systemctl restart redis
   # Redis のステータスを確認
   sudo systemctl status redis
   

3. コマンドがエラーなく実行され、出力に Redis サービスが active (running) 状態であることが示された場合、デプロイと設定は成功です。

   ● redis.service - Redis persistent key-value database
      Loaded: loaded (/usr/lib/systemd/system/redis.service; enabled; vendor preset: disabled)
      Active: active (running) since ...
    Main PID: 12345 (redis-server)
      CGroup: /system.slice/redis.service
              └─12345 /usr/bin/redis-server 0.0.0.0:6379
   

ECS01 への WebSocket のデプロイ

1. ECS01 インスタンスにログインします。

2. sudo pip3 install flask flask-socketio flask-cors redis を実行して、依存関係をインストールします。

3. vi ECS01_ws.py を実行し、i キーを押して編集モードに入ります。

4. 以下のコードをコピーして貼り付けます：

   テストサービスのサンプルコード

   説明

   13 行目の redis_url の IP アドレスを、ご利用の Redis サーバー (ECS03) の IP アドレスに置き換えてください。

   import os
   import redis
   from flask import Flask, render_template, request
   from flask_cors import CORS
   from flask_socketio import SocketIO, emit, disconnect
   app = Flask(__name__)
   app.config['SECRET_KEY'] = 'secret!'
   # クロスオリジンリソース共有 (CORS) を有効化
   CORS(app)
   # Redis をメッセージキューおよび状態ストアとして設定
   redis_url = "redis://192.168.*.*:6379/0"  # ご利用の Redis サーバーの IP アドレスに置き換えてください
   redis_client = redis.StrictRedis.from_url(redis_url)
   # デバッグを容易にするためにログレベルを DEBUG に設定
   socketio = SocketIO(app, message_queue=redis_url, manage_session=True, logger=True, engineio_logger=True, cors_allowed_origins="*")
   SESSION_PREFIX = "session:"
   def set_session_data(session_id, key, value):
       redis_client.hset(f"{SESSION_PREFIX}{session_id}", key, value)
   def get_session_data(session_id, key):
       return redis_client.hget(f"{SESSION_PREFIX}{session_id}", key)
   def delete_session_data(session_id):
       redis_client.delete(f"{SESSION_PREFIX}{session_id}")
   @app.route('/')
   def index():
       return render_template('index.html')
   @socketio.on('connect')
   def handle_connect():
       try:
           session_id = request.sid  # クライアントのセッション ID を取得
           print(f"Session {session_id} connected.")
           welcome_message = "チャットルームに入室しました！"
           emit('message', welcome_message)
           set_session_data(session_id, "username", '')  # ユーザー名を空で初期化
       except Exception as e:
           print(f"Error during connection: {str(e)}")
   @socketio.on('disconnect')
   def handle_disconnect():
       try:
           session_id = request.sid
           username = get_session_data(session_id, "username")
           if username:
               username = username.decode()
               leave_message = f"{username} がチャットルームから退出しました。"
               emit('message', leave_message, broadcast=True)
               print(leave_message)
           delete_session_data(session_id)
           print(f"Session {session_id} disconnected.")
       except Exception as e:
           print(f"Error during disconnection: {str(e)}")
   @socketio.on('set_username')
   def handle_set_username(username):
       session_id = request.sid
       set_session_data(session_id, "username", username)
       print(f"Username for client {session_id} set to {username}")
       emit('message', f"ユーザー名が {username} に設定されました。")
   @socketio.on('message')
   def handle_message(msg):
       session_id = request.sid
       username = get_session_data(session_id, "username")
       if username:
           username = username.decode()
           formatted_message = f"{username}: {msg}"
           emit('message', formatted_message, broadcast=True)
           print(formatted_message)
       else:
           warning_message = "メッセージの送信に失敗しました：最初にユーザー名を設定してください。"
           emit('message', warning_message)
           print(warning_message)
   if __name__ == '__main__':
       # templates ディレクトリが存在することを確認
       if not os.path.exists('templates'):
           os.makedirs('templates')
       # Flask テンプレート (index.html) を使用
       html_code = '''<!DOCTYPE html>
   <html lang="ja">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>チャットルーム</title>
       <style>
           body {
               font-family: Arial, sans-serif;
               display: flex;
               flex-direction: column;
               align-items: center;
               margin: 0;
               padding: 0;
               background-color: #f0f0f0;
           }
           h1 {
               color: #333;
           }
           .chat-container {
               width: 90%;
               max-width: 600px;
               background: white;
               padding: 20px;
               border-radius: 8px;
               box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
           }
           .user-container, .message-container {
               display: flex;
               margin-bottom: 10px;
           }
           .user-container input, .message-container input {
               flex: 1;
               padding: 10px;
               margin-right: 10px;
               border: 1px solid #ccc;
               border-radius: 4px;
           }
           .message-container {
               margin-top: 10px;
           }
           button {
               padding: 10px;
               background-color: #0056b3;
               color: white;
               border: none;
               border-radius: 4px;
               cursor: pointer;
           }
           button:hover {
               background-color: #004099;
           }
           #messages {
               border: 1px solid #ccc;
               padding: 10px;
               height: 300px;
               overflow-y: scroll;
               margin-bottom: 10px;
               border-radius: 4px;
               background-color: #f9f9f9;
           }
       </style>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>
   <body>
       <h1>オンラインチャットルーム</h1>
       <div class="chat-container">
           <div class="user-container">
               <input type="text" id="username" autocomplete="off" placeholder="ユーザー名を入力">
               <button onclick="setUsername()">ユーザー名を設定</button>
           </div>
           <div id="messages"></div>
           <div class="message-container">
               <input type="text" id="myMessage" autocomplete="off" placeholder="メッセージを入力...">
               <button onclick="sendMessage()">送信</button>
           </div>
       </div>
       <script>
           var socket = io({ transports: ['websocket', 'polling', 'flashsocket'] });
           var usernameSet = false;
           socket.on('connect', function() {
               console.log("サーバーに接続しました！");
               socket.on('message', function(msg){
                   $('#messages').append($('<div>').text(msg));
                   $('#messages').scrollTop($('#messages')[0].scrollHeight);
               });
           });
           function setUsername() {
               var username = $('#username').val();
               if (username) {
                   socket.emit('set_username', username);
                   usernameSet = true;  // ユーザー名が設定されたことをマーク
               } else {
                   alert("ユーザー名は空にできません！");
               }
           }
           function sendMessage() {
               if (usernameSet) {
                   var message = $('#myMessage').val();
                   if (message) {
                       socket.send(message);
                       $('#myMessage').val('');
                   } else {
                       alert("メッセージは空にできません！");
                   }
               } else {
                   alert("最初にユーザー名を設定してください！");
               }
           }
       </script>
   </body>
   </html>
   '''
       # テンプレートをファイルに保存
       with open('templates/index.html', 'w') as file:
           file.write(html_code)
       socketio.run(app, host='0.0.0.0', port=5000)
   

5. Esc キーを押し、:wq と入力して変更を保存します。

6. sudo python3 ECS01_ws.py コマンドを実行してスクリプトを実行します。

7. 以下の出力が表示された場合、WebSocket アプリケーションはポート 5000 で起動しています。

   Server initialized for threading.
    * Serving Flask app 'ECS01_ws' (lazy loading)
    * Environment: production
      WARNING: This is a development server. Do not use it in a production deployment.
      Use a production WSGI server instead.
    * Debug mode: off
    * Running on all addresses.
      WARNING: This is a development server. Do not use it in a production deployment.
    * Running on http://192.168.*.*:5000/ (Press CTRL+C to quit)
   

   アプリケーションの起動に失敗した場合は、ポートがすでに使用されていないか、コマンドやコードのコピーが間違っていないかを確認してください。

● redis.service – Redis persistent key-value database
   Loaded: loaded (/usr/lib/systemd/system/redis.service; enabled; vendor preset: disabled)
  Drop-In: /etc/systemd/redis.service.d
           └─limit.conf
   Active: active (running) since Thu 2xxx xxx xxx xxx CST; 6s ago
  Process: 14715 ExecStop=/usr/libexec/redis-shutdown (code=exited, status=0/SUCCESS)
 Main PID: 14730 (redis-server)
   CGroup: /system.slice/redis.service
           └─14730 /usr/bin/redis-server 0.0.0.0:6379

ECS02 への WebSocket のデプロイ

1. ECS02 インスタンスにログインします。

2. sudo pip3 install flask flask-socketio flask-cors redis を実行して、依存関係をインストールします。

3. vi ECS02_ws.py を実行し、i キーを押して編集モードに入ります。

4. 以下のコードをコピーして貼り付けます：

   テストサービスのサンプルコード

   説明

   13 行目の redis_url の IP アドレスを、ご利用の Redis サーバー (ECS03) の IP アドレスに置き換えてください。

   import os
   import redis
   from flask import Flask, render_template, request
   from flask_cors import CORS
   from flask_socketio import SocketIO, emit, disconnect
   app = Flask(__name__)
   app.config['SECRET_KEY'] = 'secret!'
   # クロスオリジンリソース共有 (CORS) を有効化
   CORS(app)
   # Redis をメッセージキューおよび状態ストアとして設定
   redis_url = "redis://192.168.*.*:6379/0"  # ご利用の Redis サーバーの IP アドレスに置き換えてください
   redis_client = redis.StrictRedis.from_url(redis_url)
   # デバッグを容易にするためにログレベルを DEBUG に設定
   socketio = SocketIO(app, message_queue=redis_url, manage_session=True, logger=True, engineio_logger=True, cors_allowed_origins="*")
   SESSION_PREFIX = "session:"
   def set_session_data(session_id, key, value):
       redis_client.hset(f"{SESSION_PREFIX}{session_id}", key, value)
   def get_session_data(session_id, key):
       return redis_client.hget(f"{SESSION_PREFIX}{session_id}", key)
   def delete_session_data(session_id):
       redis_client.delete(f"{SESSION_PREFIX}{session_id}")
   @app.route('/')
   def index():
       return render_template('index.html')
   @socketio.on('connect')
   def handle_connect():
       try:
           session_id = request.sid  # クライアントのセッション ID を取得
           print(f"Session {session_id} connected.")
           welcome_message = "チャットルームに入室しました！"
           emit('message', welcome_message)
           set_session_data(session_id, "username", '')  # ユーザー名を空で初期化
       except Exception as e:
           print(f"Error during connection: {str(e)}")
   @socketio.on('disconnect')
   def handle_disconnect():
       try:
           session_id = request.sid
           username = get_session_data(session_id, "username")
           if username:
               username = username.decode()
               leave_message = f"{username} がチャットルームから退出しました。"
               emit('message', leave_message, broadcast=True)
               print(leave_message)
           delete_session_data(session_id)
           print(f"Session {session_id} disconnected.")
       except Exception as e:
           print(f"Error during disconnection: {str(e)}")
   @socketio.on('set_username')
   def handle_set_username(username):
       session_id = request.sid
       set_session_data(session_id, "username", username)
       print(f"Username for client {session_id} set to {username}")
       emit('message', f"ユーザー名が {username} に設定されました。")
   @socketio.on('message')
   def handle_message(msg):
       session_id = request.sid
       username = get_session_data(session_id, "username")
       if username:
           username = username.decode()
           formatted_message = f"{username}: {msg}"
           emit('message', formatted_message, broadcast=True)
           print(formatted_message)
       else:
           warning_message = "メッセージの送信に失敗しました：最初にユーザー名を設定してください。"
           emit('message', warning_message)
           print(warning_message)
   if __name__ == '__main__':
       # templates ディレクトリが存在することを確認
       if not os.path.exists('templates'):
           os.makedirs('templates')
       # Flask テンプレート (index.html) を使用
       html_code = '''<!DOCTYPE html>
   <html lang="ja">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>チャットルーム</title>
       <style>
           body {
               font-family: Arial, sans-serif;
               display: flex;
               flex-direction: column;
               align-items: center;
               margin: 0;
               padding: 0;
               background-color: #f0f0f0;
           }
           h1 {
               color: #333;
           }
           .chat-container {
               width: 90%;
               max-width: 600px;
               background: white;
               padding: 20px;
               border-radius: 8px;
               box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
           }
           .user-container, .message-container {
               display: flex;
               margin-bottom: 10px;
           }
           .user-container input, .message-container input {
               flex: 1;
               padding: 10px;
               margin-right: 10px;
               border: 1px solid #ccc;
               border-radius: 4px;
           }
           .message-container {
               margin-top: 10px;
           }
           button {
               padding: 10px;
               background-color: #0056b3;
               color: white;
               border: none;
               border-radius: 4px;
               cursor: pointer;
           }
           button:hover {
               background-color: #004099;
           }
           #messages {
               border: 1px solid #ccc;
               padding: 10px;
               height: 300px;
               overflow-y: scroll;
               margin-bottom: 10px;
               border-radius: 4px;
               background-color: #f9f9f9;
           }
       </style>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>
   <body>
       <h1>オンラインチャットルーム</h1>
       <div class="chat-container">
           <div class="user-container">
               <input type="text" id="username" autocomplete="off" placeholder="ユーザー名を入力">
               <button onclick="setUsername()">ユーザー名を設定</button>
           </div>
           <div id="messages"></div>
           <div class="message-container">
               <input type="text" id="myMessage" autocomplete="off" placeholder="メッセージを入力...">
               <button onclick="sendMessage()">送信</button>
           </div>
       </div>
       <script>
           var socket = io({ transports: ['websocket', 'polling', 'flashsocket'] });
           var usernameSet = false;
           socket.on('connect', function() {
               console.log("サーバーに接続しました！");
               socket.on('message', function(msg){
                   $('#messages').append($('<div>').text(msg));
                   $('#messages').scrollTop($('#messages')[0].scrollHeight);
               });
           });
           function setUsername() {
               var username = $('#username').val();
               if (username) {
                   socket.emit('set_username', username);
                   usernameSet = true;  // ユーザー名が設定されたことをマーク
               } else {
                   alert("ユーザー名は空にできません！");
               }
           }
           function sendMessage() {
               if (usernameSet) {
                   var message = $('#myMessage').val();
                   if (message) {
                       socket.send(message);
                       $('#myMessage').val('');
                   } else {
                       alert("メッセージは空にできません！");
                   }
               } else {
                   alert("最初にユーザー名を設定してください！");
               }
           }
       </script>
   </body>
   </html>
   '''
       # テンプレートをファイルに保存
       with open('templates/index.html', 'w') as file:
           file.write(html_code)
       socketio.run(app, host='0.0.0.0', port=5000)
                     

5. Esc キーを押し、:wq と入力して変更を保存します。

6. sudo python3 ECS02_ws.py コマンドを実行してスクリプトを実行します。

7. 以下の出力が表示された場合、WebSocket アプリケーションはポート 5000 で起動しています。

   Server initialized for threading.
    * Serving Flask app 'ECS02_ws' (lazy loading)
    * Environment: production
      WARNING: This is a development server. Do not use it in a production deployment.
      Use a production WSGI server instead.
    * Debug mode: off
    * Running on all addresses.
      WARNING: This is a development server. Do not use it in a production deployment.
    * Running on http://192.168.*.*:5000/ (Press CTRL+C to quit)
   

   アプリケーションの起動に失敗した場合は、ポートがすでに使用されていないか、コマンドやコードのコピーが間違っていないかを確認してください。

1. 左側のナビゲーションウィンドウで、CLB > インスタンス を選択します。

2. インスタンス ページで、ターゲットインスタンスを選択し、その IP をコピーします。

3. 以下の手順で A レコードを追加します：

   1. Alibaba Cloud DNS コンソールにログインします。

   2. インターネットの権威ある DNS 解決 ページで、ターゲットドメイン名を見つけ、Actions 列の 解決設定 をクリックします。

   3. 解決設定 ページで、Add Record をクリックします。

   4. Add Record パネルで、以下のパラメーターを設定します。他のパラメーターはデフォルト値のままにするか、必要に応じて変更できます。その後、OK をクリックします。

      パラメーター	説明
      Record Type	ドロップダウンリストから [A] を選択します。
      Hostname	ドメイン名のプレフィックスです。 説明 ルートドメインの場合、ホスト名を @ に設定します。
      Record Value	コピーした CLB インスタンスの IP アドレスを入力します。