01:10
Урок 49: Деплой JavaScript-приложений

Курс по программированию на JavaScript

Урок 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.

Категория: JavaScript | Просмотров: 8 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: