本棚アプリをデプロイしました！（MERNフルスタック）

Posted date at 2024-07-14

React

Node.js

Udemy

説明文

　CodeMafiaさんのUdemy動画📒で取り扱った本棚アプリに、画像アップロード機能とAmazonへのリンク機能を追加して、デプロイしました。デプロイについては、Renderというサービスを使用しています。

　こちらはMERNフルスタックという構成になります。詳細を共有します。

　なお、表示している書籍については、2023年7月以降、約１年間で読んだものです。

　

🚀デプロイしたもの

　読んだ本の基本的な情報と感想を記録するアプリケーションです。

アプリをタブで開くへのリンク

🐡ブログのメニューバーに追加

　ブログのメニューバーにも追加しました。読了次第書籍を追加していきます。

menu.png

🐡カスタマイズした点

　画像とアマゾンのリンクのアップロード・表示機能を追加しました。画像については5MB上限としています。Node.js/Express上でBase64形式に変換し、multerライブラリを使用してMongoDBに保存しています。

customize.png

🐡MERNフルスタック

　今回デプロイしたアプリケーションの技術スタックには名前がついていますので紹介します。

使用している技術スタックの頭文字をとってMERN（マーン）といい、JavaScriptオンリーのフルスタックとして、知られています。

MERN.png

🐡ビルド方法について

　今回、これまでとは異なる方法でビルドをしていますので紹介します。

〇これまでの方法

　フロントエンド、バックエンドをそれぞれビルドし、別々の環境にデプロイします。

build_normal.png

〇今回行った方法

　ReactのJavaScriptをNode.jsで読み込めるようにビルドし、それを読み込んだNode.jsをビルドして１つの環境にデプロイします。

build_new.png

　なお、ReactをNode.js用にビルドするには、以下のコマンドを実行します。

　コマンドにより実行される命令は、Reactプロジェクト生成時に、package.jsonに用意されます。Node.jsのサーバ起動時に、ビルドされたファイル群を読み込みます。

#コマンド
npm run eject

#package.jsonの該当部分
"scripts:{
"start":"reactscripts start",
"build":"reactscripts build",
"test":"reactscripts test",
"eject":"reactscripts eject"
}

#ビルドされたJSファイルを読み込む記述(buildフォルダにJSが格納されている場合）
app.use(express.static("build"));

🚀Renderとデプロイ方法

　Renderは、開発者がアプリケーションやウェブサイトを簡単にデプロイ、管理、スケールするためのクラウドプラットフォームです。フルスタック開発に対応しており、フロントエンドからデータベースまでサーバレスで構築・管理ができます。

　以下に対応しているフレームワーク・言語を掲載します。

  • ・フロントエンド：React、Vue、Next,Svelte他
  • ・バックエンド：Node.jsPython、Ruby、Go、Rust他
  • ・データベース：PostgreSQL、MySQL、Redis他

🐡RenderへのNode.jsのデプロイ手順

　前提として、GitHubのリポジトリをデプロイしますので、GitHubにソースをアップロードし、Renderのアカウント登録を行います。

　ログインし、「DashBoard」→「New」→「Web Service」を選択します。なお、今回はNode.jsなのでWeb Serviceを選択します。デプロイする対象に応じて変更します。次に「Build and deploy from Git repository」を選択します。

deploy1.png

　リポジトリを選択し、ビルドコマンドを入力します。こちらは、基本的にそのままで良いですが、ビルドコマンドを独自で定義している場合は、それを入力します。次に環境変数を設定します。プロジェクトのenvファイルに記述しているものをセットします。

deploy2.png

　最後に、MongoDBのネットワークアクセスに、RenderのアウトバウンドURLを設定して完了です。

deploy3.png

🐡Renderの無料枠の注意点と対応策

　 Renderの無料プランは15分間非アクティブな状態が続くとサーバーがスリープ状態になってしまい、サイトの読み込みに時間がかかるようになってしまいます。

　それを回避するために、以下のコードをGoogleAppScriptのトリガーにセットし、１０分毎に実行しています。

function wakeUp()
{
  const url = 'https://{自身のアプリケーションURL}.onrender.com';
  const data = UrlFetchApp.fetch(url).getContentText();
}

🚀まとめ

　いかがだったでしょうか。今回、読書の実績について見える化したいと思い、CodeMafiaさんが提供してくれたアプリをカスタマイズしてデプロイしました。他人のコードは勉強になりますし、MongoDBへの画像アップロードも実装することで、エンジニアとして一歩前進できたと感じられました。

また今回触ったRenderというサービスはフロントエンドもバックエンドもデプロイできるため、非常に便利だと感じました。GoogleCloudと比べて、設定がとても簡単なので、自分で作ったアプリをとりあえずデプロイしたい場合は使ってみてください（アクセス制限をかける場合は別途設定が必要となります）。

　アプリ開発とは関係ありませんが、読書を習慣化し始めて１年が経ちました。kindleの履歴から洗い出すと30を超えており、意外と読んでいたことに驚きました。当時を振り返り感想を書くことで、自分が何を考えていたか、何に心が動いたかを思い出すことができました。

　最後に有名な画像を張っておきます。自分はこの１年で一番左から、左から2番目になりました。30代半ばまで気楽に生きてこられて幸せでした。

read2.png

←ホームに戻る