Как развернуть приложение Node/Express на Vercel

Процесс развёртывания приложения Node/Express на платформе Vercel. Она разделена на три основных этапа: предварительные условия, настройка проекта и развертывание на Vercel

Предварительные условия

Шаг 1

Создайте учетную запись на Vercel, если у вас ее еще нет.

Шаг 2

Используйте npm для установки Vercel глобально на вашем компьютере с помощью https://www.npmjs.com/package/vercel

npm i -g vercel

Настройка проекта

Создайте проект

mkdir vercel-node-app
cd vercel-node-app
touch index.js
npm init -y
npm i express

Откройте проект в вашем редакторе кода, а затем создайте сервер Node в файле index.js

Важно, чтобы файл index.js оставался в корневой папке на стороне сервера, иначе ваше приложение не будет работать

index.js

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Главная страница'));
app.get('/about', (req, res) => res.send('Страница "О нас"'));
app.get('/portfolio', (req, res) => res.send('Страница портфолио'));
app.get('/contact', (req, res) => res.send('Страница контакты'));

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Сервер работает на порту ${port}, http://localhost:${port}`));

Создайте скрипт запуска в файле package.json

package.json

"scripts": {
  "start": "node index.js"
},

Запустите следующую команду, чтобы увидеть, как ваше приложение Node работает локально в браузере

npm run start

Развертывание на Vercel

Создайте файл vercel.json и поместите его в корень папки вашего проекта, затем добавьте следующий код

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ]
}

Теперь выполните команду vercel --prod, чтобы развернуть ваше приложение

vercel --prod

Откройте ссылку на Production, и ваше приложение должно работать онлайн с полностью рабочими маршрутами