setzen

?????? это многопользовательский Collaborative Canvas, где вы помещаете плитки на глобус, состоящий из миллиона «трикселей». Это ремикс Reddit's April Fools Experiment R/Place.

Вы можете найти демонстрацию на setzen.leifgehrmann.com

Сервер

Setzen исключительно использует модель приложения без сервера AWS.

Развертывание

В этом руководстве мы используем AWS Sam CLI для развертывания приложения.

Установка CLI

У Amazon есть свое собственное руководство для установки AWS Sam Cli.

Но если у вас установлен Docker, вы можете использовать Dockerfile , не устанавливая AWS SAM CLI на вашем хост -машине.

 $ cd server
$ make build

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

 $ make aws-shell

Реквизиты для входа

Как только вы находитесь в интерактивной оболочке, вам нужно будет настроить AWS-CLI, чтобы он имел правильные учетные данные. Эти инструкции дадут вам, как создать пользователя с программным доступом. После того, как приложение будет развернуто, он рекомендуется отозвать учетные данные. По сути, любой, у кого есть эти полномочия, мог бы подорвать ваш счет, так что будьте очень осторожны. (Я действительно не знаю, так ли вы должны использовать Cloudformation, но она действительно не чувствует себя в безопасности.)

1. В консоли AWS перейдите в IAM и создайте нового пользователя: https://us-east-1.console.aws.amazon.com/iam/home#/users$new?step=details
2. Для шага «детали»:
   • Введите имя пользователя. (Пример: setzen )
   • Выберите «Ключ доступа - Программный доступ» в качестве типа доступа AWS.
   • Перейдите к «разрешениям» шагу.
3. Для шага разрешений:
   • Нажмите «Создать группу»:
     • Введите имя группы. (Пример: Setzen )
     • В соответствии с политикой проверьте следующие политики разрешения:
       • "Iamfullaccess"
       • "Amazons3fullaccess"
       • "Amaralynamodbfullaccess"
       • "AmazonapateWayAdministrator"
       • "Awscloudformationfullaccess"
       • "Awslambda_fullaccess"
     • Нажмите «Создать группу».
   • Перейдите к шагу «теги».
4. При желании добавить теги, чтобы помочь с запоминанием подробностей об этом пользователе IAM. Перейдите к шагу «обзор».
5. Подтвердите детали и перейдите к следующему шагу.
6. Обязательно скопируйте «ID ключа доступа» и «Ключ секретного доступа» и сохраните его в безопасном месте. После этого шага, если вы забыли скопировать учетные данные, вам нужно будет удалить и воссоздать пользователя.

С учетом учетных данных вы можете настроить, запустив aws configure и предоставление учетных данных в подсказках.

 $ aws configure
AWS Access Key ID [None]: your_access_key_id
AWS Secret Access Key [None]: your_secret_access_key
Default region name [None]: 
Default output format [None]: 

Управляемое развертывание

Наконец, вы можете развернуть приложение с помощью sam deploy .

 $ sam deploy --guided

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

• Имя стека (пример: setzen-websockets-app )
• AWS Регион
• Параметры (имя таблиц DynamoDB)
• Подтвердите изменения перед развертыванием (Y рекомендуется)
• Разрешить Sam Cli iam создание роли (y рекомендуется)
• Отключить откат (n рекомендуется)
• Сохранить аргументы в файл конфигурации (y рекомендуется)
• Файл конфигурации SAM
• Среда конфигурации SAM

После завершения вы должны увидеть на выводе развернутые веб -зонеури. Запомните об этом на потом при настройке клиента.

Тестирование WebSocket

 $ cd test-wscast
$ npm install
$ npx wscat -c wss://{YOUR-API-ID}.execute-api.{YOUR-REGION}.amazonaws.com/Prod
> { "action": "sendmessage", "data": {"type": "readChunkInfo" } }
< {"type":"queue","data":{"positions":[],"colorIds":[],"times":[]}}

Клиент

В консоли изменение в client каталоге.

С установленным NPM запустите следующие команды:

Установить зависимости

 $ npm install

Для настройки

SETZEN_WEBSOCKET_URL - единственная переменная, которая должна быть определена для приложения для функции. Остальные детали являются просто презентационными, но полезны, если вы хотите настроить информационную страницу.

 $ export SETZEN_WEBSOCKET_URL='wss://xxxxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/Prod'
$ export SETZEN_WEBAPP_HOST='example.com'
$ export SETZEN_CONTACT_EMAIL='[email protected]'
$ export SETZEN_CONTACT_URL='https://example.com/admin'
$ export SETZEN_CONTACT_ISSUES_URL='https://example.com/setzen/issues'
$ export SETZEN_CONTACT_PROJECT_URL='https://example.com/setzen'

Для просмотра

 $ npm run build
$ npm run preview

Развиваться

 $ npm run dev

Атрибуция

Код WebSocket изначально на основе Simple-Websockets-Chat-App.