Waplusテックチームブログ

よく参照するのをわかりやすくまとめよう！

Waplusテックチームブログ

nginxを使ってnode.jsをWeb上に公開する

by · 2019年4月10日

nginxとは

nginxはエンジンエックスと呼んでいます。これが正しい呼び方かどうかはわかりません（笑
それはさておきnginxとはapacheのようなWebサーバーです。
多機能でかつシングルタスクという特性を持っておりnode.jsの利点を活かせるため組み合わせて使われています。

ただドキュメントが少なく設定に困る所があります(^_^;
今回はUbuntuにnginxをインストールし80番ポートへのアクセスを3000番ポートへリバースプロキシしてnode.jsをWeb上に公開してみましょう

環境

Ubuntu 16.04 x64

node v10.15.3

Ubuntuやnode.jsのインストールは既に完了していものとして話しを進めます。

インストールしてみる

$ sudo apt-get install nginx

apt-getコマンドで問題無くインストールがされるはずです。
もし見つからないなどでインストールされない場合はupdateとupgradeコマンドを試してみてください。

インストールされたか確認してみる

まずは起動してみましょう。

$ sudo systemctl start nginx

ここでエラーが出る場合は上手くインストール出来ていません。

$ sudo systemctl status nginx

● nginx.service - A high performance web server and a reverse proxy server
    Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
    Active: active (running) since Wed 2019-04-10 08:51:11 UTC; 17min ago
  Main PID: 25444 (nginx)
    CGroup: /system.slice/nginx.service
            ├─25444 nginx: master process /usr/sbin/nginx -g daemon on; master_process on
            └─25445 nginx: worker process                           
 Apr 10 08:51:11 test systemd[1]: Starting A high performance web server and a reverse proxy server…
 Apr 10 08:51:11 test systemd[1]: nginx.service: Failed to read PID from file /run/nginx.pid: Invalid argument
 Apr 10 08:51:11 test systemd[1]: Started A high performance web server and a reverse proxy server.
 Apr 10 09:08:06 test systemd[1]: Started A high performance web server and a reverse proxy server.

active (running)とありますので。とりあえず動いているみたいです。

ブラウザでサーバーのアドレスにアクセスしてみてください。

今までnode.jsを起ち上げて「http://アドレス:3000/」としなければエラーとなっていましたが、アドレスのみでアクセス出来るようになっています。

もちろんこれはnginxのデフォルトのページでnode.jsを起ち上げたところでアプリケーションが表示されるわけではありません。

設定ファイルを作成する

設定ファイルの場所を確認してみます。

$ sudo cat /etc/nginx/nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

#mail {
#       # See sample authentication script at:
#       # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#       # auth_http localhost/auth.php;
#       # pop3_capabilities "TOP" "USER";
#       # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#       server {
#               listen     localhost:110;
#               protocol   pop3;
#               proxy      on;
#       }
#
#       server {
#               listen     localhost:143;
#               protocol   imap;
#               proxy      on;
#       }
#}

ここにはログの書き出し場所やらなんやらが色々書かれています。
解説は別にしたいと思います。

ここにリバースプロキシの設定を書いてもいいのですが、それだと見づらくなってしまいますし、設定が入り組んでややこしくなるのでWebサービスの設定ファイルを別に作ります。

$ sudo nano /etc/nginx/conf.d/default.conf

conf.d/の中に新たにdefalt.confというのを作ります。
名前は何でも良いのですがconf.dの中に作ってください。
nginx.confが読み込まれた後にconf.d/の*.confファイルが読み込まれます。

server {
        client_max_body_size 50M;
        listen  80;
        server_name     <<アドレス>>;
        location / {
                proxy_pass http://localhost:3000;
        }
}

セキュリティ上記載した方がいいものもあるのですが、とりあえず今回は最小限にしておきます。

client_max_body_sizeはアップロード出来る最大サイズです。

listenがアクセスしてきたポート番号になります。ブラウザならデフォルトは80番ポートですね。

server_nameがリクエストされているアドレスです。<<アドレス>>をドメイン名に変更してください。

locationの後ろの / はルートアドレスを意味します。
proxy_passでlocalhost:3000を表示するように設定しています。
つまりserver_nameでアクセスされたときlocalhostの3000番に振り返るように設定しているわけです。
*localhostというと自分のパソコンを連想する人もいるかもですが、localhostは「自分自身」という意味です。この場合サーバー自身を意味します。サーバーが実行していますからねζ(*'ω'*)ζ

もちろんサブドメインでディレクトリを別ける事も出来ます。

proxy_pass https://localhost:3000/subdomain/

と書けば大丈夫です。

node.jsのアプリケーションを複数起ち上げる場合はnode.js側でポート番号を変更しserver{}を複製して個別に割り振ることで利用できます。

リバースプロキシされているか確認してみよう

いつものexpressのページがでましたね。
とても便利なので是非使ってみて下さい。

タグ:

あわせて読みたい