setzen

?????? est une toile collaborative multijoueur où vous placez des carreaux sur un globe composé d'un million de «trixels». Il s'agit d'un remix de l'expérience April Fools de Reddit R / Place.

Vous pouvez trouver une démo sur setzen.leifgehrmann.com

Serveur

Setzen utilise exclusivement le modèle d'application sans serveur AWS.

Déploiement

Dans ce guide, nous utilisons AWS SAM CLI pour déployer l'application.

Installation de la CLI

Amazon a leur propre guide pour installer le CLI AWS Sam.

Mais si Docker est installé, vous pouvez utiliser le Dockerfile sans installer AWS SAM CLI sur votre machine hôte.

 $ cd server
$ make build

Une fois l'image construite, vous pourrez démarrer un shell en utilisant les commandes suivantes.

 $ make aws-shell

Informations d'identification

Une fois que vous êtes dans le shell interactif, vous devrez configurer AWS-CLI afin qu'il ait les informations d'identification correctes. Ces instructions vous guideront sur la façon de créer un utilisateur avec un accès programmatique. Une fois la demande déployée, il est recommandé de révoquer les informations d'identification. Fondamentalement, toute personne ayant ces informations d'identification pourrait naître votre compte, alors soyez très prudent. (Je ne sais pas vraiment si c'est ainsi que vous êtes censé utiliser Cloudformation, mais cela ne se sent vraiment pas en sécurité.?)

1. Dans la console AWS, accédez à IAM et créez un nouvel utilisateur: https://us-east-1.console.aws.amazon.com/iam/home#/users$new?step=details
2. Pour l'étape "Détails":
   • Entrez un nom d'utilisateur. (Exemple: setzen )
   • Sélectionnez "Access Key - Accès programmatique" comme type d'accès AWS.
   • Procéder à l'étape "Autorisations".
3. Pour l'étape des autorisations:
   • Cliquez sur "Créer un groupe":
     • Entrez un nom de groupe. (Exemple: Setzen )
     • En vertu des politiques, vérifiez les politiques d'autorisation suivantes:
       • "Iamfullaccess"
       • "Amazons3fullaccess"
       • "Amazondynamodbfullaccess"
       • "AmazonapigatewayAdministrator"
       • "Awscloudformationfullaccess"
       • "Awslambda_fullaccess"
     • Cliquez sur "Créer un groupe".
   • Passez à l'étape "Tags".
4. Ajouter éventuellement des balises pour vous aider à se souvenir des détails de cet utilisateur IAM. Passez à l'étape "Examen".
5. Confirmez les détails et passez à l'étape suivante.
6. Assurez-vous de copier "l'identifiant de la clé d'accès" et la "clé d'accès secrète" et de le stocker dans un emplacement sécurisé. Après cette étape, si vous avez oublié de copier les informations d'identification, vous devrez supprimer et recréer l'utilisateur.

Avec les informations d'identification, vous pouvez maintenant configurer en exécutant aws configure et fournir les informations d'identification dans les invites.

 $ 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]: 

Déploiement guidé

Enfin, vous pouvez déployer l'application à l'aide de sam deploy .

 $ sam deploy --guided

La première fois que vous déploiez, vous serez invité à certaines configurations de déploiement.

• Nom de la pile (Exemple: setzen-websockets-app )
• Région AWS
• Paramètres (le nom des tables DynamoDB)
• Confirmer les modifications avant le déploiement (y est recommandé)
• Autoriser la création de rôles Sam Cli iam (y est recommandé)
• Désactiver le retour (n est recommandé)
• Enregistrer les arguments dans le fichier de configuration (y est recommandé)
• Fichier de configuration SAM
• Environnement de configuration SAM

Une fois terminé, vous devriez voir dans la sortie le WebSocketUri déployé. Gardez une note de cela pour plus tard lors de la configuration du client.

Tester le 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

Dans une console, passez au répertoire client .

Avec NPM installé, exécutez les commandes suivantes:

Installer des dépendances

 $ npm install

Pour configurer

SETZEN_WEBSOCKET_URL est la seule variable qui doit être définie pour que l'application fonctionne. Le reste des détails est simplement présentation, mais utile si vous souhaitez personnaliser la page d'informations.

 $ 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'

Pour voir

 $ npm run build
$ npm run preview

Se développer

 $ npm run dev

Attribution

Le code WebSocket à l'origine basé sur des websockets-chat-appas.