Hero img
ウェブサーバを建てる

nginxとNode.jsでウェブサーバを作成します。

nginxとNode.jsを使用してウェブサーバを作成します。nginxだけでももちろん作成できますが、next.js等も利用したい。もしくはNode.jsでHTTPS APIを作成したい等、複数のウェブアプリを利用したい場合にプロキシの設定が必要になってきます。


目次

  • nginxとnode.js
  • 目標
  • 動作環境
  • almalinuxのアップデート
  • nginxのインストール
  • バージョンの確認
  • 公式ページで安定版の確認
  • リポジトリを追加する
  • インストールを行う
  • ポートの開放
  • 起動確認
  • Node.jsのインストール
  • nodejs express
  • nginxのプロキシ設定
  • configの修正
  • 修正前
  • 修正後
  • 実行してみる
  • まとめ

nginxとnode.js

ウェブサーバを作成するためにはポート443,80番を利用すれば問題なく作成できますが、通常のHTMLのwebページに加えnodejs APIアプリを利用したいのでnginxのリバースプロキシの設定を行います。

目標

  • Node.jsでAPIを作成する。
  • nginxでウェブページを表示する

動作環境

  • AlmaLinux 9.0
  • rootでアクセスしている

almalinuxのアップデート

まずはalmalinuxをアップデートさせます

dnf -y update

nginxのインストール

nginxをインストールして正常にウェブページが表示されるところまで設定を行います。

バージョンの確認

まずはインストールできるnginxを確認します。

dnf info nginx

確認したところ 1.20.1がダウンロードされるみたいですね nginx-ver

公式ページで安定版の確認

公式ページにアクセスして現在のバージョンを確認します。
1.22.0が安定みたいです nginx-ver-official

そのため1.22.0をインストールしたいと思います。

リポジトリを追加する

公式の通りですが viを使用してnginx.repoを追加します。

vi /etc/yum.repos.d/nginx.repo

中身は

[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

インストールを行う

リポジトリを追加したのでインストールをします。 バージョンは1.22.0が表示されているのでインストールを実行します

dnf install nginx

ポートの開放

port80を開放します。 --permanentのオプションを使用することでサーバー再起動後でも開放され続けます(永続的)

firewall-cmd --zone=public --add-service=http --permanent

起動確認

nginxのインストールが終わったので起動してみます

systemctl start nginx

welcom to nginxが表示されない場合は別のブラウザーを利用してみてください。

Node.jsのインストール

dnf install nodejs

nodejs express

nodejsのexpressを使用し、ウェブサーバを立ち上げます。 nodejs expressのアプリのフォルダーを作成し、移動します。

mkdir /nodetest && cd /nodetest

次にepxressをインストールし、viで簡易アプリを作成します。

npm install express

ルートにアクセスされた場合にtextMessageを返すだけの簡単なアプリです。 ポートは3000を使用しています。

app.js
const express = require("express");
const app = express();
app.get("/",(req,res)=>{
        res.status(200).send("testMessage");
});
app.listen(3000);

起動させてみます。

node app.js

nginxのプロキシ設定

上記でファイアウォール3000ポートを解放していれば、testMessageが表示されます。 本来なら80ポートで表示させたいのですがnginxが80を既に利用しているためexpressでは80ポートを利用できません。 そのためnginx側で80にアクセスしたら3000ポートに飛ばす設定を行います。(リバースプロキシ)

configの修正

nginxのconfigファイルを修正します。設定ミスをすると修正の方法がわからなくなるので必ずバックアップを取ってから修正をしてください。
メインのconfigファイルは /etc/nginx/nginx.confです
存在しない人は、/usr/lib/systemd/system/nginx.serviceの中身を見てみると解決するかもしれません。

cd /etc/nginx/
cp nginx.conf nginx.conf.back

修正前

元々のファイルはこのようになっています。

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

修正後

include /etc/nginx/conf.d/*.conf; のところをserverに変更し、その他の情報を追加します。

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;


server {
    listen       80;
    server_name  _;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        proxy_pass http://127.0.0.1:3000;
    }
}
}

最後のproxy_pass....となっているところが今回のメインとなるプロキシの設定です。
ローカルのポート3000に飛ばしてくださいと設定されています。

実行してみる

全ての設定が無事に終わりました。
最後に設定を読み込み、表示されるか確認をしてみます。
configファイルの再読み込みはnginxの再起動が必要になります。

systemctl restart nginx

その後expressサーバを起動します。

node /nodetest/app.js
nginx-node-finally

まとめ

nodejsとnginxでウェブサーバを立ち上げepxressで作成したアプリにアクセスができました。
今回nginxの大元configファイルを編集しましたが、本番環境ではconf.dフォルダー内の物を編集することをおすすめします。そしてnodejsのアプリもデーモン化する必要もあります。
デーモン化はforever、pm2がありますが私はpm2を利用しています。

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください