Содержание

Руководство по развертыванию вашего приложения MERN с полным стеком в Render
TLDR
Рабочий процесс
Приложение MERN
Рендеринг
— Веб-сервис
— Статический сайт
Наконец
Ссылки 🔗
Социальные

Руководство по развертыванию вашего приложения MERN с полным стеком в Render

Необходимые условия:

Аккаунт Github
Аккаунт Render
Полностью функциональное приложение MERN и его репозиторий на Github Здесь
Учетная запись MongoDB

TLDR

Войдите в Render и создайте веб-сервис для бэкэнда (Node, Express, MongoDB) и статический сайт для фронтэнда (React).

Развернутое приложение — Contact Bank
(предупреждение Развернутая ссылка займет 30 секунд)

Существует несколько способов создания полностекового приложения для развертывания на Render.
Этот учебник основан на приложении MERN со следующей структурой файлов

Contact-Bank (root)/
├── client/
│   ├── src
│   ├── public
│   ├── node_modules
│   ├── .env
│   ├── .gitignore
│   ├── package-lock.json
│   └── package.json
├── config
├── models
├── node_modules
├── routes
├── seed
├── .env
├── .gitignore
├── package-lock.json
├── package.json
└── server.js

Вход в полноэкранный режим Выход из полноэкранного режима

Рабочий процесс

(Если у вас нет полностью функционального готового к производству приложения MERN, выполните следующие шаги, в противном случае перейдите сюда)

Приложение MERN

основная ветка для развертывания Render
ветка dev для развертывания Vercel *опционально (только для тестирования фронт-энда)

Мы сосредоточимся на основной ветке. Я создал MERN-приложение под названием Contact Bank, которое представляет собой базовое CRUD-приложение с контактной информацией. Я посеял 1000 контактов в MongoDB.

Если вам нужно протестировать ваше состояние до засева в базу данных, я включил папку данных на фронт-энде с contacts.json.

Я использую ContextAPI для управления состоянием, если вы хотите использовать хуки и prop drill, это не повлияет на разрешение развертывания при прочих равных условиях.
Шаги:

Клонируйте репо git clone repo
Добавьте строку подключения к MongoDB из MongoDB в качестве переменной окружения (не вводите ее жестко, она должна быть в вашем файле .env) ex:
```
MY_MONGO_URI='mongodb+srv:...mongodb.net/contact-bank?retryWrites=true&w=majority'
```
Seed the MongoDB
- Выполните эту команду в вашем CLI
```
   node seed/seeds.js
```
с того же уровня, что и сервер или переменные .env === undefined

В корневом каталоге package.json необходимы следующие скрипты

//package.json

  "scripts": {
      "start": "node server.js",
      "server": "nodemon server.js",
      "client": "npm start --prefix client",
      "clientinstall": "npm install --prefix client",
      "dev": "concurrently "npm run server" "npm run 
       client"",
      "render-postbuild": "NPM_CONFIG_PRODUCTION=false 
      npm install --prefix client && npm run build -- 
      prefix client"
    },

В корневом каталоге CLI npm run dev и все должно запуститься и изменения в UI должны отразиться в базе данных.
Подача статических активов в продакшн, внутри server.js

if (process.env.NODE_ENV === 'production') {
    //*Set static folder up in production
    app.use(express.static('client/build'));

    app.get('*', (req,res) => res.sendFile(path.resolve(__dirname, 'client', 'build','index.html')));
  }

Войдите в полноэкранный режим Выйти из полноэкранного режима

Этот шаг должен быть завершен, чтобы перейти к развертыванию.

Рендеринг

(Если у вас есть полностью готовое к работе приложение MERN, начните здесь)

— Веб-сервис

Создайте веб-службу
Настройки

У меня запущен параллелизм с помощью этого скрипта npm run dev.

Окружение

Переменная окружения для строки подключения к MongoDB

Журналы

— Статический сайт

Создание статического сайта
Настройки
Я говорю Render использовать этот скрипт для создания папки сборки из корня npm run render-postbuild и путь к папке сборки ./client/build, так как все команды npm вызываются в корневой папке
Окружение
Перенаправления/Перезаписи
Мой маршрут https://contact-bank.onrender.com/api/* должен быть верхним правилом, поскольку мои маршруты в server.js созданы с помощью /api/.
Журналы

Наконец

Затем, примерно через 30 минут статическая ссылка на сайт https://contact-bank-a72l.onrender.com/ будет работать.

Yahooooo

Я создал этот учебник в свете анонса Heroku, чтобы разработчики, работающие со стеком MERN, имели некоторый путь для развертывания своих проектов в будущем.

Спасибо за прочтение и удачного кодинга

Ссылки 🔗

Репо Conact-Bank
Аккаунт Github
Аккаунт Render
MERN MongoDB
MongoDB
tree.nathanfriend.io

❤️❤️❤️

Социальные

Twitter
Linkedin
Портфолио
Github

🤘
Happy Coding

Развертывание приложения MERN на Render (бесплатный уровень)