【初心者向け】さくらのVPSでNode.js + PostgreSQL APIを構築してnginxで公開＆HTTPS化するまで

用意するもの

必須

• 適当なパスワード
• まあまあな金銭

本記事に合わせるなら

• sakuraのVPSのアカウント
• Tera Term 5(アプリケーション)

サーバーの契約

さくらのVPSの契約サイトに向かいubuntuで契約する

小さい個人開発（同時接続ユーザーが一桁代）ならば1GB2コアで十分
また大きくなったらスケールアップも可能である。

この管理ユーザーのパスワードに適当なパスワードを入力し、支払いを済ます。

しばらくするとサーバー一覧のところに追加される。
そこに表示されるIPアドレス(ex: 127.0.0.0)をメモしておく

サーバーの環境構築

「Tera Term 5」等のサーバーに接続できるアプリケーションを開き、ホストにIPアドレスを入れる

ubuntuを契約できていればユーザー名ubuntuと最初に設定したパスワードで入れるはずである。

入れたら、アップデート作業

sudo apt update

DBをインストールする

sudo apt install postgresql postgresql-contrib

DBログイン

sudo -u postgres psql

DB作成

CREATE DATABASE < DB名 >;
\c < DB名 >;

USER設定

CREATE USER ubuntu WITH PASSWORD '< パスワード >';
GRANT ALL PRIVILEGES ON DATABASE < DB名 > TO ubuntu;

テーブル定義

CREATE TABLE < table名 >(...< カラム名_i > <型名_i>...);
INSERT INTO < table名 > (...< カラム名_i >...) VALUES  
...
( < data_i > ),  
...;

軽量なバックエンド

nodeとバックエンドのパッケージを入れる

sudo apt install nodejs
npm install pg

ファイルを作成する

touch index.js
nano index.js

以下のものを張り付け各種名称を変更する

const { Client } = require('pg');

const client = new Client({
  user: "ubuntu",
  host: "localhost",
  database: "< DB名 >",
  password: "< パスワード >",
  port: 5432,
});

async function main() {
  try {
    await client.connect();
    console.log('DB接続成功');

    const res = await client.query('SELECT * FROM < table名 >');
    console.log(res.rows);

  } catch (err) {
    console.error(err);
  } finally {
    await client.end();
  }
}

main();

実行

node index.js

これでDBのダミーデータがかえってくると正解

API動作

上記ではCUI上で実行では実行できるがhttpで実行できない。そこでexpressを導入し、API対応を進める。

npm install express

またindex.jsも

const express = require('express');
const { Client } = require('pg');

const app = express();

const client = new Client({
  user: "ubuntu",
  host: "localhost",
  database: "< DB名 >",
  password: "< パスワード >",
  port: 5432,
});

client.connect();

app.get('< URL >', async (req, res) => {
  try {
    const result = await client.query('SELECT * FROM < テーブル名 >');
    res.json(result.rows);
  } catch (err) {
    console.error(err);
    res.status(500).send('error');
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

このように編集できたら、tmuxで実行すると常時稼働できる

tmux new
node index.js

この常時稼働に外部から入るためには、さくらのVPSからフィルターを通さなければならない。
サーバーの設定に入り、操作 > サーバー詳細 > パケットフィルタよりwebの3000番、80番、443番を追加する。(80,443は今度必要になる)。

設定を保存したら、ブラウザで以下のURLで入る

< IPアドレス >:3000/< URL >
例)127.0.0.0:3000/example

JSONデータが出てくれば成功である。

ポート指定をなくす

nginxというライブラリを使用してデフォルトポート(80)を3000ポートに割り当てる。
インストール

sudo apt install nginx

設定ファイルの作成

cd /etc/nginx/sites-available
rm default
touch api

以下のソースを張り付ける

server {
    listen 80;

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

設定の変更と反映

sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled/
sudo systemctl restart nginx

これで以下のポート無しURLから入れるようになる

< IPアドレス >/< URL >
例)127.0.0.0/example

ドメインを取得する

APIとしては完成しているがIPアドレス丸出しというのはセキュリティの観点からうなずけるものではない。
ドメインを取得し、ラップするとIPアドレスと隠蔽することが可能である。

さくらのサービスの中にドメインがあるので、新規取得をする

「さくらのドメイン」で検索するか、桜のドメインを踏む
ほしいドメインを入力し、ドメインを取得する。(おそらく年3000円程度が最安値)

取得できたらドメインのゾーン指定をする。
ドメインコントロールパネルのゾーンから画面遷移し、「さくらのDNSに設定する」の中にIPアドレスをいれる。

追加して設定を押せば、設定が完了

nginxに設定を追加する。

server {
    listen 80;
    server_name < 取得したドメイン >;

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

設定を更新

sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled/
sudo systemctl restart nginx

ドメインに入る

http://< ドメイン >/< URL >
例)http://domeinXxx/example

https化

httpで通信するのはセキュリティ的にまずいので、certbotを導入してhttps化する

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx

いろいろ聞かれるので、メルアド登録とドメイン選択、規約読みを行い設定を済ます。

これでhttps通信ができるようになるはずである。

https://< ドメイン >/< URL >
例)https://domeinXxx/example

終わりに

さくらのレンタルサーバーでサーバーを借りてnodeを入れ込みAPIを利用するところまでを解説していきました。
おそらく、他のDBを借りる等のよい方法があるかと思いますが、インフラ知識の強化のためにも環境構築と記事投稿を行いました。もっと良い方法があれば、コメントいただけると幸いです。
次週、これを使用してフロントエンド(React)に関しての記事を出せればと思います。
ここまでお読みいただきありがとうございました。