Пошаговое руководство с разными подходами

Есть так много способов упаковать и отправить приложение Angular в производство. Существуют бессерверные и традиционные архитектуры. В традиционной архитектуре у нас есть разные способы: Nodejs, Java, Python и т. Д.

В этом посте мы собираемся обсудить, как мы можем упаковать приложение Angular с помощью серверной части nodejs. Наконец, мы развернем это упакованное приложение на AWS Elastic Beanstalk.

  • Предварительные требования
  • Пример проекта
  • Внедрение вручную
  • С помощью Webpack
  • Упаковка с помощью Gulp
  • С Docker
  • Развертывание на AWS Elastic Beanstalk
  • Резюме
  • Заключение

Предварительные требования

Посмотрим, каковы все предпосылки для этого. Вы можете перейти по этим ссылкам, если хотите изучить эти инструменты самостоятельно.

Серверная технология

Угловой

Редакторы

Сборка / выполнение задач

Контейнерная техника

Если вы новичок в этом и хотите узнать, как создать приложение Angular с бэкэндом Nodejs, вот пост для вас. Вы можете пропустить это, если вы уже знакомы с этим.



Как разработать и собрать приложение на Angular с помощью NodeJS
Узнайте, как вы разрабатываете и создаете на примере проекта medium.com



Пример проекта

Это простой проект, демонстрирующий разработку и запуск приложения Angular с помощью NodeJS. У нас есть простое приложение, в котором мы можем добавлять пользователей, подсчитывать и отображать их сбоку, а также извлекать их, когда захотите.

Вот ссылка на этот проект на Github. Вы можете клонировать его и запустить на своем компьютере.

// clone the project
https://github.com/bbachi/angular-nodejs-example.git// install and start the project
npm install
npm start

Внедрение вручную

В этой ручной реализации мы создаем приложение Angular, помещаем соответствующий код в одну папку и запускаем или развертываем приложение. В качестве первого шага нам нужно создать приложение Angular, и все статические ресурсы и созданные файлы будут помещены в папку dist.

// change to my-app directory
cd my-app
// build the app
npm run build

Все встроенные и статические ресурсы помещаются в эту папку dist / angular-nodejs-example.

После создания приложения все, что вам нужно сделать, это создать отдельную папку и поместить в нее все, что связано с nodejs. Давайте создадим папку с именем angular-nodejs и поместим в нее папку server.js, package.json и dist.

Запустить приложение

Давайте запустим приложение, импортировав всю папку angular-nodejs в редактор VSCode и установив зависимости для сервера.

// install dependencies
npm install
// run the app
npm start (node server.js)

Приложение работает на серверном порту 8081.

Недостатки

Все описанные ниже шаги следует выполнять вручную, и это трудоемкие задачи.

  • Нам нужно собрать код на Angular вручную
  • Мы должны поместить все встроенные файлы в отдельную папку
  • Нам нужно установить зависимости узлов перед запуском приложения.

С помощью Webpack

В приведенной выше реализации, как только мы поместим все в папку, нам нужно установить зависимости для сервера nodejs для запуска приложения. Это дополнительный шаг, который нам нужно сделать перед запуском приложения.

Мы можем пропустить этот шаг с помощью webpack. Когда мы создаем код Angular, Angular CLI внутренне использует веб-пакет для сборки и объединения всего кода в несколько файлов. Мы можем использовать то же самое для сервера nodejs.

Во-первых, нам нужно установить веб-пакет глобально и в проекте.

// install webpack
npm install webpack -g
npm install webpack --save

Нам нужен webpack.config.js в корневой папке, поскольку веб-пакет ищет этот файл. Вот файл. У нас есть файл входа и файл вывода, и он помещается в корневую папку.

Давайте создадим и соберем его. Все, что вам нужно сделать, это запустить эту команду webpack, и веб-пакет будет искать этот файл с именем webpack.config.js и построить весь код сервера и поместить его в один файл. называется server.bundle.js. Вот измененный файл package.json.

Если имя файла отличается от файла webpack.config.js, вам необходимо передать это имя файла с помощью команды webpack webpack <filename>. После создания кода сервера все, что вам нужно, это файл server.bundle.js. Вам даже не нужны никакие пакеты, package.json и т. Д.

