More than 3 years have passed since last update.

VPSで複数のNodeJSアプリをHTTPS化してホストする

Last updated at 2020-02-14Posted at 2020-02-13

VPSで複数のサービスのAPIサーバーを運用するための手順です。

概要

Digital Ocean の Ubuntu イメージ(5USD/month)
サブドメインに各アプリを紐づける
Let’s Encrypt で SSL 化

サーバーのセットアップ

Digital Ocean Droplets のセットアップ

以下の設定でDropletsを作ります。
※ 他社のVPSサービスを利用する場合は、ドメインの@ www app1 app2をサーバーに向けてSSH接続できる状態までやってこの項を飛ばしてください。

Image: Ubuntu
Plan: Standard / 5USD
Region: シンガポール
Authentication: SSH keys

ドメインの管理画面から使うドメインのwww @ app1 app2 を上記で作ったサーバーに向けます。

# SSH 接続 できることを確認
$ ssh root@yourdomain.com

メモリのスワップ領域を作る

月額5USDなどの安いVPSを利用しているとメモリ不足になることがあります。事前に十分な仮想メモリを設定しておきます。

# スワップ領域が未指定であることを確認
$ free
# スワップディレクトリの作成
$ sudo mkdir /var/swap/
# スワップファイルを作成
$ sudo dd if=/dev/zero of=/var/swap/swap0 bs=1M count=1024
$ sudo chmod 600 /var/swap/swap0
# 上記のファイルをスワップ領域として割り当てる
$ sudo mkswap /var/swap/swap0
$ sudo swapon /var/swap/swap0
# 再起動で再設定できるようにする
# fstab に `/var/swap/swap0 swap swap defaults 0 0` を追記します。
$ sudo vi /etc/fstab
# 動作確認
$ free

ログインユーザーを作る

Root ユーザーでログインし続けるのはセキュリティ的によくないので新しいユーザーを追加します。

# ユーザーの追加
$ adduser taro
# 作ったユーザーにsudo権限を与える
$ usermod -aG sudo taro
# ssh 接続できるようにする
$ rsync --archive --chown=taro:taro ~/.ssh /home/taro

ファイアウォールの設定

ファイアウォールを有効化してSSH接続のみを許可するようにします。

# OpenSSHを許可
$ ufw allow OpenSSH
# 有効化
$ ufw enable
# 動作確認
$ ufw status

VSCODEの設定

VSCODEからリモートサーバーのファイルを編集できるようにします。

extentions remote sshをインストールします。
Remote-SSH: connect to host…
Add new Host
ssh root@yourdomain.com

NGINX で HTTPS を使う

Nginx のインストール

新しく作ったユーザーで Nginx をインストールします。

# インストール
$ sudo apt update
$ sudo apt install nginx

# firewallにnginxを許可します
$ sudo ufw allow 'Nginx Full'

# 動作確認
$ systemctl status nginx

yourdomain.com にブラウザからアクセスしてnginxのデフォルト画面が表示されることを確認します。

Nginx の設定ファイル

/etc/nginxにNginxの設定ファイル一式があります。その中から/etc/nginx/conf.d/home.confを作って編集していきます。

/etc/nginx/conf.d/home.conf

server {
    server_name [yourdomain].com www.[yourdomain].com;

    location / {
        root     /var/www;
        index index.html;
    }
}
server {
    server_name app1.[yourdomain].com;

    location / {
        root     /var/app1;
        index index.html;
    }
}

設定を読み込みんでnginxを再起動します。

# テスト
$ service nginx configtest
# 再起動
$ systemctl reload nginx

var/www/index.html, var/app1/index.html を適当に作ってブラウザでURLにアクセスすると各index.htmlが表示されるはずです。

Let’s EncryptでHTTPSの設定

# certbot のインストール
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt install python-certbot-nginx

# 証明書をリクエスト
$ sudo certbot --nginx -d www.[yourdomain].com -d [yourdomain].com -d app1.[yourdomain].com
# 証明書の再発行設定
$ sudo certbot renew --dry-run

https でアクセスできるようになります。

NodeJSアプリケーションをNginxでリバースproxyする

nodeJSのインストール

# インストール
$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ sudo apt-get install build-essential
# 動作確認
$ node -v
$ npm -v

デモアプリを動かしてみる

$ mkdir ~/app1
$ cd ~/app1
$ npm init
$ npm install --save express

VS code で上記で作ったディレクトリにアクセスしてデモアプリを作ります。[フォルダを作る] > [/home/taro/app1/]

index.js

const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => res.send('Hello World From NodeJS!'));
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

アプリを起動して動作を確認します。

# サーバーに接続して実行
$ node index.js
# 別のターミナルを起動して動作を確認
$ curl http://localhost:3000

注意: この段階では、yourdomain.com:3000 にアクセスして動作確認できません。

PM2をインストールしてアプリを永続化します

$ sudo npm install pm2@latest -g
$ pm2 start index.js
# 動作確認
$ curl http://localhost:3000

Nginx Reverse Proxy server の設定

Nginx Reverse Proxy server を設定してhttp://localhost:3000を外にだします。/etc/nginx/conf.d/home.confを編集します。

/etc/nginx/conf.d/home.conf

...
server {
    server_name app1.[yourdomain].com;
    location / {
        proxy_pass http://localhost:3000;
    }
    listen 443 ssl; # managed by Certbot
...

$ sudo systemctl restart nginxでnginxを再起動します。
app1.[yourdomain].com にブラウザでアクセスするとのHello World From NodeJS!が表示されるはずです。

別のドメインを追加してHTTPS化する

home.confに新しいドメインの設定を追加します。

/etc/nginx/conf.d/home.conf

server {
    server_name app2.[yourdomain].com;

    location / {
        root  /var/app2;
        index index.html;
    }
}

Let’s EncryptでHTTPS証明書を発行します。

# nginxの再起動
$ systemctl reload nginx
# 証明書のリクエスト
$ sudo certbot --nginx -d app2.[yourdomain].com
# 証明書の再発行設定
$ sudo certbot renew --dry-run

https で app2.yourdomain.com にアクセスできます。

その他

Digital Ocean で Droplets の破壊作成を繰り返すとき、DestroyではなくRebuildを選択するとIPが引き継がれるので便利です。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up