カントリーモーニング(仮)

しがないサラリーマンが不定期に更新する雑記帳。
<< 【YouTube】AutoUTube が また 動かなくなっていた。 | main | 【YouTube】IFrame Player API を使うか。 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - | pookmark |
【Amazon】AWS EC2 上で、node.js を使ってスピードオセロを作ってみた。


今回は、AWS EC2 上で、node.js を使ってみたお話です。

node.js を使うことで、サーバ側の処理も、javascriptを使って書けるとのこと、
お勉強のために、スピードオセロゲームを作ってみました。

題して「みんなでリバーシブル」。
スマホやPCなど、各自で持っているそれぞれのデバイスから、
共有のURLにブラウザ経由でアクセスし、
好き勝手に白や黒を置くことしかできませんができます。
相手の番の時に自分も置けてしまうるのでスピードが勝負です。
あと、3人以上の複数人でも楽しめてしまいます。

【ブラウザからのアクセスの様子】


【スマホからのアクセスの様子】


■ やったこと
1. AWSアカウント作成
アカウント作成後、12ヶ月無料で使える利用枠があるので、それを利用しました。
https://aws.amazon.com/jp/free/

2. EC2インスタンス作成
アカウント作成後、AWSホーム画面から、EC2 を選択し、
「インスタンス」メニューから、EC2インスタンスを作成します。
https://console.aws.amazon.com/console/home

3. TeraTermのインストール、設定を行い、接続、ファイルアップが出来るようにする
# 以下のページ(*1)を参考にさせていただきました。
-----------
ユーザー名 : ec2-user
接続先ホスト名 : ec2-xx-xxx-xxx-xx.compute-1.amazonaws.com
秘密鍵 : ec2-2015xxxx-1.pem
-----------
みたいな感じ。xxのところは、作成したインスタンスの情報を入れる。
(*1)Amazon EC2編〜EC2インスタンスにTera Termで接続するには?〜
http://recipe.kc-cloud.jp/archives/27

4. TeraTerm経由で接続し、node.js をインストールする
# 以下のページ(*2)を参考にさせていただきました。
(*2)Amazon EC2でnode.js,Expressアプリケーションを立ち上げる
http://qiita.com/Sugima/items/670924901e38cf9eb84a

5. TeraTerm経由で「othelo」フォルダを作成し、その下に、socket.io をインストールする
[ec2-user@ip-xx-xx-xx-xx ~]$ mkdir othelo
[ec2-user@ip-xx-xx-xx-xx ~]$ cd othelo
[ec2-user@ip-xx-xx-xx-xx ~]$ npm install socket.io

6. TeraTerm の SSH SCP機能を使って、「othelo」フォルダにファイル(app.js, index.html)をアップロードします。
# 以下のページ(*3)を参考にさせていただきました。
(*3)TeraTermのSCP機能で送信・受信共に「To:」欄のデフォルト値が変更可能です
http://www.j-oosk.com/teraterm/file-transfer/1213/

7. TeraTerm経由で、app.jsを実行
[ec2-user@ip-xx-xx-xx-xx ~]$ node app.js

8. ブラウザ経由で、以下にアクセスする。
http://ec2-xx-xx-xx-xx.compute-1.amazonaws.com:3000/



app.js(サーバ側処理), index.html(クライアント側処理) のソースコードです。

■ app.js(サーバ側処理)


■ index.html(クライアント側処理)



PS. 今回初めて、ソースコード表示の見た目を変えてみました(便利!)。
# 以下のページ(*4)を参考にさせていただきました。
(*4)GitHubのGistを使う
http://raptor36.hateblo.jp/entry/2015/04/11/202438

| Amazon | 11:21 | comments(0) | trackbacks(0) | pookmark |
スポンサーサイト
| - | 11:21 | - | - | pookmark |
デザイングッズストア。
CALENDAR
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>
SPONSORED LINKS
AMAZON RECOMMEND
ハァハァCD
ハァハァCD (JUGEMレビュー »)
オムニバス,白雪みるく,河原木志穂,くーたん,森永まみ,たぬまゆみ
SELECTED ENTRIES
CATEGORIES
ARCHIVES
RECENT COMMENT
デザイングッズストア。
心頭MakeUp Tシャツ。
2009_09_18_11_39_28
コメント
コメントする









この記事のトラックバックURL
http://norinoriafter.jugem.jp/trackback/50
トラックバック
ブロカン
サンプル・モニターの口コミ広告ならブロカン
おしゃれショップ「かさぶた人生」
MOBILE
qrcode
LINKS
PROFILE