setzen

?????? ist eine kollaborative Multiplayer -Leinwand, in der Sie Kacheln auf einen Globus platzieren, der aus einer Million "Trixel" besteht. Es ist ein Remix von Reddits Aprilwürfern -Experiment R/Place.

Sie finden eine Demo unter setten.leifgehrmann.com

Server

SETZEN verwendet ausschließlich das AWS -Serverless -Anwendungsmodell.

Einsatz

In diesem Handbuch verwenden wir AWS SAM CLI, um die Anwendung bereitzustellen.

Installation der CLI

Amazon hat einen eigenen Leitfaden für die Installation der AWS Sam Cli.

Wenn Sie jedoch Docker installiert haben, können Sie die Dockerfile verwenden, ohne AWS Sam Cli auf Ihrem Host -Computer zu installieren.

 $ cd server
$ make build

Sobald das Bild erstellt wurde, können Sie eine Shell mit den folgenden Befehlen starten.

 $ make aws-shell

Anmeldeinformationen

Sobald Sie sich in der interaktiven Shell befinden, müssen Sie AWS-CLI so konfigurieren, dass es die richtigen Anmeldeinformationen hat. Diese Anweisungen leiten Sie, wie Sie einen Benutzer mit programmatischen Zugriff erstellen. Sobald die Anwendung bereitgestellt ist, wird empfohlen, die Anmeldeinformationen zu widerrufen. Grundsätzlich könnte jeder mit diesen Anmeldeinformationen Ihr Konto erfassen. Seien Sie also sehr vorsichtig. (Ich weiß nicht wirklich, ob Sie so CloudFormation verwenden sollen , aber es fühlt sich wirklich nicht sicher an.?)

1. Navigieren Sie in der AWS-Konsole zu IAM und erstellen
2. Für den Schritt "Details":
   • Geben Sie einen Benutzernamen ein. (Beispiel: setzen )
   • Wählen Sie "Zugriffsschlüssel - programmatischer Zugriff" als AWS -Zugriffstyp.
   • Fahren Sie mit "Berechtigungen" fort.
3. Für den Berechtigungsschritt:
   • Klicken Sie auf "Gruppe erstellen":
     • Geben Sie einen Gruppennamen ein. (Beispiel: Setzen )
     • Überprüfen Sie unter Richtlinien die folgenden Berechtigungsrichtlinien:
       • "Iamfullaccess"
       • "Amazons3fullAccess"
       • "AmazondynamodbfulAccess"
       • "AmazonapigateWayAdministrator"
       • "AwScloudFormationfullAccess"
       • "Awslambda_fullaccess"
     • Klicken Sie auf "Gruppe erstellen".
   • Fahren Sie mit dem Schritt "Tags" fort.
4. Fügen Sie optional Tags hinzu, um sich beim Erinnern von Details zu diesem IAM -Benutzer zu erinnern. Fahren Sie mit dem Schritt "Review" fort.
5. Bestätigen Sie die Details und fahren Sie mit dem nächsten Schritt fort.
6. Stellen Sie sicher, dass Sie die "Zugriffsschlüssel -ID" und den "Secret Access -Schlüssel" kopieren und an einem sicheren Ort speichern. Wenn Sie nach diesem Schritt vergessen haben, die Anmeldeinformationen zu kopieren, müssen Sie den Benutzer löschen und neu erstellen.

Mit den Anmeldeinformationen können Sie nun konfigurieren, indem Sie aws configure und Anmeldeinformationen in den Eingabeaufforderungen ausführen.

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

Führung eingeleitet

Schließlich können Sie die Anwendung über sam deploy bereitstellen.

 $ sam deploy --guided

Wenn Sie zum ersten Mal bereitstellen, werden Sie für einige Bereitstellungskonfigurationen aufgefordert.

• Stackname (Beispiel: setzen-websockets-app )
• AWS -Region
• Parameter (der Name der Dynamodb -Tabellen)
• Bestätigen Sie Änderungen vor der Bereitstellung (y wird empfohlen)
• Erlauben Sie Sam Cli iam Rollenerstellung (y wird empfohlen)
• Rollback deaktivieren (N wird empfohlen)
• Argumente in der Konfigurationsdatei speichern (y wird empfohlen)
• SAM -Konfigurationsdatei
• SAM -Konfigurationsumgebung

Sobald Sie abgeschlossen sind, sollten Sie in der Ausgabe die bereitgestellte WebSocketuri sehen. Halten Sie dies bei der Einrichtung des Clients später für später.

Testen des 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":[]}}

Kunde

Wechseln Sie in einer Konsole in das client -Verzeichnis.

Führen Sie mit installiertem NPM die folgenden Befehle aus:

Abhängigkeiten installieren

 $ npm install

Zu konfigurieren

SETZEN_WEBSOCKET_URL ist die einzige Variable, die definiert werden muss, damit die Anwendung funktionieren kann. Die restlichen Details sind lediglich präsental, aber nützlich, wenn Sie die Info -Seite anpassen möchten.

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

Zu sehen

 $ npm run build
$ npm run preview

Sich entwickeln

 $ npm run dev

Zuschreibung

WebSocket-Code, der ursprünglich auf einfachen Websockets-Chat-App basiert.