Урок 49: Деплой JavaScript-приложений
Деплой (развертывание) — это процесс публикации приложения на сервере, чтобы его могли использовать конечные пользователи. В этом уроке мы рассмотрим основы деплоя JavaScript-приложений и популярные платформы для деплоя, такие как Heroku и Netlify.
Основы деплоя
Деплой JavaScript-приложений включает несколько этапов:
- Подготовка кода: Минификация и объединение файлов для уменьшения размера и ускорения загрузки.
- Выбор хостинга: Выбор платформы или сервера для размещения приложения.
- Конфигурация сервера: Настройка сервера для правильной обработки запросов и отдачи файлов.
- Загрузка файлов: Перенос файлов приложения на сервер.
Минификация и объединение файлов
Минификация и объединение файлов помогают уменьшить размер JavaScript и CSS файлов, что ускоряет загрузку и выполнение кода. Используйте инструменты, такие как Webpack или Parcel, для автоматизации этого процесса.
// Установка Webpack
npm install --save-dev webpack webpack-cli
// Конфигурация Webpack (webpack.config.js)
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production'
};
// Минификация и объединение файлов выполнены
Популярные платформы для деплоя
Рассмотрим две популярных платформы для деплоя JavaScript-приложений: Heroku и Netlify.
Heroku
Heroku — это облачная платформа, которая позволяет легко развертывать и управлять приложениями. Рассмотрим пример деплоя приложения на Heroku:
// Установка Heroku CLI
npm install -g heroku
// Вход в аккаунт Heroku
heroku login
// Создание нового приложения на Heroku
heroku create my-app
// Деплой приложения
git add .
git commit -m "Initial commit"
git push heroku master
// Приложение развернуто на Heroku
Netlify
Netlify — это платформа для хостинга статических сайтов и серверлесс-приложений. Рассмотрим пример деплоя приложения на Netlify:
// Установка Netlify CLI
npm install -g netlify-cli
// Вход в аккаунт Netlify
netlify login
// Создание нового сайта на Netlify
netlify init
// Деплой сайта
netlify deploy --prod
// Приложение развернуто на Netlify
Упражнения
Упражнение 1: Деплой простого статического сайта на Netlify
Создайте простой статический сайт с HTML, CSS и JavaScript. Разверните его на платформе Netlify, используя Netlify CLI.
Решение:
// Создание файлов сайта
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, Netlify!</h1>
<script src="script.js"></script>
</body>
</html>
// styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
// script.js
console.log('Hello, Netlify!');
// Деплой на Netlify
netlify init
netlify deploy --prod
// Сайт развернут на Netlify
Объяснение: Мы создали простой статический сайт и развернули его на платформе Netlify, используя Netlify CLI.
Упражнение 2: Деплой приложения на Heroku
Создайте простое Node.js приложение и разверните его на платформе Heroku, используя Heroku CLI.
Решение:
// Создание файлов приложения
// index.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
app.get('/', (req, res) => {
res.send('Hello, Heroku!');
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
// package.json
{
"name": "my-heroku-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "^4.17.1"
},
"engines": {
"node": "14.x"
}
}
// Деплой на Heroku
git init
heroku create my-heroku-app
git add .
git commit -m "Initial commit"
git push heroku master
// Приложение развернуто на Heroku
Объяснение: Мы создали простое Node.js приложение и развернули его на платформе Heroku, используя Heroku CLI.