Создание образа приложения React JS с помощью Packer и Ansible в облаке Alibaba

В этом руководстве мы поговорим об использовании Packer для создания образа машины в экземпляре Alibaba Cloud ECS и Ansible для написания того, что мы хотим, чтобы наш образ машины был.

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

Ансибль — это программное обеспечение с открытым исходным кодом, которое автоматизирует подготовку программного обеспечения, управление конфигурацией и развертывание приложений. Ansible подключается через SSH, удаленный PowerShell или через другие удаленные API.

В этом руководстве мы поговорим об использовании Packer для создания образа машины в облаке Alibaba. Служба эластичных вычислений (ECS), и Ansible для написания того, что мы хотим, чтобы наш образ машины был. Мы будем создавать изображение, которое имеет реагировать JS применение и узлы настраивать. Образ машины в DevOps — это единая статическая единица, содержащая предварительно настроенную операционную систему и установленное программное обеспечение, которое используется для быстрого создания новых работающих машин. Форматы образов машин меняются для каждой платформы.

Предпосылки

Вам не нужно быть экспертом, чтобы следовать этому руководству. Все, что вам нужно, это иметь учетную запись на Облако Алибаба и Access key. Нажмите на эту ссылку, чтобы узнать, как создать ключ доступа в облаке Alibaba.

Шаг 1: Установите упаковщик

Чтобы установить упаковщик в нашей системе, мы можем следовать официальная страница установки для упаковщика или используйте менеджер пакетов, шоколадный для окон и доморощенный для макОС. Использование менеджера пакетов избавляет нас от необходимости добавлять переменные среды в path.

