Führen Sie zum Hosten einer statischen Website Schritt für Schritt die entsprechenden Anweisungen aus.

  • Schritt 1: Einen neuen Amazon S3-Bucket erstellen

    Sie können Amazon S3 zum Hosten statischer Websites verwenden, ohne Webserver konfigurieren oder verwalten zu müssen. Gehen Sie wie folgt vor, um einen neuen Amazon S3-Bucket zu erstellen, in dem Sie für Ihre Website benötigten statischen Ressourcen hosten können. Zu diesen Ressourcen gehören HTML-, CSS-, JavaScript- und Bilddateien.

    1. Öffnen Sie die Amazon S3-Konsole, indem Sie die URL https://console.aws.amazon.com/s3/ aufrufen.
    2. Klicken Sie auf Bucket erstellen.
    3. Geben Sie in das Feld Bucket-Name einen weltweit eindeutigen, DNS-konformen Namen für Ihren neuen Bucket ein. Beispiel: examplecorp-demo-vorname-nachname.
    4. Überprüfen Sie, ob im Feld Region die richtige Region ausgewählt ist.
    5. Wählen Sie Erstellen.
  • Schritt 2: Ressourcen für die Website der Example Corp. in den Amazon S3-Bucket hochladen

    Gehen Sie wie folgt vor, um mithilfe der Amazon S3-Konsole die Ressourcen für die Website der Example Corp. hochzuladen.

    1. Laden Sie die Ressourcen für die Website der Example Corp. aus unserem Repository auf Ihren lokalen Computer herunter.
    2. Entpacken Sie die heruntergeladene Datei auf Ihrem lokalen Computer.
    3. 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>
  • Schritt 3: Hosten statischer Websites im Amazon S3-Bucket aktivieren

    Auf einer statischen Website weisen die einzelnen Webseiten statische Inhalte auf. Darüber hinaus können sie clientseitige Skripte enthalten. Im Gegensatz dazu findet die Verarbeitung einer dynamischen Website auf einem Server statt und beinhaltet serverseitige Skripte, z. B. in PHP, JSP und ASP.NET. Die serverseitige Skripterstellung wird von Amazon S3 nicht unterstützt. Gehen Sie wie folgt vor, um das Hosten statischer Websites für Ihren Bucket zu aktivieren.

    1. Wählen Sie in der Amazon S3-Konsole Ihren Amazon S3-Bucket aus und klicken Sie dann auf die Registerkarte Eigenschaften.
    2. Wählen Sie Hosten statischer Websites und dann Diesen Bucket zum Hosten einer Website verwenden.
    3. Geben Sie unter Indexdokument die Datei index.html an. Wenn Sie einen Bucket zum Hosten einer Website konfigurieren, müssen Sie ein Indexdokument angeben.
    4. Notieren oder merken Sie sich den Endpunkt, der im oberen Bereich des Dialogfensters Hosten statischer Websites angezeigt wird. Nachdem Sie in Ihrem Bucket das Hosten statischer Websites aktiviert haben, können Sie in einem Webbrowser über den Amazon S3-Endpunkt der Website für Ihren Bucket auf alle Ihre Inhalte zugreifen.
    5. Wählen Sie Speichern.
  • Schritt 4: Öffentlichen Lesezugriff für den Amazon S3-Bucket aktivieren

    Wenn Sie einen Bucket zum Hosten einer Website konfigurieren, müssen Sie die Objekte festlegen, die öffentlich einsehbar sein sollen. Gehen Sie dazu wie folgt vor, um eine Bucket-Richtlinie zu erstellen, mit dem allen die Berechtigung "s3:GetObject" zugewiesen wird.

    1. Wählen Sie in der Amazon S3-Konsole Ihren Amazon S3-Bucket aus und klicken Sie dann auf die Registerkarte Berechtigungen.
    2. Klicken Sie auf Bearbeiten, um die Einstellungen für den öffentlichen Zugriff auf Ihren Bucket zu ändern.
    3. Deaktivieren Sie alle Kontrollkästchen auf dieser Registerkarte und wählen Sie dann Speichern.
    4. Wenn Sie zur Bestätigung aufgefordert werden, geben Sie confirm ein. Beachten Sie dabei die Groß- und Kleinschreibung.
    5. Wählen Sie Bestätigen, um Ihre Änderungen zu speichern.
    6. Während Sie auf der Registerkarte Berechtigungen die Option Bucket-Richtlinie aus.
    7. Kopieren Sie die folgende Richtlinie und fügen Sie sie in das Textfeld Bucket-Richtlinien-Editor ein:

    {
    "Version": "2012-10-17",
    "Statement": [
        {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::<YOUR-BUCKET-NAME>*"
        }
    ]
    }

    Ersetzen Sie dabei <YOUR-BUCKET-NAME> durch den Namen Ihres Amazon S3-Buckets.

       8. Wählen Sie SPEICHERN.