Автор оригинала: Peter Gleeson.

Если вы новичок в мире веб-разработки, вы проведете много времени, узнав, как строить статические сайты с HTML, CSS и JavaScript.

Затем вы можете начать изучать, как использовать популярные рамки, такие как Реагировать , Vuejs или Угловой Отказ

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

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

Heroku Это облачная платформа, которая поддерживает ряд различных языков программирования и рамки.

Это не спонсируемый пост – конечно, есть много других решений, таких как:

Проверьте их все и посмотрите, что подходит для ваших нужд лучше всего.

Лично я нашел Heroku самым быстрым и легким, чтобы начать использовать «из коробки». Свободный уровень несколько ограничен с точки зрения ресурсов. Однако я могу уверенно рекомендовать его для тестирования.

Этот пример пройдет простой сайт, использующий Express Server. Вот шаги высокого уровня:

Настройка с Heroku, Git, NPM
Создать сервер Express.js
Создание статических файлов
Развертывание Героку

Это должно занять около 25 минут (или дольше, если вы хотите провести больше времени на статические файлы).

Эта статья предполагает, что вы уже знаете:

Некоторые HTML, CSS и JavaScript основные основы
Базовое использование командной строки
Гит для новичков для контроля версий

Вы можете найти весь код в Этот репозиторий Отказ

Установка

Первый шаг в любом проекте – настроить все инструменты, которые вы знаете, вам понадобится.

Вам нужно будет иметь:

Узел и NPM установлены на вашем локальном компьютере (прочитайте, как это сделать здесь )
Git установлен (прочитайте это руководство )
Установлена Heroku CLI ( Вот как это сделать )

1. Создайте новый каталог и инициализируйте репозиторий Git

Из командной строки создайте новый каталог проекта и перейдите в него.

$ mkdir lorem-ipsum-demo
$ cd lorem-ipsum-demo

Теперь вы находитесь в папке проекта, инициализируете новый репозиторий Git.

⚠️ Этот шаг важен, потому что Heroku полагается на Git Для развертывания кода с локальной машины на облачные серверы ⚠️

$ git init

В качестве последнего шага вы можете создать файл readme.md для редактирования на более позднем этапе.

$ echo "Edit me later" > README.md

2. Войдите в Heroku CLI и создайте новый проект

Вы можете войти в Heroku, используя Heroku CLI (интерфейс командной строки). Вам нужно будет иметь бесплатную учетную запись Heroku, чтобы сделать это.

Здесь здесь два варианта. По умолчанию для Heroku позволит вам войти через веб-браузер. Добавление . -Я Флаг позволяет войти через командную строку.

$ heroku login -i

Теперь вы можете создать новый проект Heroku. Я позвонил мою Lorem-Ipsum-Demo Отказ

$ heroku create lorem-ipsum-demo

Называть ваш проект:

Heroku будет генерировать случайное имя для вашего проекта, если вы не укажете один в команде.
Имя будет образовывать часть URL-адреса, которую вы можете использовать для доступа к вашему проекту, поэтому выберите тот, который вам нравится.
Это также означает, что вам нужно выбрать уникальное имя проекта, которое никто другой не использовал.
Можно переименовать ваш проект позже (так что не беспокойтесь о том, чтобы получить идеальное имя прямо сейчас).

3. Инициализируйте новый проект NPM и установите Express.js

Далее вы можете инициатировать новый проект NPM, создав файл package.json. Используйте команду ниже, чтобы сделать это.

Эта шаг имеет решающее значение. Heroku полагается на вас, предоставляя файл Package.json, который будет знать, что это проект Node.js, когда он создает ваше приложение ⚠️

$ npm init -y

Далее Установить Express Отказ Express – это широко используемая серверная структура для Nodejs.

$ npm install express --save

Наконец, вы готовы начать кодирование!

Написание простого экспресс-сервера

Следующим шагом является создание файла под названием app.js , который проходит экспресс-сервер локально.

$ touch app.js

Этот файл будет точкой записи для приложения, когда он готов. Это означает, что одна команда необходима для запуска приложения:

$ node app.js

Но сначала вам нужно написать код в файле.

4. Отредактируйте содержимое App.js

Открыть app.js. В вашем любимом редакторе. Напишите код, показанный ниже и нажмите «Сохранить».

// create an express app
const express = require("express")
const app = express()

// use the express-static middleware
app.use(express.static("public"))

// define the first route
app.get("/", function (req, res) {
  res.send("Hello World!")
})

// start the server listening for requests
app.listen(process.env.PORT || 3000, 
	() => console.log("Server is running..."));

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

Первые две строки просто требуют модуля Express и создают экземпляр приложения Express.
Следующая строка требует использования Express.Static промежуточное ПО. Это позволяет вам подавать статические файлы (например, HTML, CSS и JavaScript) из указанного вами каталога. В этом случае файлы будут поданы из папки, называемой публичный Отказ
Следующая строка использует app.get () определить маршрут URL. Любые запросы URL к корневому URL-адресу будут отвечать на простое HTML-сообщение.
Заключительная часть начинается сервер. Это либо выглядит, чтобы увидеть, какой порт Heroku будет использовать или по умолчанию до 3000, если вы используете локально.

Использование Process.env. Порт 3000

Если вы сохраните app.js и запустите сервер с:

$ node app.js

Вы можете посетить localhost: 3000 В вашем браузере и посмотрите на себя сервер запущен.

Создайте свои статические файлы