Чтобы установить упаковщик на окна с помощью шоколадного

  1. Установите шоколадный менеджер пакетов. Чтобы установить шоколад, откройте cmd от имени администратора и вставьте приведенную ниже команду, чтобы установить диспетчер пакетов шоколада.
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString(' && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
  1. убедитесь, что шоколад установлен, выполнив эту команду choco -v. вы должны получить установленную версию шоколада
  2. Установите упаковщик, выполнив команду ниже
choco install packer
  1. Чтобы проверить установку упаковщика, запустите
packer -v
  1. Вы должны получить установленную версию Packer.

Чтобы установить упаковщик на MacOS с помощью доморощенного

  1. Установите homebrew, если он у вас еще не установлен. Чтобы установить homebrew на macOS, откройте терминал и вставьте команду ниже
/usr/bin/ruby -e "$(curl -fsSL
  1. Установите упаковщик, выполнив команду ниже
brew install packer
  1. Чтобы проверить установку упаковщика, запустите
packer -v
  1. Вы должны получить установленную версию Packer.

Шаг 2. Создайте образ машины нашего React-приложения

Чтобы создать образ машины, нам нужно создать файл шаблона. Файл шаблона используется для определения того, какое изображение мы хотим создать. Файл шаблона находится в JSON формате и имеет другой набор ключей, настраивающих различные компоненты Packer.

  1. Создайте файл шаблона с именем пример.json и вставьте код ниже
{
  "variables": {
    "access_key": "{{env `ALICLOUD_ACCESS_KEY`}}",
    "secret_key": "{{env `ALICLOUD_SECRET_KEY`}}"
  },
  "builders": [{
    "type": "alicloud-ecs",
    "access_key": "{{user `access_key`}}",
    "secret_key": "{{user `secret_key`}}",
    "region": "us-west-1",
    "image_name": "ReactJS-Application",
    "instance_type": "ecs.t5-lc2m1.nano",
    "image_force_delete":"true",
    "source_image": "ubuntu_16_0402_32_20G_alibase_20180409.vhd",
    "io_optimized":"true",
    "ssh_username": "root",
    "internet_charge_type": "PayByTraffic"
  }],
  "provisioners": [{
    "type": "shell",
    "script": "installAnsible.sh"
   },{
   "type": "ansible",
  "playbook_file": "playbook.yml"
 }]
}

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

строители Раздел содержит массив объектов JSON, настраивающих конкретный билдер. Сборщик — это компонент упаковщика, который отвечает за создание машины и превращение этой машины в образ.

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

  1. Экспорт ALICLOUD_ACCESS_KEY а также ALICLOUD_SECRET_KEY выполнив команду ниже в вашем терминале
export ALICLOUD_SECRET_KEY="YOUR_ALICLOUD_ACCESS_KEY" export ALICLOUD_SECRET_KEY="YOUR_ALICLOUD_SECRET_KEY"
  1. Создайте новый файл Ansible с именем playbook.yml и вставьте код ниже. пример.json а также playbook.yml должны быть созданы в корневом каталоге.
---
 - hosts: all
   become: true

   vars:
     NODEJS_VERSION: 8
     domain: "localhost"

   tasks:
   - name: Add gpg key for node
     apt_key:
       url:  "
       state: present
   - name: Add nodejs LTS to apt repository
     apt_repository:
       repo: "deb  NODEJS_VERSION }}.x {{ ansible_distribution_release }} main"
       state: present
       update_cache: yes
   - name: Install nodejs
     apt:
       name: nodejs
       state: present
   - name: Setup React application
     shell:
        cmd: |
          npx create-react-app my-app # Setup our react application
          cd /root/my-app
          npm install -g pm2   # Install Pm2, A nodejs process manager which enables us to run our application in the background process
   - name: Install nginx
     apt:
       name: nginx
       state:  present
       update_cache: yes
   - name: Remove nginx default configuration
     file:
       path: /etc/nginx/sites-enabled/default
       state: absent
   - name: enable reverse proxy # This enables us to use the public IP without passing in the port on our web page
     shell:
       cmd: |
         cat > /etc/nginx/sites-available/my-app <<EOF
         server {
           listen 80;
           server_name {{ domain }};
           location / {
             proxy_pass '
           }
         }
         EOF
   - name: create symlinks for nginx configuration # make sure the nginx configuration files are always the same.
     file:
       src:  /etc/nginx/sites-available/my-app
       dest: /etc/nginx/sites-enabled/my-app
       state: link
     notify:
     - restart nginx
   handlers:
     - name: restart nginx # restart nginx service
       service:
         name: nginx
         state: restarted
  1. Чтобы проверить наш файл шаблона, запустите packer validate example.json. Это гарантирует отсутствие ошибок, таких как синтаксическая ошибка, в нашем файле шаблона.
  2. Бежать packer build example.json для создания нашего образа ReactJS.

Шаг 3: Запустите экземпляр с нашим изображением React

Чтобы создать экземпляр с использованием образа, который мы создали ранее, выполните следующие действия.

  1. Вход в облаке Alibaba приставка

  2. Нажмите Elastic Compute Service на боковой панели навигации панели.

  3. Нажмите на кнопку с описанием Create Instance или на эту ссылка на сайт создать экземпляр

  4. В базовых конфигурациях выполните следующие действия:

  5. Для Billing Method нажмите на Pay-As-You-Go

  6. Для Regionщелкните раскрывающийся список и выберите US West 1 (Silicon Valley)

  7. Для Instance Typeнажмите на Entry-level (Shared)

  8. Для Imageнажми на Custom Image кнопка. Под Custom Imageщелкните раскрывающееся меню и выберите созданное нами изображение, которое ReactJS-Application.

  9. Нажми на Next: Networking кнопка

  10. Для второго шага, т. Сеть следуйте инструкциям ниже

  11. Для Сеть ` щелкните раскрывающееся меню VPC и выберите VPC по умолчанию.

  12. Для Группа безопасности раздел, нажмите на Зайти в настройки порта установить порт для нашего приложения.

  13. Нажми на Добавить правило группы безопасности и установить Диапазон портов до 80 и Объекты авторизации до 0.0.0.0/0. Повторите этот же процесс, но установите Диапазон портов до 3000.
    Порт 80 предназначен для HTTP-запроса, а порт 300 – это порт, на котором работает наше реагирующее приложение.

  14. После настройки группы безопасности нажмите кнопку Далее: Конфигурации системы кнопка

  15. Для третьего шага, т. Конфигурации системы следуйте инструкциям ниже

  16. Нажми на Расширенный (на основе ролей ОЗУ экземпляра или cloud-init) раскрывающийся список и вставьте код ниже в поле данных пользователя

#!/usr/bin/env bash
cd /root/my-app
pm2 start /root/my-app/node_modules/react-scripts/bin/react-scripts.js --name my-app -- start

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

  1. Нажми на Предварительный просмотр кнопка
  2. Примите Условия использования и нажмите кнопку Создать экземпляр кнопка.
  3. Как только ваш экземпляр будет запущен и запущен, скопируйте IP-адрес в Интернете и вставьте его в адресную строку браузера. Вы должны увидеть веб-страницу приложения React.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *