「はじめてつくるバックエンドサーバー基礎編 第3章」
第3章 デプロイ編（Renderを利用）
本章ですること
現在はlocalhost、つまり開発者のパソコンからしかアクセスできないバックエンドサーバーを、Renderというサービスを使って公開（デプロイ）し、誰でもアクセスできる状態にしましょう。
*2022年11月現在のRenderの無料プランでは、1月あたり750時間が割り当てられています。1月は744時間（31日 x 24時間）なので、Render1アカウントあたり1つのアプリが無料で使えることになります。
デプロイの準備
デプロイのためにコードを2ヶ所修正します。
package.jsonを開き、次のコードを追加します。
// package.json
{
"name": "node-express",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1", // 末尾に「,」を追加
"start": "node index.js" // 追加
},
"author": "",
"license": "ISC",
"keywords": [],
"description": "",
"dependencies": {
"express": "^4.17.1"
}
}
これはRenderにサーバー起動のコマンドを伝えるコードになります。
次はindex.jsを開き、下の修正を加えます。
// index.js
...
app.post("/delete", function (req, res) {
activities.splice(req.body.number, 1);
res.send(activities);
});
const port = process.env.PORT || 5000; // 追加
app.listen(port, function() { // 修正
console.log(`Listening on ${port}`); // 修正
});
ここまで、このサーバーが動く場所としてlocalhost:5000を指定していました。しかしRenderでは別の場所が指定されるので、それに対応するためのコードになります。
これでコードの準備は完了です。
Gitのダウンロード
Renderにアップするには、バージョン管理のGitとGitHub／GitLabが必要です。ここではGitHubを使った方法を解説します。
まずGitがダウンロードされているか確認しましょう。次のコマンドをターミナルに打ってEnterを押してください。
git --version
下のような表示が出たらGitはすでにインストールされているので、次に進んでください。
git version 2.xx.x (Apple Git-1xx)
もし出ない場合はGitがインストールされていないので、下のページからインストールしましょう。
なおGitを使うときには、Gitにプッシュしないファイルを指定する.gitignoreファイルを作るのが慣例です。
次のようにファイルを作成します。
\
ここにはGitに通常アップしないnode_modulesや.DS_Storeなどを追加します。
// .gitignore
/node_modules
.DS_Store
保存します。
そしてGitHubにプッシュしてください。
Renderへのサインアップとログイン
Renderへのサインアップ／ログインはメールアドレスでも行えますが、ここではGitHubアカウントを使います。Renderへ下記リンクからアクセスします。
右上の「DASHBOARD」を押します。
\
下のページが開きます。ここではログインにGitHubを使うので「GitHub」を選び、そして下部の「COMPLETE SIGN UP」ボタンを押します。
\
サインアップに使われるメールアドレスはGitHubに使っているものが自動で入力されます。別のメールアドレスを使いたい場合は書き換えて、再び下部の「COMPLETE SIGN UP」ボタンを押します。
\
認証メールを送った旨のページが表示されるので、サインアップに使ったメールアドレスの受信フォルダを確認し、認証を完了させます。
\
Renderへのデプロイ
認証メールにあるリンクをクリックすると、認証が完了し、そして下のページが開きます。右上の「New」をクリックしましょう。
\
「Web Service」をクリックします。
\
GitHubからデプロイしたいレポジトリを選ぶので、「Connect account」をクリックします。
\
すべてのレポジトリを対象にする「All repositories」と、選択したものだけを対象にする「Only select repositories」の2つの選択肢があります。どちらを選んでもいいですが、今回は後者を選んで進めます。
\
デプロイしたいレポジトリを選択しましょう。ここでは「monotein_book」というレポジトリを選んでいます。そして下部の「Install」ボタンを押してください。
\
デプロイするレポジトリが選択できたので、「Connect」をクリックします。
\
デプロイの設定画面が出てきます。
\
「Name」は好きなもので大丈夫ですが、これはデプロイしたアプリのURLとして使われます。「Root Directory」にはindex.jsのあるフォルダへの相対パスを書きます。
普通は空欄で大丈夫ですが、例えば本書のGitHubページのように「node-express」というフォルダの中にindex.jsがある場合は「node-express」と書きます。
\
「Environment」、「Region」は自動で設定されるので、そのままにします。「Branch」はプッシュしたGitHubのブランチです。ここでは「master」になっています。
「Build Command」には、アプリで使用しているパッケージをデプロイ時にインストールするコマンドを入力します。本書のアプリではnpmを使用しており、そのパッケージをインストールするにはnpm installというコマンドを使うので、「npm install」と入力します。
「Start Command」には、アプリをスタートするためのコマンドを入力します。ここには先ほどpackage.jsonに書いたコードと同じ「node index.js」を入力しましょう。
\
下部で「Free」という無料プランが選択されているのを確認したら、さらに下にスクロールして、「Create Web Service」ボタンを押します。
\
デプロイが実行中であることを示す「In progress」という表示が出ます。
数分経ってデプロイが完了すると、ログ画面に下のように表示されます。
\
ページ上部左側にある「Render」ロゴの少し下にあるURLをクリックすると、デプロイしたアプリが開きます。
デプロイ中やアプリ起動で失敗している場合には、先ほど「In progress」と出ていたところに「Failed」と出ます。その場合はログ画面を見て問題を特定しましょう。
以上で初めてのバックエンドサーバーの公開までが完了です。