Как «задеплоить» на heroku nestjs + angular?

от
prokoding.ru > Angular > Как «задеплоить» на heroku nestjs + angular?

Для развертывания приложения, построенного с использованием фреймворков NestJS (backend) и Angular (frontend), на платформе Heroku, вам понадобится выполнить несколько шагов.

Шаг 1: Установка инструментов
Прежде всего, у вас должны быть установлены следующие инструменты:

  1. Node.js и npm: установите последнюю стабильную версию Node.js с официального сайта (https://nodejs.org) и npm будет установлен вместе с ним.
  1. 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
  1. 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.