При этом мы можем пропустить шаг npm install (установка зависимостей), а вы можете просто запустить node server.bundle.js, и вы увидите, что приложение работает на порту 8081.

Недостатки

Единственное, что мы решили - это пропустить установку зависимостей узлов. Есть еще кое-что, что мы делаем здесь вручную.

  • Нам нужно собрать код Angular вручную
  • Мы должны поместить все встроенные файлы в отдельную папку

Упаковка с помощью Gulp

В приведенных выше разделах мы видели ручные шаги, и эти шаги необходимо исключить. Мы можем добиться полной автоматизации залпом. Все следующие шаги можно автоматизировать с помощью глотка.

  • Очистите каталог, если он существует
  • Создайте каталог, если он не существует, чтобы разместить всю производственную сборку
  • Сборка кода Angular с помощью ng build
  • Поместите код Angular в производственный каталог
  • Соберите серверный код с помощью веб-пакета
  • Поместите код сервера в производственный каталог
  • Наконец, заархивируйте весь код.

Давайте установим все необходимые пакеты gulp для выполнения вышеуказанных задач.

// install gulp globally
npm install gulp -g
// install as dev dependency
npm install gulp gulp-zip fancy-log del webpack-stream --save-dev
// gulp              - core library
// gulp-zip          - zipping the code
// fancy-log         - logging
// del               - deleting files/folders
// webpack-stream    - Build with webpack

когда вы запускаете команду gulp, она ищет файл gulpfile.js и выполняет все задачи, упомянутые в этом файле. Мы можем выполнять эти задачи по очереди или параллельно с помощью этих модулей series, parallel. Вот файл gulpfile.js.

Фактически вы можете видеть, что некоторые задачи выполняются одна за другой, а другие - параллельно. Например, копирование кода Angular и кода сервера сборки (строка 67) может выполняться параллельно, потому что между ними нет зависимости. После установки gulpfile.js все, что вам нужно сделать, это выполнить эту команду gulp.

С Docker

До сих пор мы видели разные реализации. Все эти реализации включают объединение всех связанных файлов и их упаковку. Для этого мы использовали разные инструменты и комплекты. Но с помощью Docker мы помещаем все файлы в файловую систему Docker и создаем из нее образ Docker.

Вот полный пост о том, как мы можем упаковать с помощью Docker.



Докеризация приложения Angular с помощью серверной части NodeJS
Узнайте, как выполнить Dockerize и сделать его развертываемым образом medium.com



Развертывание на AWS Elastic Beanstalk

Упаковка вашего приложения завершена, теперь пора развернуть его на серверах. Вы можете развернуть этот пакет на разных платформах или серверных архитектурах, но рассмотрение всего этого выходит за рамки данной статьи. Итак, я просто хочу привести один пример развертывания этого приложения после поста ниже, если вы хотите узнать, как можно развернуть это упакованное приложение на AWS Elastic Beanstalk.



AWS - Развертывание Angular с приложением NodeJS на Elastic Beanstalk
Пошаговое руководство с примером проекта medium.com



Резюме

  • В традиционных архитектурах существует множество способов упаковать и отправить приложение Angular в производство.
  • Если вы новичок в приложении Angular с серверной частью nodejs, пожалуйста, перейдите по этой ссылке, чтобы ознакомиться с ним.
  • При ручной реализации мы должны собрать код Angular, разместить соответствующий файл и вручную заархивировать код.
  • Все эти задачи мы можем автоматизировать с помощью глотка.
  • Angular CLI использует внутренний веб-пакет для создания кода Angular. То же самое мы можем использовать и с кодом NodeJS. Таким образом, мы можем пропустить установку всех зависимостей.
  • Docker - это еще один способ упаковать ваше приложение, но вам необходимо запустить эти образы Docker на некоторых платформах контейнеров, таких как Docker, EKS, ECS и т. Д.
  • Всегда используйте многоступенчатые сборки при создании образов Docker, чтобы избежать ненужных файлов, упакованных в вашу сборку.
  • Всегда автоматизируйте задачи с помощью каких-либо инструментов, таких как gulp или grunt.
  • Elastic Beanstalk от AWS - это более простой и быстрый способ развернуть упакованное приложение и протестировать его.

Заключение

Всегда автоматизируйте упаковку вашего приложения. Таким образом вы сэкономите много времени и станете более продуктивным.