Небольшое введение о себе.

Я инженер, работающий в транснациональной корпорации (не уверен, что можно раскрыть название компании, поэтому предпочитаю не раскрывать), и я нахожусь в Сингапуре.

Будучи выпускником университета (1,5 года опыта работы по состоянию на февраль 2020 г.), у меня всегда есть цель стать разработчиком мобильных приложений, хотя сфера моей деятельности совершенно не связана с созданием приложений, я часто увлекаюсь развитием технологий и стремится присоединиться к сообществу разработчиков.

Поэтому я посоветовался со своим другом (также известным как мой сенсей) Дэниелом Таном, и он предложил мне начать путешествие по веб-разработке, поскольку она включает в себя большинство навыков, которые можно применить и при разработке мобильных приложений. Это было 8 месяцев назад.

И по прошествии времени у меня появились небольшие навыки веб-разработки, и теперь я хочу записать свой путь по созданию реального приложения. Надеюсь, это также может дать некоторое представление другим новичкам: если вы только начинаете, и у вас есть страсть, но вы чувствуете себя перегруженным множеством технологических стеков. Не волнуйтесь, у меня точно такая же ситуация, как и у вас.

Да, кстати, меня зовут Пейн Танг.

Давайте начнем! Прежде всего, в этой статье будут рассмотрены:

  1. Цель приложения
  2. Выбор технологии
  3. Разработка на локальном хосте
  4. Получение хостинга Heroku (бесплатно)
  5. Вывод

Цель приложения

В моей первой истории с производственным приложением я хочу создать приложение, которое служит местом, где пользователи могут записывать свои идеи. Я считаю, что в эту эпоху в головах каждого человека всегда растут и умирают триллионы идей, потому что так легко собрать информацию из всемирной паутины, но у нас может не быть возможности в полной мере использовать эту информацию.

Таким образом, это приложение для вас, чтобы записать свои мысли. Я называю это мои мысли. В будущем я планирую реализовать другие базовые функции, чтобы играть с мыслями, такие как совместное использование/создание списков дел/управление проектами/…

Выбор технологии

Что касается технологии, я предпочитаю использовать стек MERN, поскольку это то, что я знаю (LOL), и относительно легко найти ресурсы в Интернете для создания этого полного стека.

Короче говоря, MERN означает:

  1. MongoDB: межплатформенная база данных документов
  2. Express: внутренняя структура веб-приложений.
  3. React: библиотека JavaScript для создания пользовательских интерфейсов (я использую приложение create-react-app).
  4. Node.js: кроссплатформенная среда выполнения JavaScript.

Но в этой статье я расскажу только о размещении базового приложения на облачном сервере.

Разработка на локальном хосте

Поскольку цель этой статьи не в пошаговом руководстве, давайте перейдем к окончательному коду.

Несколько заметок:

  1. Строка 5–9: фиктивная конечная точка API для целей тестирования.
  2. Строка 11–16: производственная сборка приложения React, в моем случае это просто стартовая страница Create-React-App. Я нахожу все содержимое, связанное с интерфейсом, в папке клиента.
  3. Строка 18: Поскольку хостинг Heroku по умолчанию предоставляет переменную среды PORT, нам нужно следовать ей, чтобы разместить приложение. Но в среде разработки я определю это как 5000.

Кроме того, Heroku требует, чтобы у нас был Procfile, определяющий команду для запуска приложения, или у нас может быть команда в package.json.

Получение хостинга Heroku (бесплатно)

Как новичок, я не уверен, как хостинг делается на облачном сервере в начале.

Что я знаю о сервере разработки, так это то, что нам нужен терминал для обслуживания сценария входа. Тогда мои вопросы об облачном хостинге:

  1. Нужно ли нам входить в серверный терминал и размещать скрипт?
  2. Если мы закроем терминал, не прекратится ли процесс хостинга?

К счастью, после некоторого поиска в Google я обнаружил, что платформы облачных серверов обычно предоставляют несколько типов хостинговых серверов, это общий хостинг и виртуальный частный сервер (vps).

  1. Общий хостинг — недорогой вариант, и на нем легко настроить веб-сайт, такой как Wordpress, но общий хостинг не поддерживает NodeJS. Как я уже упоминал, NodeJS требует, чтобы мы вошли в терминал и запустили скрипт с помощью команд узла.
  2. VPS решает проблемы, которые у нас есть, потому что это выделенный сервер, который нам нужно купить, и он физически установлен где-то в мире, мы получаем к нему доступ только через IP-адрес или платформу облачного сервера. В этом случае мы сможем выполнить любую настройку этого сервера, в том числе войти на него и запустить node. Я не пытался поддерживать работу Node в фоновом режиме, но я считаю, что это возможно с помощью некоторых библиотек, тогда VPS всегда будет размещать приложение NodeJS. Тогда мои 2 вопроса решены. Но возникает проблема: VPS дорогие.

Слева стандартный пакет услуг VPS от bluehost (цена на 1 год).

Хотя это определенно стоит того, чтобы разместить наше бизнес-приложение, нам может не понадобиться просто попрактиковаться в размещении нашего производственного приложения.

К счастью, Heroku — это решение, которое я нашел. Heroku предоставляет услугу хостинга приложения nodeJS бесплатно.

Чтобы иметь возможность размещать наше приложение на Heroku, необходимо кое-что узнать. Ниже я суммирую то, что я узнал, с этими знаниями я могу опубликовать свое приложение.

  1. Вам нужно определить свою команду для запуска вашего приложения, я уже определил ее в предыдущей части, где я показываю некоторые коды. Есть 2 варианта: либо указать Procfile и определить команду, либо указать команду запуска в package.json.
  2. При прослушивании порта нам нужно использовать process.env.PORT (по умолчанию: определено Heroku) вместо того, чтобы устанавливать переменную PORT самостоятельно.
  3. Вам нужно иметь учетную запись Heroku (конечно).
  4. Вам необходимо установить Heroku CLI. Затем вы сможете отправить готовый код в Heroku, как вы делаете это на GitHub.

После создания приложения Heroku я могу изменить имя приложения и добавить удаленный Git, чтобы указать на измененное приложение.

Если вы правильно выполните настройку, как в моем обобщении знаний, приложение будет запущено и запущено по URL-адресу: ‹имя вашего приложения›.herokuapp.com.

Также мы можем протестировать фиктивную конечную точку API.

Вывод

Эта статья — своего рода дневник разработчиков.

Через платформу я надеюсь найти другого разработчика, который либо даст предложения по моему проекту, либо придет и поучится вместе. Всем, кто интересуется разработкой приложений (мобильных/веб-сайтов) и только начинает, я буду рад познакомиться с вами и вашим путешествием в мире программного обеспечения.

В будущем я могу опубликовать такие материалы, как разработка приложения/настройка базы данных для приложения.

Удачного кодирования!