Как да разположите приложение NodeJS в Heroku от Github (без да инсталирате Heroku на вашата машина)

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

И за щастие, сега при всички доставчици на облак споделянето на вашата работа е задължително и е основна стъпка по вашето пътуване.

В тази демонстрация ще разгледаме как да разположите вашето страхотно приложение NodeJS в Heroku. До края на тази демонстрация ще имаме основно приложение Hello World, работещо в публично достояние, до което всеки може да има достъп.

За тази демонстрация предполагам, че имате Node, инсталиран на вашата машина. Ако не, можете да изтеглите от уебсайта Nodejs.org. Стъпките са прости и могат лесно да бъдат намерени онлайн.

Ще ви е необходим и акаунт в GitHub, за да хоствате нашия код онлайн. Ако нямате акаунт, можете да си създадете безплатно на Github.com. С безплатен акаунт можете да създавате неограничени публични хранилища. Ще използваме системата за контрол на версиите Git, за да прокараме промените си в Github

СТЪПКА 1: Създайте това страхотно приложение

Сега нека създадем онова Cool Node App, за което сте мислили.

Създайте папка на вашата локална машина и му дайте име (по ваш избор), кажете 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, можете да отворите безплатен, като попълните този прост формуляр. (И тук не е необходимо да предоставяте информация за кредитна карта :))

След като подготвите акаунта си, влезте с вашите идентификационни данни.

Щракнете върху New в горния десен ъгъл и изберете „Създаване на ново приложение“.

Дайте име на приложението си (това ще бъде включено в публичния 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 :)