Почему вы должны это прочитать
Каждый программист должен знать основы создания веб-приложений, ведь каждое устройство подключено к Интернету. 👽
Эта статья научит вас, как создать веб-сайт с помощью Node.js, Express и Heroku за 5 минут!
Если вы уже знаете, как это сделать:вы можетеоткрыть некоторые скрытые жемчужины 💎 в этой статье.
вступление
В четвертом уроке мы рассмотрим «Начало работы с Heroku с помощью Node.js».
https://www.heroku.com/
https://expressjs.com/
https://nodejs.org
Конечный результат
В конце этого урока у вас будет работающий веб-сайт в облаке, доступный через URL-адрес.
Исходный код
Исходный код этого урока можно найти по адресу https://github.com/programming-online-courses/lbs-to-kg/tree/lesson4-web-server/server.
| Задача 1 | Настроить локальный веб-сервер
Цель:
👉 Создайте простейший веб-сервер с помощью express.js.
Определение. Сервер — это часть программного обеспечения, обеспечивающая функциональность для других программ, называемых клиентами. Эта архитектура называется моделью клиент-сервер. Подробнее читайте в Википедии
Определение. Express — это минималистичная и гибкая платформа веб-приложений Node.js, предоставляющая надежный набор функций для веб-приложений и мобильных приложений.
Пошаговое руководство
1.
Давайте разделим серверную и клиентскую логику. Создайте новую папку./server
2.
Инициализируйте его с помощью package.json и создайте 2 новые папки s/server/public и /server/src
3.
Создайте новый файл your-project/server/src/main.js Это будет основной файл для вашего сервера.
4.
npm install --save express
5.
Окончательная структура папок проекта должна быть примерно такой
6.
Украсть код hello world с https://expressjs.com/en/starter/hello-world.html
//main.js
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
Обновить скрипт package.json start
"scripts": {
...
"start": "node src/main.js"
},
Проверьте, работает ли ваш веб-сервер: npm run start
Дошли до http://localhost:3000 Там должен быть текст: Hello world.
Если это не сработало, вы облажались! Напишите комментарий, я вам помогу
7.
Успех! Теперь вы знаете, как создать базовый веб-сервер. Разве это не было легко!? — Каждый может научиться программировать! 🏫
| Задача 2 | Не красивое зрелище! Сделать сайт красивым.
Цель:
👉 Давайте обслуживать статические файлы, такие как index.html, index.css и gif.
Пошаговое руководство
1.
Создать /server/public/index.html файл
Что-то простое вроде этого поможет:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Amazing</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
2.
Обновить main.js
//main.js
const express = require('express')
const app = express()
const port = 3000
app.use('/', express.static("public"))
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
Пояснение:
Это -› app.use(‘/’, express.static(“public”)) делает доступными все ресурсы в общей папке. Вот так:
http://localhost:3000/index.html http://localhost:3000/index.css http://localhost:3000/yourImage.jpg
Если бы вы использовали app.use('/SOMETHING_ELSE', express.static(“public”)), все эти ресурсы были бы доступны следующим образом:
http://localhost:3000/SOMETHING_ELSE/index.html http://localhost:3000/SOMETHING_ELSE/index.css http://localhost:3000/SOMETHING_ELSE/yourImage.jpg
Полезно знать. По умолчанию браузер перенаправляетhttp://localhost:3000 на http://localhost:3000/index.html. Вот почему http://localhost:3000 отображает файл .html.
3.
Создать public/index.css Добавить любой стиль, который вы хотите. Я написал следующее:
// index.css
body {
text-align: center;
}
a {
display: block;
font-size: 25px;
margin-top: 25px;
}
Обновление public/index.html Например, я связал файл CSS и добавил изображение.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<h1>Make sure you give a clap</h1>
<img src="/clap_gif3.gif"/>
<a href="https://medium.com/@premiumtechnologyacademy">
@premiumtechnologyacademy
</a>
</body>
</html>
Совет: Убедитесь, что вы загрузили изображение в папку /public, если вы хотите иметь к нему доступ внутри вашего index.html
4.
Теперь если вы запустите npm run start и откроете http://localhost:3000, то у вас должно получиться что-то вроде этого:
5.
Ура! Теперь вы знаете, как создать базовый веб-сайт и веб-сервер на локальном хосте. 😋
Далее, давайте оживим!
| Задача 3 | На Луну! Развернуть в облаке
Цель:
👉 Разверните свой сайт в облаке Heroku
Пошаговое руководство
Чтобы заставить его работать в Heroku, нам нужно внести несколько изменений.
1.
Во-первых, давайте добавим переменную PORT
const port = process.env.PORT || 3000;
Нам это нужно, потому что Heroku будет решать, на каком ПОРТЕ будет работать наш веб-сервер. Это означает, что мы не можем жестко закодировать номер порта!
2.
Heroku ищет package.json в корневой папке. Если у вас несколько папок, убедитесь, что у вас есть одна package.json в корневой папке. Как показано ниже:
3.
В этом файле lbs-to-kg/package.json у вас должны быть скрипты start и install.
scripts: {
"start": "node server/src/main.js",
"install": "npm run install:server",
"install:server": "npm install --prefix server",
...
}
Сценарий установки связан с тем, что нам нужно установить зависимости. Heroku по умолчанию ищет скрипт install в package.json.
После этого Heroku запустит скрипт start.
4.
Убедитесь, что у вас есть правильные пути в main.js!
npm run start и npm run server/start не эквивалентны, их относительные пути различны.
Это означает, что вам нужно обновить main.js, чтобы наш код использовал __dirname.
Объяснение: __dirname – это переменная среды Node
Следующий код будет работать:
...
const rootPath = "../";
const uiHtmlPath = path.resolve(__dirname, rootPath, 'public', 'index.html');
const cssAndGifsFiles = path.resolve(__dirname, rootPath, 'public')
app.use("/static", express.static(cssAndGifsFiles))
app.get("/", (req, res) => {
res.sendFile(uiHtmlPath);
})
...
Теперь вы можете запустить сервер из двух мест:
C:\...\lbs-to-kg>npm run start
и
C:\...\lbs-to-kg\server>npm run start
4b.
Убедитесь, что у вас есть правильные пути в index.html Например
//index.html <link rel="stylesheet" href="/static/index.css">
Нам пришлось добавить «static» в путь, потому что мы использовали
//main.js
app.use("/static", express.static(cssAndGifsFiles))
5.
Перейдите на https://www.heroku.com и зарегистрируйтесь
Я не получаю от них денег. Я был бы чертовски богат, если бы они давали мне комиссионные.
6.
Создайте новое приложение, вы можете сделать это, нажав «Создать».
7.
Вам необходимо установить интерфейс командной строки Heroku (CLI). Подробнее читайте на https://devcenter.heroku.com/articles/heroku-cli
После установки войдите в систему, используя heroku login
8.
У вас также должен быть установлен git, сделайте это.
9.
Развернуть приложение
$ cd YOUR_PROJECT_NAME_IN_YOUR_COMPUTER/ $ git init $ heroku git:remote -a YOUR_APP_NAME_AT_HEROKU
Вы можете прочитать больше о развертывании на https://dashboard.heroku.com/apps/[ВАШЕ_ИМЯ_ПРИЛОЖЕНИЯ_HERE]/deploy/heroku-git
Совет. Убедитесь, что вы изменили URL-адрес, чтобы он соответствовал названию вашего приложения, иначе эта ссылка не будет работать
10.
Как только это будет сделано, откройте свой сайт. Мой https://five-minutes-app.herokuapp.com/
Совет. Если вы используете БЕСПЛАТНУЮ версию, поначалу она может медленно выходить из спящего режима. Но если вы перейдете на Hobby, то он будет молниеносным.
11.
Выгода! 💰
Советы:
Совет 1. Используйте heroku logs для получения информации о том, что происходит в облаке Heroku.
Совет 2. Если это не сработало, обязательно оставьте комментарий! Иногда студенты путаются в конфигурации проекта, и он не развертывается. Я помогу.
Совет 3. Убедитесь, что вы находитесь в ветке master, прежде чем отправлять в heroku
Совет 4. Если вы хотите использовать видеорешение, обязательно хлопните в ладоши или ответьте! Спасибо! :)
Исходный код
Исходный код этого урока можно найти по адресу https://github.com/programming-online-courses/lbs-to-kg/tree/lesson4-web-server/server.
Резюме
Спасибо за внимание! Теперь вы знаете, как создать веб-сервер и как развернуть его в облаке Heroku!
Любовь ❤️
Кстати: разбейте эту кнопку хлопка, спасибо! ;)
Вы можете задавать мне вопросы в twitter/@codegodzilla. Возможно, я даже проверю ваш код, если у меня будет время.
Также посетите мой веб-сайт, чтобы найти больше интересного контента codegodzilla.com.
