はじめに

自分で作ったアプリケーションをホスティングして、いろんな人に見てもらいたいですよね。

無料で！！！！！

フロントエンドはたくさん無料のホスティングサービスがあるけど、バックエンドやDBまわりはあまりない印象。

もちろんAWSなどを使えばいいのでしょうけど…

でも、その類のサービスって、無料とはいえ従量課金制が多いし、海外のサイトにクレジット登録するの怖い…

そんなあなたに！！！

おすすめしたい簡単ホスティングサービスのご提案です！！！

Render.comの紹介

Render.com はGithub連携のアカウントを作成するだけで、無料で簡単にホスティングできるサービスです。もちろん、無料枠には機能制限があったり、諸々不便に感じることもありますが、個人開発入門のお試しとしては十分に使用できるレベルだと感じます！

基本的な使い方は、Github連携して自分のアカウントがもつリポジトリにアクセスし、各言語のstart コマンドと環境変数（あれば）を設定するだけです。

UIが感覚的でわかりやすいのもポイントだと、ユーザーに評価されているようです。

注意点として、Dockerファイルを使用することはできますが、docker compose-upをすることはできません。

では、早速簡単なバックエンドのホスティングとDBの構築・接続について、ハンズオン形式でご紹介していきます！

バックエンドのホスティング

今回はexpress.js で作成した簡単なアプリケーションをホスティングして、バックエンドサーバを公開できる形にします。

今回使用するのはルートにアクセスすると”Hello World”の文字列を返すだけの超簡易ファイルです。こちらはexpress.jsのHow to 記事を読めば作成可能だと思うの環境構築説明は割愛します。ちなみにindex.jsはこんな感じです。

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

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

まずはRender.com にアクセスしてみましょう。Githubアカウントを連携してサインオンすると後々の処理が楽です。

ログイン後はダッシュボードに遷移します。初めてアカウントを連携した場合は公開するリポジトリ設定などを質問されるかもしれません。

ちなみにフリープランでは一つのプロジェクトを作成することができ、作ったアプリケーションをまとめることができます。

それではバックエンドを立ち上げます。

画面右上くらいにある（はず）の”Add new”をクリックすると作りたいサービスを選択することができます。今回は”Web Servise”を選択します。

続いてRenderにアクセスを許可する自分のリポジトリを設定しましょう。アカウント連携の際に全てのリポジトリアクセスを許可している場合、このステップは不要ですので読み飛ばしてください。

画面右側の”Credentials”をクリックします。次に自分のGithubアカウントを選び、”Configure in Github”を選択するとポップアップで自分のGithub編集画面が出てきます。

Renderに連携を許可するリポジトリを選択しましょう。

リポジトリを選択し”Connect”をクリックするとホスティングの設定画面に遷移します。

NameとProjectは任意で設定します。Projectはよくわからない場合変更しなくていいです。

express.jsを使用しているため、Laungageが”Node”になっているはずです。

Branchも任意です。今回はmainのままにします。

Regionは日本を選択することができないため、アジア圏の”Singapore”を選択します。

Root Directoryは元となるindex.jsがプロジェクトのルートにない場合に使用します。今回はデフォルトです。

Build Commandは”npm install”を入力します。

Start Commandは”node index.js”です。

この二つはローカルでサーバーを立ち上げる時に必要なコマンドと一緒です。対象のリポジトリをRender上にクローンして立ち上げている、と考えてもいいかもです。

Instance Typeは無論Freeを選択します。

最後に.envの設定です。”add from .env”というボタンがあり、このボタンをクリックして出てくるポップアップに.envの内容をコピペするだけで簡単に入力できます。

個人的にここが感動ポイントでした。

さて、あとはデプロイボタンを押すだけです。

押すとログ画面に遷移しコマンドが自動入力されて、デプロイが始まります。毎回この瞬間はエンジニアになった感があって好きです。

無事デプロイできたら状態がLIVEになります。3分くらいかかるかもですがそこは無料なのであしからずです。

実際にURLにアクセスしてみましょう、「Hello World!」が返ってこれば成功です。

APIを構築すればバックエンドとして活用することができます。フロント側もホスティングしている場合は、環境変数としてバックエンドのURLを管理することを忘れずに。

DB構築

せっかくバックエンドが出来上がったので、データ管理もしたくなるはず。

ということで、次にDBを構築していきます。無料の範囲では1つしかDBを作成することができないので注意です。

作り方はとっても簡単。先ほど同様”Add new”をクリックするとDB作成ができます。

RedisとPostgreSQLが作れますが今回はPostgreSQLを選択します。

必要項目を設定できるのですが、今回は名前だけ（Nameだけ）で大丈夫です。これから使い続ける方は入念に設定してあげてください。Freeを選択するのを忘れずに。

Createしたあと、Infoでステータスを確認することができます。

DB接続

バックエンドアプリからDBへの接続をテストします。

今回はSequelizeというライブラリを使用します。

npm install --save pg pg-hstore

ルートディレクトリにmodelsファイルを作り、その中のindex.jsに下記のようにコードを書きます。.envごとにURLを設定しているのでこちらは個人で内容を変更してください。

// .envファイルから環境変数をロード
require('dotenv').config();

const { Sequelize } = require('sequelize');

const db = process.env.DATABASE_URL

const sequelize = new Sequelize(db,
    {
        dialect: 'postgres',
        dialectOptions: {
          ssl: {
            require: true, // SSLを必須に設定
            rejectUnauthorized: false, // セルフサイン証明書を使用している場合、これをfalseにする必要があります
          },
        },
        logging: false, // ログの表示を無効にする（任意）
      }
) 

// 接続確認用の関数
const test = async ()=>{
    try {
        await sequelize.authenticate();
        console.log('Connection has been established successfully.');
      } catch (error) {
        console.error('Unable to connect to the database:', error);
      }
}
test()

// .envの例
DATABASE_URL = postgresql:....

ちなみに接続に必要な情報は上記InfoのExternal Database URLから取得することができます。コピペでOKです。

ルートディレクトリで下記のコマンドを実行します。

node models/index.js

 Connection has been established successfully.　// 成功ログ

成功ログが出てきていれば疎通成功です。これでDBとバックエンドの準備が無料でできました！

あとは好きな機能を作り込み、好きな見た目をフロントエンドで作ってAPI結合するだけです。フロントの結合は他にもたくさん記事があるのでここでは割愛させていただきます。

ちなみにDBについてはDBクライアントツールでGUI操作することもできます！便利！

感想

今風に実装するならdockerで管理してそのままホスティング〜なんてこともできるそうなので、そっちの方が普段の開発もネットワークの保守もしやすいのだと思います。

今回はBE、DBがそれぞれ独立してホスティングされている古のアプリケーションを作成したわけですが（FE結合するならFEも）、個人的にはこういう原始的な成り立ちを知っておいた方が、今現在使用されている便利なもの（AWSなどのクラウドサービス）への理解が深まると思っています。

また、同一ネットワーク内に接続するアプリケーションではないのでセキュリティ的には少し怪しいかもしれません。この辺はもう少し勉強しなくては。

そう言う意味でも今回は大変勉強になりました。とにかく、無料で開発！これに尽きる！

よかったら試してみてください。

それでは〜！！