Modulus поддерживает плавное развертывание статических сайтов с использованием Nginx 1.6.3 с настройками по умолчанию для обслуживания вашего контента с минимальными усилиями. Нативные веб-приложения, использующие такие фреймворки, как React, требуют дополнительной настройки для правильного обслуживания приложения.

Предпосылки

modulus login
 Welcome to Modulus
[?] Enter your username or email: jack
[?] Enter your password:
[✓] Signed in as user jack

: все примеры команд предполагают macOS, ваш пробег может отличаться._

Загрузите это

npm install --global create-react-app
 create-react-app hello-modulus

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

Давайте удостоверимся, что все работает так, как ожидалось:

cd hello-modulus
npm start

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

Настройте это

Откройте ./src/App.js, который является основным файлом вашего приложения. Внесите небольшое изменение и сохраните файл. Как насчет замены текста App-intro:

Hello Modulus.

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

Если вы хотите узнать больше о том, как это происходит с помощью create-react-app и особенно react-scripts, вы можете попробовать запустить npm run eject, но мы оставим это упражнение на другой раз.

Построить это

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

Hello Modulus.

Эта команда подготавливает все, что нам нужно, и даже предлагает способ протестировать статический вывод:

cd build
npm install -g http-server
hs

откройте http://localhost:8080 в вашем браузере

Разверните его

Сначала давайте создадим проект по модулю для развертывания нашего приложения:

modulus project create
Welcome to Modulus
You are logged in as jack
[?] Enter a project name: hello-modulus
Please choose which runtime to use:
  1) Php
  2) Node.js
  3) Python
  4) DNX
  5) Java
  6) Static
  7) Meteor
[?] Image number? 6
[?] Enter a servo size in MB [192, 396, 512, 1024, or 2048] (optional, default 512): 192
[✓] New project hello-modulus created.

Теперь нам нужно получить URL-адрес проекта, он понадобится нам при создании нашей конфигурации Nginx.

modulus project list
Welcome to Modulus
You are logged in as jack
Current projects:
jack
----------------------
hello-modulus  Static  NONE  http://hellomodulus-84775.onmodulus.net

Чтобы запустить статический сайт на Modulus, вам просто нужно добавить один файл, который вы сообщите нам, где находятся ваши файлы. Создайте папку в корне вашего проекта с именем sites-enabled и создайте внутри файл конфигурации для вашей конфигурации Nginx:

server {
  listen 8080;
  server_name hellomodulus-84775.onmodulus.net;
  root /mnt/app/build;
  index index.html index.htm;
  # single page app routing
  location /.+\..+ {
    try_files $uri $uri/ =404;
  }
  location / {
    try_files $uri /index.html;
  }
}

Сохраните файл, и мы готовы к развертыванию:

modulus deploy -p hello-modulus
  Welcome to Modulus
  You are logged in as jack-test
  Selecting hello-modulus
  Compressing project...
  516.8 KB written
  Uploading project...
  Upload progress [===================] 100%
  Deploying project into Static runtime...
  Starting build.
  Creating directories for build environment.
  Downloading source.
  Executing build.
  Copying files to output directory.
  Uploading completed build.
  Provisioning and deploying bundle to servos...

Следующие шаги

  • Сделайте свое приложение!
  • Отслеживайте мощность своих проектов, время отклика и многое другое на странице показателей вашего проекта.
  • Настройте конфигурацию NGINX под свои нужды
  • Включите Автомасштабирование или разверните несколько IaaS/регионов

Что такое Модуль?

Modulus упрощает развертывание приложений в общедоступном облаке или в вашем собственном центре обработки данных. Поддерживаются Node.js, PHP, Java, Python, Nginx и MongoDB. Полная поддержка Docker включена в версию Enterprise. Это бесплатно.

Предложить

Современный React с Redux

Продвинутый React и Redux