Для развертывания приложения, построенного с использованием фреймворков NestJS (backend) и Angular (frontend), на платформе Heroku, вам понадобится выполнить несколько шагов.
Шаг 1: Установка инструментов
Прежде всего, у вас должны быть установлены следующие инструменты:
1. Node.js и npm: установите последнюю стабильную версию Node.js с официального сайта (https://nodejs.org) и npm будет установлен вместе с ним.
2. Heroku CLI: установите Heroku CLI, следуя инструкциям на официальном сайте Heroku (https://devcenter.heroku.com/articles/heroku-cli).
Шаг 2: Создание репозитория
Создайте репозиторий для вашего проекта на требуемой платформе управления версиями, такой как GitHub или GitLab.
Шаг 3: Настройка приложения
Вам нужно настроить ваше приложение NestJS и Angular таким образом, чтобы они были готовы к развертыванию на Heroku.
1. NestJS:
- Установите пакет @nestjs/platform-heroku
в ваш проект NestJS. Этот пакет оптимизирует производительность приложения для развертывания на Heroku.
- В main.ts
добавьте такие строки перед await app.listen()
:
import { NestFactory } from '@nestjs/core'; import { NestExpressApplication } from '@nestjs/platform-express'; import { AppModule } from './app.module'; import { Logger } from '@nestjs/common'; import { get } from 'https'; const globalPrefix = 'api'; async function bootstrap() { const app = await NestFactory.create<NestExpressApplication>(AppModule); app.setGlobalPrefix(globalPrefix); const logger = new Logger('Bootstrap'); const port = process.env.PORT || 3000; // Enable CORS app.enableCors(); logger.log(`Listening on port ${port}`); await app.listen(port); } bootstrap();
- Создайте файл Procfile
в корневой папке проекта NestJS со следующим содержимым:
web: npm run start:prod
2. Angular:
- Убедитесь, что в файле package.json
скрипты сборки и запуска проекта установлены правильно:
"scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }
- В файле angular.json
измените опцию outputPath
в architect.build.options
, чтобы собранные файлы помещались в папку dist
вашего проекта NestJS:
"outputPath": "../backend/dist/public"
Шаг 4: Настройка конфигурации Heroku
Теперь, когда ваше приложение готово для развертывания, настройте Heroku для его размещения.
1. Запустите терминал и перейдите в корневую папку вашего проекта.
2. Введите команду heroku create
для создания нового приложения Heroku.
Шаг 5: Создание файла package.json
для сборки
В корневой папке вашего проекта создайте файл package.json
, который будет исполняться Heroku для сборки проекта. Пример содержимого файла:
{ "name": "my-angular-app", "version": "1.0.0", "main": "index.js", "dependencies": { "express": "^4.17.1", "path": "^0.12.7" }, "scripts": { "build": "cd backend && npm install && npm run build && cd .. && npm install && ng build --prod", "start": "node server.js" } }
Шаг 6: Создание файла server.js
В корневой папке вашего проекта создайте файл server.js
, который будет исполняться Heroku для запуска проекта. Пример содержимого файла:
const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'backend/dist/public'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'backend/dist/public/index.html')); }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`Server running on port ${port}`); });
Шаг 7: Загрузка кода на Heroku
Убедитесь, что вы авторизованы в Heroku CLI и вашем созданном репозитории.
1. Запустите терминал и перейдите в корневую папку вашего проекта.
2. Введите команду heroku git:remote -a <имя-вашего-приложения>
для связи вашего репозитория с Heroku.
3. Используйте команду git add .
для добавления всех файлов в репозиторий.
4. Используйте команду git commit -m "Initial commit"
для создания коммита.
5. Используйте команду git push heroku master
для загрузки кода на Heroku и запуска автоматической сборки и развертывания вашего приложения.
Шаг 8: Проверка работы приложения
После окончания развертывания приложения на Heroku, перейдите на страницу приложения в браузере. В адресной строке должен отобразиться URL вашего Heroku-приложения.
Вот и все! Теперь ваше приложение NestJS + Angular развернуто на платформе Heroku. Любые обновления вашего кода на репозитории будут автоматически развертываться приложением на Heroku.