Gehen Sie wie folgt vor, um mithilfe der Amazon S3-Konsole die Ressourcen für die Website der Example Corp. hochzuladen.
- Laden Sie die Ressourcen für die Website der Example Corp. aus unserem Repository auf Ihren lokalen Computer herunter.
- Entpacken Sie die heruntergeladene Datei auf Ihrem lokalen Computer.
- Navigieren Sie zum Ordner Web_generic\Web und öffnen Sie die Datei index.html. Nehmen Sie an dieser Datei die folgenden Änderungen vor. Am Ende dieser Anleitung finden Sie das Standardformat für diese Datei.
Erforderlich:
- stateMachineArn = – Ersetzen Sie den Standardwert durch den ARN der Zustandsmaschine, die Sie in Modul 3 erstellt haben.
- subnet1id = – Ersetzen Sie <SUBNET-ID> durch die ID des ersten privaten Subnetzes in der VPC, die Sie für dieses Projekt verwenden.
- subnet2id = – Ersetzen Sie <SUBNET-ID> durch die ID des zweiten privaten Subnetzes in der VPC, die Sie für dieses Projekt verwenden.
- securitygroup = – Ersetzen Sie <SECURITY-GROUP-ID> durch die ID der Sicherheitsgruppe, die Sie mit Ihren AppStream 2.0-Instances verknüpfen möchten.
- url: = – Ersetzen Sie den Standardwert durch die URL für die API-Ausführung.
Öffnen Sie zum Abrufen dieser URL die API Gateway-Konsole. Wählen Sie im Navigationsbereich unter APIs die Option examplecorp_eao und dann Stages. Erweitern Sie unter Stages den Bereich test und wählen Sie dann VERÖFFENTLICHEN. Oben im Bereich wird die Aufruf-URL angezeigt. Die URL weist das folgende Format auf:
https://<UNIQUE-ID>.execute-api.amazonaws.com/test/execute
Optional:
- ib_arn = – Der ARN des AppStream 2.0-Basisabbilds, mit dem Sie den Image Builder erstellen möchten. Führen Sie einen der folgenden Schritte aus:
- Option 1: Wenn Sie das vorhandene Basisabbild (ein öffentliches Windows Server 2012 R2-Standardabbild) verwenden möchten, ersetzen Sie <REGION-CODE> im folgenden ARN durch den Wert Ihrer Region.
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2012R2-09-18-2019
- Option 2: Wenn Sie ein kürzlich veröffentlichtes Windows Server 2016- oder Windows Server 2019-Basisabbild verwenden möchten, geben Sie einen der folgenden ARNs an:
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2016-09-18-2019
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2019-09-18-2019
- Option 3: Geben Sie den ARN eines eigenen, privaten Abbilds an. Um den ARN eines Abbilds anzuzeigen, nutzen Sie die Aktion "DescribeImages" der AppStream 2.0-API oder den Befehl "describe-images" in der AWS-Befehlszeilenschnittstelle. Der Abbild-ARN weist das folgende Format auf:
- Private Basisabbilder: arn:aws:appstream:<REGION-CODE>:<AWS-ACCOUNT-ID>:image/<IMAGE-NAME>
- Öffentliche Basisabbilder: arn:aws:appstream:<REGION-CODE>::image/<IMAGE-NAME>
- instance_type = – Der Typ der AppStream 2.0-Instance, die Sie für den Workshop verwenden. Der Standardwert ist stream.standard.medium.
In Ihrem Konto müssen Grenzwerte für die ausgewählte Instance-Größe festgelegt sein. Das Kontolimit für Instances des Typs "stream.standard.medium" liegt bei fünf Instances.
4. Öffnen Sie die Amazon S3-Konsole, indem Sie die URL https://console.aws.amazon.com/s3/ aufrufen.
5. Wählen Sie in der Liste Bucket-Name den Namen des Buckets aus, den Sie im vorherigen Schritt erstellt haben.
6. Wählen Sie im Fenster der Amazon S3-Konsole auf der Registerkarte Übersicht die Option Hochladen.
7. Öffnen Sie ein neues Fenster außerhalb der Konsole und navigieren Sie auf Ihrem lokalen Computer zu dem Verzeichnis, in dem sich die entpackten Ressourcen der Website befinden. Wählen Sie alle Dateien und Ordner in diesem Verzeichnis aus. Achten Sie darauf, dass das Verzeichnis "Web" selbst nicht ausgewählt ist.
8. Ziehen Sie die ausgewählten Elemente per Drag & Drop in das Dialogfenster Hochladen.
9. Klicken Sie auf Hochladen.
10. Warten Sie, bis der Upload-Vorgang abgeschlossen ist. Überprüfen Sie dann, dass in der Liste auf der Registerkarte Übersicht die richtigen Dateien und Ordner angezeigt werden.
<!DOCTYPE HTML>
<!--
Miniport by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Example Corp Enterprise Application Onboarding</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" type="image/png" href="images/exampleco_ico.png">
<!-- API Call -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
var name = $("#fName").val(),
lastname = $("#lName").val(),
email = $("#email").val(),
deptcode = $("#deptcode").val(),
name_id = name.concat(deptcode),
ib_name = name.concat(deptcode,"_IB"),
ib_arn = "arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2012R2-05-28-2019",
stateMachineArn = "arn:aws:states:<REGION-CODE>:<AWS-ACCOUNT-ID>:stateMachine:EAOv1",
subnet1id = "<SUBNET-ID>"
subnet2id = "<SUBNET-ID>"
securitygroup = "<SECURITY-GROUP-ID>"
fleet_name = deptcode.concat("_Fleet")
stack_name = deptcode.concat("_Stack")
$.ajax({
type: "POST",
url: 'https://<UNIQUE-ID>.execute-api.<REGION-CODE>.amazonaws.com/Prod/execution',
crossDomain: true,
contentType: 'application/json',
data: JSON.stringify({
'name': name_id,
'stateMachineArn': stateMachineArn,
'input': "{\"user_name\": \"" + name + "\", \"email\": \"" + email + "\", \"instance_type\": \"stream.standard.medium\", \"subnet1id\": \"" + subnet1id + "\", \"subnet2id\": \"" + subnet2id + "\", \"securitygroups\": \"" + securitygroup + "\", \"deptcode\": \"" + deptcode + "\", \"ib_arn\": \"" + ib_arn + "\", \"ib_name\": \"" + ib_name + "\", \"fleet_name\": \"" + fleet_name + "\", \"stack_name\": \"" + stack_name + "\"}"
}),
success: function(res, data, status){
console.log(res.message)
window.location.replace('https://docs.aws.amazon.com/appstream2/latest/developerguide/tutorial-image-builder.html');
},
error: function(res, data, status){
console.log(res.message)
}
});
})
});
</script>
</head>
<body class="is-preload">
<!-- Nav -->
<nav id="nav">
</nav>
<!-- Home -->
<article id="top" class="wrapper style1">
<div class="container">
<div class="row">
<div class="col-4 col-5-large col-12-medium">
<span class="image fit"><img src="images/exampleco.png" alt="Example Corp" /></span>
</div>
<div class="col-8 col-7-large col-12-medium">
<header>
<h2><strong>Enterprise Application Onboarding Portal</strong></h2>
</header>
<p>
<div class="col-12">
<form id="EAOForm">
<div class="row">
<h4>Fill out the following information to get started onboarding your applications to AppStream2.0. This will allow secure access to your application from any computer, anywhere
that has internet access via a web browser. No client device installations required.</h4>
<div class="col-6 col-12-small">
<input type="text" id="fName" placeholder="First Name" pattern="*" required>
</div>
<div class="col-6 col-12-small">
<input type="text" id="lName" placeholder="Last Name" pattern="*" required>
</div>
<div class="col-12">
<input type="email" id="email" placeholder="Email" pattern=".*" required>
</div>
<div class="col-6 col-12-small">
<input type="text" id="deptcode" placeholder="Department Code" pattern=".*" required>
</div>
<div class="col-12">
<ul class="actions">
<li><button id="submit" onclick="alert('You have submitted your request, please check your e-mail in 30 minutes.')">Start</button></li>
<li><button id="reset" class="alt">Clear</button></li>
</ul>
</div>
<p id="result"></p>
<h4>Within 30 minutes of clicking Start, you will be sent an e-mail with instructions on the next steps.</h4>
</div>
</form>
</div>
</p>
</div>
</div>
</div>
</article>
</body>
</html>