Node.js バックエンドを Vercel に無料でデプロイしますか?

フロントエンドを無料で導(dǎo)入しますか?超簡単！ Vercel、Firebase、GitHub Pages などのツールを使用すると、これが簡単になります。なんと、Google ドライブで靜的サイトをホストすることもできるのです。しかし、バックエンド API に関しては、無料のオプションは大幅に縮小します。今日は、10 円も費やさずに Node.js バックエンドを Vercel にデプロイする方法を紹介します。

最後までお楽しみに。あなたが知らないかもしれないボーナス無料ホスティング オプションをいくつか紹介します。 ?

---

1. Node.js プロジェクトを開始する

まず、単純な Express.js バックエンドを起動しましょう。ターミナルを開き、目的のフォルダーに移動して、次のコマンドを?qū)g行します。

mkdir my-express-backend  
cd my-express-backend  
npm init -y  
npm install express  

次に、api/index.js にファイルを作成し、次のコードを追加して基本的な Express サーバーをセットアップします。

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

app.get("/", (req, res) => res.send("Express on Vercel"));  

app.listen(3000, () => console.log("Server ready on port 3000"));  

module.exports = app;  

---

2. ヴェルセルの準(zhǔn)備はできていますか?

次に、プロジェクトのルートに vercel.json ファイルを追加して、Vercel にバックエンドの処理方法を指示する必要があります。この構(gòu)成を追加します:

{  
  "version": 2,  
  "rewrites": [{ "source": "/(.*)", "destination": "/api" }]  
}  

---

3. ローカルでテストする

デプロイする前に、マシン上でテストしてみましょう。まず、Vercel CLI をインストールします:

npm install -g vercel  

vercel login を使用してログインし、プロジェクトをローカルで実行します。

vercel dev  

次に、http://localhost:3000 にアクセスして、バックエンドが動作している様子を確認(rèn)してください。 ?

---

4. Vercel へのデプロイ

ライブの時間です!次の 3 つの方法を使用してデプロイできます:

1. Vercel CLI
2. ダッシュボードでの手動セットアップ
3. GitHub 統(tǒng)合 (最も簡単で最も自動化されたオプション)。

GitHub を使用してデプロイする方法は次のとおりです:

• プロジェクトを GitHub リポジトリにプッシュします。
• Vercel にログインし、「新しいプロジェクト」をクリックします。
• リポジトリをインポートし、環(huán)境変數(shù)を設(shè)定し (必要な場合)、[デプロイ] をクリックします。

ドーン！ ?バックエンドはパブリック URL で稼働しています。

デプロイする必要があるリポジトリをインポートします。

ここを通じて、環(huán)境変數(shù)を追加できます。

---

無料ホスティングの制限

Vercel の無料ホビー アカウントは素晴らしいものですが、リクエスト クォータや非アクティブなプロジェクトのスリープ モードなどの制限があります。本番環(huán)境に対応したアプリを目指している場合は、アップグレードが必要になる場合があります。

---

ヴェルセルの代替品?

さらに無料のホスティング オプションをお探しですか? Vercel に似たもう 1 つの優(yōu)れたプラットフォームである Render をチェックしてください。シンプルでバックエンドの導(dǎo)入を簡単にサポートします。

---

それでは、どうぞ！ Node.js バックエンドは Vercel 上で稼働しており、一銭もかかりません。導(dǎo)入がどのように進(jìn)むか、または他の優(yōu)れたプラットフォームを発見した場合はお知らせください。 ?

以上がNode.js バックエンドを Vercel に無料でデプロイするの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。