9
5

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.

誰でもできる!EC2のAMIインスタンスでNode.jpアプリを公開する方法

Last updated at Posted at 2018-04-30

#目的
AWSのEC2インスタンス、Amazon Machine Imageにおいて、Nginxを使ってNode.jsアプリを公開する方法についてまとめました。
それぞれについて別々の記事はあったのですが、AWSでNode.jsによりウェブサイトを公開するときに必要な環境構築する際に必要なことをまとめました。
ほとんど個人的なメモに近いので、細かい部分で間違えていても大目に見てください。

#環境
Amazon Web ServiceのサービスEC2において、Amazon Machine Imageを作成しました。
AMIの設定はぽちぽちするだけです。
セキュリティグループでhttpとhttpsを追加しておいてください。
何もない状態から、Node.jsとそれに付随するパッケージを入れて内部環境での動作確認→Nginxを入れて全世界に公開
という流れです。
(2018/04/30時点)
#使うフレームワークの解説
今回使用するフレームワークの説明を簡単に行います。
それぞれについてはそれぞれの詳しい解説があるのでそちらを参照してください。
使用方法によってはすべてのフレームワークを入れる必要はありません。
##1. Node.js
JavaScriptをサーバサイド言語として扱うモジュールです。
npmなどでパッケージの管理を行います。(Pythonでいうpip、Rubyでいうgem)
##2. Express.js
Node.jsにおいて使用される、動的処理を行う軽量フレームワークです。
目的に合わせて色々なパッケージを追加して使用します。
ここでURLやGETやPOSTについて設定します。
MVCでいうCです。
##3. EJS
ビューファイルをテンプレート化したり、パラメータ取得したりできるパッケージです。
MVCでいうVです。
##4. Forever.js
通常、ローカル環境にてNodeサーバを起動する時は
$ node app.js
で起動しますが、リモートサーバにおいては、Daemon化させる必要があります。(そのままだと停止します)
##5. Nginx
全世界に自分が作成したウェブサービスを公開するにはウェブサーバを立てる必要があります。
ローカル環境(AMI内部)で使用するならば必要ありませんが、それはないと思うのでインストールをしましょう。
#作業手順
##1. Node.jsサーバをたてる
###(1)AMIにnode.jsを入れる(https://qiita.com/oishihiroaki/items/bc663eb1282d87c46e97 の5を参考)
システムアップデート
$ sudo yum update
g++コンパイラのインストール
$ sudo yum -y install gcc-c++
gitのインストール
$ sudo yum -y install git
nvmのクローン
$ git clone https://github.com/creationix/nvm.git ~/.nvm
パスを通す
$ source ~/.nvm/nvm.sh
パスの設定
$ vim .bash_profile
以下を追加

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

インストール可能なNode.jsの確認
$ nvm ls-remote
最新版をインストール
$ nvm install 8.5.11
インストールされたバージョンの確認
$ node -v
###(2)ExpressでNodeアプリ作成(https://qiita.com/nkjm/items/723990c518acfee6e473 を参考)
アプリケーションのディレクトリを作成
$mkdir app_name
移動
$cd app_name
npmを初期化
$ npm init
npmでexpress、forever、ejsをインストール
$ npm install express --save
$ npm install forever --save
$ npm install ejs --save
実行するJavaScriptファイルを作成
$ vim app.js

app.js
/* 1. expressモジュールをロードし、インスタンス化してappに代入。*/
var express = require("express");
var app = express();
/* 2. listen()メソッドを実行して3000番ポートで待ち受け。*/
var server = app.listen(3000, function(){
    console.log("Node.js is listening to PORT:" + server.address().port);
});
// View EngineにEJSを指定。
app.set('view engine', 'ejs');
// "/"へのGETリクエストでindex.ejsを表示する。拡張子(.ejs)は省略されていることに注意
app.get("/", function(req, res, next){
    res.render("index", {});
});

ビューファイルを格納するためのディレクトリを作成
$ mkdir views
テンプレートファイルを作成
$ vim views/index.ejs

index.ejs
<html>
<body>
    <h1>New Project</h1>
</body>
</html>

##(3)サーバ起動&ローカル環境(EC2インスタンスAMI内部)での動作確認
Daemon化したNode.jsサーバ起動
$ forever start app.js
リスト表示
$ forever list
停止
$ forever stop app.js
再起動
$ forever restart app.js
確認
$ curl localhost:3000
##2. Nginxをインストール&設定
homeディレクトリに移動
$ cd ~
Nginxをインストール
$ sudo yum install nginx
Nginxの設定を変更
$sudo vim /etc/nginx/nginx.conf

/etc/nginx/nginx.conf
・・・
location / {
            }
・・・

/etc/nginx/nginx.conf
・・・
location / {
            proxy_pass http://localhost:3000;
            }
・・・

に変更
これにより、外部からルートディレクトリにアクセスすると3000番のポートにアクセスされます。
##3. Nginxサーバを起動
起動
$ sudo service nginx start
再起動
$ sudo nginx -s reload
停止
$ nginx -s stop

9
5
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
9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?