Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ジーズアカデミーAdvent Calendar 2016Day 5
@n0bisuke(Sugawara Nobisuke)

BluemixにNode.js+Express+Socket.ioで作ったチャットをホスティングするチュートリアル

Last updated at Posted at 2016-12-06

ジーズアカデミーアドベントカレンダーということで学生さんも試せるチュートリアルを書いたつもりです。

あと https://teratail.com/Bluemix にも登録してます

最近AzureにLINE Botを乗せて運用しようかと思ってたんですけど、思うようにいかずAzure側、LINE側どちらで詰まっているのか検証したいというのもありBluemixにLINE Botを乗せてみよう...って思ってたんですけど、ちょっとハマった(別の機会に書きます)ためチャットデモのホスティングにしたいと思います苦笑

完成品はこちらです。 チャットしましょう。

https://n0bisuke-bot-test.mybluemix.net/

サブドメイン名がn0bisuke-bot-testになってるのがやろうとした爪痕ですね苦笑

環境

  • macOS Sierra
  • Node.js 7.2.0

アプリを作る

まずはBluemixに登録してアプリケーションを作ります。

  • SDK for Node.jsを選択

  • アプリケーション名をつける

  • アプリが立ち上がるのを待つ

アプリの表示で確認するとページが出来上がってるのが確認できます。

ここまで5分くらい

めちゃ簡単。

ただし、一番最初のBluemixに登録するフローがひたすらめんどくさいのでなんとかならないかなぁ(ﾁﾗﾁﾗ

サンプルWebアプリをデプロイする準備

BluemixでアプリケーションをデプロイするのにはHerokuコマンドみたいなツールが必要になります。
BluemixコマンドとCFコマンドの二つを使えるようにしましょう。

Bluemix CLIをローカルマシンにインストール

http://clis.ng.bluemix.net/ui/home.html

自分の環境に合わせてダウンロードしてPCにインストールします。僕はmacOS Sierraですが問題なく使えました。

インストールが完了したらターミナルでbluemixコマンドを叩きます。

これでbluemixコマンドが使えるようになりました。

CFをローカルマシンにインストール

https://github.com/cloudfoundry/cli/releases

bluemixコマンド同様です。環境に合わせてDL&インストールしましょう。

これでcfコマンドが使えるようになります。

スターターコードの内容確認

スターター・コードをダウンロードし、パッケージを新規ディレクトリーに解凍して開発環境をセットアップします。の箇所からzipファイルをダウンロードしましょう。zipファイルを解凍すると以下のようなファイル構成が確認できます。

試しにpublic/index.htmlを編集して、hello worldの部分を好きな文字に変更します。今回はこんにちは世界！にしました。

まずはローカル環境で動作確認をしてみます。

npm i
node app

http://localhost:6001 にブラウザからアクセスします。

とりあえず手元での動作は確認できました。

サンプルWebアプリをデプロイしてみる

Bluemixに接続する

bluemix api https://api.ng.bluemix.net

と

cf login -u メールアドレス -o 組織名 -s スペース名

の二つのコマンドでターミナルのCLIツールをBluemixに接続します。

$ bluemix api https://api.ng.bluemix.net

'cf api https://api.ng.bluemix.net' を起動しています...

API エンドポイントを https://api.ng.bluemix.net に設定しています...
OK


API エンドポイント:   https://api.ng.bluemix.net (API バージョン: 2.54.0)
ログインしていません。 'bluemix login' を使用してログインしてください。

$ bluemix login -u xxxxxx@xxxxx -o "dotstudio" -s "akihabara"
'cf login -u sugawara@ryousuke.org -o dotstudio -s akihabara' を起動しています...

API エンドポイント: https://api.ng.bluemix.net

Password> (ここにBluemixアカウントのパスワードを入力)
認証中です...
OK

組織 dotstudio をターゲットにしました

スペース akihabara をターゲットにしました

API エンドポイント:   https://api.ng.bluemix.net (API バージョン: 2.54.0)
ユーザー:             xxxxxxxx@xxxxxxxx
組織:                 dotstudio
スペース:             akihabara

これで手元の環境がBluemixに接続されます。

Bluemixにデプロイ

cf push アプリ名

でデプロイできます。

cf push "n0bisuke-bot-test"

アプリ名.mybluemix.netなどにアクセスして先ほどのこんにちは世界！の表示になってるか確認しましょう。

チャットアプリケーションをデプロイしてみる

さて、あとは前回作った「Node.js+Express+socket.ioでリアルタイムチャットを作ってWeb Appsに無料ホスティングする（yarnも試してみた）」のソースコードを元に作ります。

https://github.com/n0bisuke/express-socke.io-webapps

  • public/index.htmlを以下に書き換え

フロント側コードです。

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.js"   integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA="   crossorigin="anonymous"></script>
    <script>
        const socket = io();
        $('form').submit(() => {
            socket.emit('chat message', $('#m').val());
            $('#m').val('');
            return false;
        });
        socket.on('chat message', (msg) => {
            $('#messages').append($('<li>').text(msg));
        });
    </script>

  </body>
</html>
  • app.jsを以下に書き換え
'use strict';

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const cfenv = require('cfenv');
const appEnv = cfenv.getAppEnv();
const PORT = appEnv.port;

app.get(`/`, (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

http.listen(PORT, () => {
  console.log(`listening on *:${PORT}`);
});

ちなみに、このappEnv.portの部分がBluemixでの起動ポートの指定方法みたいです。

const cfenv = require('cfenv');
const appEnv = cfenv.getAppEnv();
const PORT = appEnv.port;
  • socket.ioをインストール
npm i --save socket.io
  • 最後にデプロイ
cf push "n0bisuke-bot-test"

こんな感じの画面でチャットができるようになってれば完成です。

おわりに

Bluemixは最初の登録が面倒ですが、そのあとは割と簡単にデプロイまでいけた感触です。

あと、管理画面のサイドバーのログタブからリアルタイムにログが見れるのが割と便利(Azure WebAppsだとNode.jsのconsole.logがデフォルトでうまく表示されないんですよね。)

ジーズアカデミーの学生さんもぜひ試してみてください！

11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?