marc tech

株式会社MAISON MARCが運営するブログです。Tech Blogとは名ばかりの、採用・福利厚生の情報や、日々の活動記録(?)からエンジニアのくだらない小話までMAISON MARCに関する情報をお伝えするブログとなっています!興味のある方は是非ご覧になってください。

AWSでチャットサービスを公開してみよう! 【EC2 + Express + Socket.io】 後編


f:id:marctech:20171201135938p:plain

ウェイさん

AWSでチャットサービスを公開する、後編です。
前回の記事を読まれていない、アプリケーションを作成していない方は前回を参考にしてください!


marctech.hatenadiary.com



今回は記事がかなり長いので、頑張って。。ください笑



AWSの登録から公開まで

  1. AWSのアカウントの作成
  2. EC2でインスタンスの作成
  3. アプリケーションのアップロードまで

1.AWSの登録

まずはAWSのアカウントを作成をしていきましょう。AWSには12ヶ月の無料利用枠があります。
※今回使うEC2のサービスもこの無料利用枠となっておりますが、使い方によっては料金が発生してしまうのでお気を付けください。
※アカウントの作成にはクレジットカードが必要になります。


では実際に下記のリンクからアカウントを作成していきましょう。
【公式】クラウドならアマゾン ウェブ サービス (AWS)


右上の黄色いボタン『まずは無料で始める』から登録画面に進めます。アドレスやEmailアドレスなど必要事項を記入して進めましょう。

f:id:marctech:20180122175345j:plain


連絡先情報ですが、全角が使えないので半角文字で入力します。当社の住所ですと下記のようなこのような形でそれぞれ記入します。

LandcomAzabudai.8F 1-9-14 Azabudai, Minato-ku, Tōkyō-to 106-0041 Japan
〒106-0041 東京都港区 麻布台 1-9-14 ランドコム麻布台 8F

f:id:marctech:20180122175901j:plain


次に支払情報を記入し、

f:id:marctech:20180122182302p:plain


電話番号による認証を済ませます。

f:id:marctech:20180122182755j:plain


最後に無料のベーシックプランを選択してアカウントの作成完了です。

f:id:marctech:20180122183253p:plain


2. EC2でインスタンスの作成

アカウントの作成が終わるとコンソール画面へ移動しますので、上部にあるサービスのタブからEC2を選択します。

f:id:marctech:20180126180056p:plain


EC2のダッシュボードが開きますのでインスタンスの作成を選択します。

f:id:marctech:20180126180157p:plain


今回は一番上のAmazon Linuxを選択しましょう。

f:id:marctech:20180126180904p:plain


インスタンスタイプは無料枠のt2.microを選択したあと、次の手順のボタンを押します。

f:id:marctech:20180126180913p:plain


同様に次の手順のボタンを押し進めステップ3,4,5は飛ばしステップ6のセキュリティグループの設定でルールの追加を押し、タイプを「カスタムTCP」、ポート範囲を3000にして確認と作成を押します。

f:id:marctech:20180126180922p:plain


確認画面になりますので、作成を押しましょう。

f:id:marctech:20180126180928p:plain


作成を押すとキーペアの作成画面が表示されますので、好きな名前をつけてキーペアをダウンロードし、インスタンスの作成を押しましょう。

f:id:marctech:20180126181844p:plain


問題なく作成が終われば数分後にインスタンスが立ち上がります。

f:id:marctech:20180126181916p:plain

3.アプリケーションのアップロードまで

今回はMacで操作しておりますので、ターミナルを開きます。
先ほどダウンロードしたキーペアが置かれたディレクトリで下記のコマンドを打ち、キーのアクセス権を変更します。

$ chmod 400 [keypair_name].pem


次にキーペアとEC2のダッシュボード画面で確認できるパブリックIPを使用し、EC2にログインします。 f:id:marctech:20180126184116p:plain

$ ssh -i "[keypair_name].pem" ec2-user@[public_ip_address]]



初めてのログインですと

Are you sure you want to continue connecting (yes/no)?

と確認されますので、yesとタイプします。

無事に接続出来ると下記の表示が出ますので、これでログインが出来ました。

       __|  __|_  )
       _|  (     /   Amazon Linux AMI
      ___|\___|___|



では次にアプリケーション動かす為に必要なものを用意していきます。

1. yumコマンドでシステムのアップデート

$ sudo yum update



2. g++コンパイラのインストール

後々追加するNodeモジュールのコンパイルなどに使います。

$ sudo yum -y install gcc-c++



3. Gitのインストール

$ sudo yum -y install git



4. nvmのインストール

$ git clone https://github.com/creationix/nvm.git ~/.nvm


扱いやすいようにnvmへのパスを通します。

$ source ~/.nvm/nvm.sh


このままログアウトしてしまうと、nvmへのパスがリセットされてしまうので、ホームディレクトリにある.bash_profileを。コマンドライン上でファイルを編集します。

$ vi .bash_profile


iキーを押して挿入モードになるので、以下のテキストを追記します。

# nvm
if [[ -s ~/.nvm/nvm.sh ]] ; then
        source ~/.nvm/nvm.sh ;
fi

f:id:marctech:20180126191351p:plain

追記しましたら、escキーを押し、:wqと入力してreturnキーで変更を保存します。

これで$ exitで接続を切ってもnvmコマンドが使用できるようになります。


5.Node.jsのインストール

$ nvm install 8.0.0


これだけだとインストールしただけなので、使用するバージョンを選択します。

$ nvm use v8.0.0


確認の為、バージョンの情報を表示させましょう。

$ node -v




6.ファイルのアップロード

scpコマンドでファイルをアップロードするのでEC2との接続を$ exitで切ります。
前回作成した、chatExample.zipを以下のコマンドで上げます。

scp -i "[keypair_name]".pem chatExample.zip ec2-user@c2-user@[public_ip_address]:~/


今回は同じキーペアとchatExampleのzipが同じ階層に置かれております。

問題なくアップロードされたら、再度EC2に接続しましょう。

$ ssh -i "[keypair_name].pem" ec2-user@[public_ip_address]]


先ほどアップロードしたzipを解凍します。

unzip chatExample.zip


解凍されて出来たchatExampleディレクトリに移動しましょう。

$ cd chatExample


移動できましたら、nodeapp.jsを実行します。

$ node app.js


実行出来ると

listening on *:3000

と表示されるので、ブラウザで[public_ip_address]:3000を見てみましょう。


..............


.........


で、で、できました!!

f:id:marctech:20180126201036p:plain


今回のブログではここまでです。

一つ一つは簡単な作業なのですが、量がかなり多いので、大変だったのではないかと思います。
あとは独自ドメインを設定してあげたり、デーモン化などすると見栄えや、使い勝手がよくなりますね。



かなり長い記事になってしまいましたが、最後まで読んでいただきありがとうございます。

僕は約半年前からエンジニアをしているのですが、近頃は色々と分かることが多くなりとても楽しい時期におります。

この記事を読んで同じように開発をしてみたいという方、是非お待ちしております。

maisonmarc.com