Як розгорнути додаток NodeJS на Heroku з Github (без встановлення Heroku на вашій машині)

Як веб-розробник, ніщо не задовольняє тим, що можливість показати (і показати) свою роботу на слово. Не лише за допомогою зображень чи відео у Twitter, але й дозволяючи їм насправді взаємодіяти з ним, особливо якщо ви працюєте над якимись цікавими сторонніми проектами або претендуєте на посаду.

І на щастя, тепер із усіма хмарними провайдерами спільний доступ до вашої роботи є обов’язковим та основним кроком на вашому шляху.

У цій демонстрації ми розглянемо, як розгорнути свою прохолодну програму NodeJS на Heroku. Наприкінці цієї демонстрації у нас з’явиться основний додаток Hello World, який працює у відкритому доступі, до якого може отримати доступ кожен.

Для цієї демонстрації я припускаю, що на вашому комп'ютері встановлено Node. Якщо ні, ви можете завантажити з веб-сайту Nodejs.org. Ці кроки прості, і їх легко знайти в Інтернеті.

Вам також знадобиться обліковий запис GitHub для розміщення нашого коду в Інтернеті. Якщо у вас немає облікового запису, ви можете створити його безкоштовно на Github.com. За допомогою безкоштовного облікового запису ви можете створювати необмежену кількість загальнодоступних сховищ. Ми будемо використовувати систему контролю версій Git, щоб внести наші зміни в Github

КРОК 1: Створіть цей класний додаток

А тепер давайте створимо додаток Cool Node, про який ви вже думали.

Створіть папку на локальній машині та дайте їй назву (на ваш вибір), скажімо MyCoolApp.

Додайте файл із іменем package.json і вставте наведений нижче вміст. Цей файл є основною інформацією про наш пакет. (Це також можна створити, набравши команду npm init і прийнявши всі налаштування за замовчуванням.)

{ "name": "coolnodeapp", "version": "1.0.0", "description": "node app ", "main": "app.js", "scripts": { "start": "node app.js" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "bugs": { "url": "" }, "homepage": "" }

Однією з дуже важливих змін, яку слід помітити, є цей рядок:

"start": "node app.js"

Після розгортання Heroku запустить цю команду, щоб запустити вашу програму.

Додайте файл app.js і вставте наведений нижче код. Це буде відправною точкою нашого додатка.

const http = require('http'); const port = process.env.PORT || 3000 const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end('

Hello World

'); }); server.listen(port,() => { console.log(`Server running at port `+port); });

Цей код в основному відкриває порт на локальному сервері та обслуговує деякий HTML.

Зверніть увагу на найважливіший блок коду тут:

const port = process.env.PORT || 3000

Це надзвичайно важливо, коли ви хочете розгорнути свою програму в хмарі. Сервер додатків запускається з випадкового порту в хмарі. Якщо ви жорстко кодуєте номер порту, як у всіх посібниках з початку роботи, і розгортаєте в хмарі, конкретний номер порту може бути недоступним. Додаток ніколи не запускатиметься. Тож краще отримати номер порту, призначений екземпляром хмари, і запустити HTTP-сервер.

Збережіть файл і запустіть наведену нижче команду у вікні командного рядка (яке відкрито всередині папки):

node app.js

Після цього Node запустить сервер і покаже наступне повідомлення:

Тепер, якщо ми відкриємо // localhost: 3000 / у браузері, ми побачимо це:

Класно! Ми щойно створили базову програму NodeJs.

КРОК 2: Натисніть на GitHub

Тепер хочемо завантажити наш код на GitHub. Таким чином, ми зможемо редагувати наш код з будь-якого місця, а також миттєво розгортати внесені зміни до хмари.

Давайте створимо сховище на GitHub, натиснувши Нове сховище.

Дайте йому ім’я, деякий опис і натисніть Створити сховище:

GitHub створить сховище і дасть вам кілька команд, які ви можете запускати локально, щоб ви могли клонувати свою локальну папку зі своїм сховищем GitHub.

У командному рядку запустіть команди нижче в цій послідовності.

  1. Ініціалізуйте сховище Git на кореневому рівні:
git init

2. Додайте всі файли у свій локальний Git (інсценізація). Зверніть увагу на останню крапку:

git add . 

3. Внесіть зміни до вашого локального Git:

git commit -m “first commit”

4. Посилання на ваш репозиторій GitHub. (Будь ласка, змініть URL-адресу, щоб вказувати на ваше сховище.)

git remote add origin //github.com/rramname/MyCoolNodeApp.git

5. І натисніть на зміни:

git push — set-upstream origin master

Ви повинні побачити повідомлення, як показано нижче, у командному рядку.

Тепер, якщо ви відкриєте GitHub і оновите сховище, ви зможете побачити код.

КРОК 3: Розгортання на Heroku

Тепер настає розвага, тому що ви пережили все це: розгортання.

Якщо у вас немає рахунку в Heroku, ви можете відкрити безкоштовний, заповнивши цю просту форму. (І тут вам не потрібно надавати інформацію про кредитну картку :))

Після того, як ви підготуєте свій обліковий запис, увійдіть, використовуючи свої облікові дані.

Клацніть Новий у верхньому правому куті та виберіть “Створити нову програму”.

Дайте своїй програмі назву (це буде включено до загальнодоступної URL-адреси вашої програми) і натисніть Створити програму.

This step will take you to the dashboard of your app. Open Deploy tab and scroll to the “Deployment method” section.

Select GitHub as the method.

It will show a “Connect to GitHub” option where we can provide our GitHub repository. If you are doing it for the first time, Heroku will ask permission to access your GitHub account.

Here, you can search for your GitHub repository and click connect:

If it’s able to find and connect to the GitHub repository, the Deployment section will show up where you can select if you want Automatic Deployment (as soon as the changes are pushed to GitHub, Heroku will pick them up and deploy) or Manual Deployment.

Click Enable Automatic Deploys (because it’s less overhead for demo apps :) ). You can also select the GitHub branch if you need to, but for this demo we will deploy from the master branch.

Now we need to tell Heroku that our app is a NodeJs app. For that, we will need the NodeJs build back.

Open the Settings tab and locate Buildpacks and click “Add buildpack”.

Select nodejs from the options and click Save changes.

Now, go back to the Deploy tab, and click Deploy Branch at the bottom.

Heroku will take the code and host it. Open the Activity tab and there you can see the progress:

And that’s it!

Open the settings tab and scroll down to the Domains and certificates section. Here, you can see the URL of your app that was just deployed. Copy and paste that URL in the browser and… Hoooorah!!

We just created our own web application that can be accessed over the internet.

Great!

Please go ahead and share with others!

Happy Hosting :)