Следующим шагом является создание ваших статических файлов. Это файлы HTML, CSS и JavaScript, которые вы будете подавать в зависимости от того, когда пользователь посещает ваш проект.

Помните в app.js Вы сказали Express.Static промежуточное программное обеспечение для обслуживания статических файлов из публичный каталог.

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

$ mkdir public
$ cd public
$ touch index.html styles.css script.js

5. Изменить файл HTML

Открыть index.html В вашем предпочтительном текстовом редакторе. Это будет основная структура страницы, которую вы будете служить вашим посетителям.

Пример ниже создает простую целевую страницу для Lorem Ipsum Генератор, но вы можете быть таким же креативным, как вы любите здесь.

Lorem Ipsum generator

How many paragraphs do you want to generate?

6. Отредактируйте файл CSS

Далее UP редактирует файл CSS styles.csss Отказ Убедитесь, что это связано в вашем HTML-файле.

CSS ниже предназначен для примера LOREM IPSUM. Но опять же, не стесняйтесь быть таким же креативным, как вы хотите.

h1 {
	font-family: 'Alegreya' ;
}

body {
	font-family: 'Source Sans Pro' ;
	width: 50%;
	margin-left: 25%;
	text-align: justify;
	line-height: 1.7;
	font-size: 18px;
}

input {
	font-size: 18px;
	text-align: center;
}

button {
	font-size: 18px;
	color: #fff;
}

#generate {
	background-color: #09f;
}

#copy {
	background-color: #0c6;
}

7. Отредактируйте файл JavaScript

Наконец, вы можете редактировать файл JavaScript Script.js Отказ Это позволит вам сделать вашу страницу более интерактивной.

Ниже приведен код определяет две основные функции для генератора LOREM IPSUM. Да, я использовал Jquery – Это быстро и легко работать.

$("#generate").click(function(){
	var lorem = $("#lorem");
	lorem.html("");
	var quantity = $("#quantity")[0].valueAsNumber;
	var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"];
	for(var i = 0; i < quantity; i++){
		lorem.append(""+data[i]+"");
	}
})

$("#copy").click(function() {
	var range = document.createRange();
	range.selectNode($("#lorem")[0]);
	window.getSelection().removeAllRanges();
	window.getSelection().addRange(range);
	document.execCommand("copy");
	window.getSelection().removeAllRanges();
	}
)

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

Развертывание вашего приложения

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

Тем не менее, есть еще пара большего.

8. Создать ProCFile

Heroku понадобится Proffile, чтобы узнать, как запустить ваше приложение.

PRECFILE – это «файл процесса», который говорит Heroku, какую команду запустить, чтобы управлять данным процессом. В этом случае команда скажет Heroku, как начать свой сервер, слушая в Интернете.

Используйте команду ниже, чтобы создать файл.

⚠️ Это важный шаг, потому что без Proffile Heroku не может поставить свой сервер онлайн. ⚠ ️

$ echo "web: node app.js" > Procfile

Обратите внимание, что Procfile не имеет расширения файлов (например, «.txt», “.json”).

Кроме того, посмотрите, как команда Узел App.js Тот же используется локально для запуска вашего сервера.

9. Добавьте и совершайте файлы в Git

Помните, что вы инициировали репозиторий Git при настройке. Возможно, вы добавляете и совершаете файлы, как вы ушли.

Перед развертыванием Heroku убедитесь, что добавьте все соответствующие файлы и совершите их.

$ git add .
$ git commit -m "ready to deploy"

Последний шаг – подтолкнуть к вашу генеральную ветку Heroku.

$ git push heroku master

Вы должны увидеть командную строку распечатать нагрузку на нагрузку в виде Heroku, и развертывает ваше приложение.

Линия, чтобы искать: Проверка развертывания ... сделано.

Это показывает, что ваша сборка была успешной.

Теперь вы можете открыть браузер и посетить ваш-Project-Name.herokuapp.com. Ваше приложение будет размещено в Интернете для всех для посещения!

Быстрое повторение

Ниже приведены следующие шаги для развертывания простого экспресс-приложения в Heroku:

Создайте новый каталог и инициализируйте репозиторий Git
Войдите в Heroku CLI и создайте новый проект
Инициализируйте новый проект NPM и установите Express.js
Отредактируйте содержимое App.js
Отредактируйте статические файлы HTML, CSS и JavaScript
Создать ProCFile
Добавьте и запрашивайте Git, затем нажмите на свою ветку Heroku Master

Вещи, чтобы проверить Если ваше приложение не работает

Иногда, несмотря на лучшие намерения, учебники в Интернете не работают точно так, как вы ожидали.

Следы ниже должны помочь отладить некоторые общие ошибки, которые вы можете столкнуться:

Вы инициализировали Git Repo в вашей папке проекта? Проверьте, бежали ли вы Git init ранее. Heroku полагается на Git для развертывания кода с локальной машины.
Вы создали файл package.json? Проверьте, бежали ли вы NPM init -y ранее. Heroku требует от public.json file для распознавания Это проект Node.js.
Работает сервер? Убедитесь, что ваш ProCFile использует правильное имя файла для запуска сервера. Проверьте у вас Веб: Node App.js И не Веб: Узел index.js Отказ
Heroku знает, какой порт слушать? Проверьте, вы использовали app.listen (process.env. Порт 3000)
В вашем файле App.js.

Спасибо за чтение – если вы сделали это далеко, вы можете захотеть Оформить заказ готовой версии демонстрационного проекта.

Оригинал: “https://www.freecodecamp.org/news/how-to-deploy-your-site-using-express-and-heroku/”