Segui le istruzioni dettagliate per ospitare un sito web statico.

  • Fase 1. Creazione di un nuovo bucket Amazon S3

    Amazon S3 consente di ospitare siti web statici senza dover configurare o gestire alcun server web. Procedi come segue per creare un nuovo bucket Amazon S3 per ospitare tutti gli asset statici per il tuo sito web. Questi asset sono file HTML, CSS, JavaScript e di immagini.

    1. Apri la console Amazon S3 su https://console.aws.amazon.com/s3/.
    2. Scegli Crea bucket.
    3. Nel campo Nome bucket, digita un nome conforme a DNS unico a livello globale. Per esempio: examplecorp-demo-firstname-lastname.
    4. Nel campo Regione, verifica che sia stata selezionata la regione corretta.
    5. Scegli Crea.
  • Fase 2. Upload degli asset del sito web Example Corp. sul bucket Amazon S3

    Procedi come segue per eseguire l'upload degli asset del sito web Example Corp. utilizzando la console Amazon S3.

    1. Scarica gli asset del sito web Example Corp. dal nostro repository al tuo computer locale.
    2. Decomprimi il file scaricato nel computer locale.
    3. Vai alla cartella Web_generic\Web e apri index.html. Apporta le seguenti modifiche a questo file. Il formato predefinito di questo file è incluso alla fine di questa procedura.

    Obbligatorio:

    • stateMachineArn = Sostituisci il valore predefinito con l'ARN della macchina a stati che hai creato durante il modulo 3.
    • subnet1id = Sostituisci <SUBNET-ID> con l'ID della prima sottorete privata nel VPC che stai utilizzando per questo progetto.
    • subnet2id = Sostituisci <SUBNET-ID> con l'ID della seconda sottorete privata nel VPC che stai utilizzando per questo progetto.
    • securitygroup = Sostituisci <SECURITY-GROUP-ID> con l'ID del gruppo di sicurezza che desideri associare alle istanze di AppStream 2.0.
    • url: = Sostituisci il valore predefinito con l'URL di esecuzione dell'API.

    Per ottenere questo URL, apri la console API Gateway. Nel riquadro di navigazione, sotto API, scegli examplecorp_eao e poi scegli Stadi. Nel riquadro Stadi, espandi test e poi scegli POST. Nella parte superiore del riquadro, si visualizza Richiama URL. L'URL segue questo formato:

    https://<UNIQUE-ID>.execute-api.amazonaws.com/test/execute
     
    Facoltativamente:
    • ib_arn = L'ARN dell'immagine AppStream 2.0 di base che vuoi usare per creare Image Builder. Scegli una delle seguenti operazioni:
      • Opzione 1. Per usare l'immagine predefinita fornita (un'immagine base Windows Server 2012 R2 pubblica), sostituisci <REGION-CODE> nel seguente ARN con il valore della tua regione.
        • arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2012R2-09-18-2019
         
      • Opzione 2. Per usare un'immagine base Windows Server 2016 o Windows Server 2019 lanciata recentemente, specifica uno dei seguenti ARN:
        • arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2016-09-18-2019
        • arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2019-09-18-2019
         
      • Opzione 3. Specifica l'ARN di un'immagine privata di tua proprietà. Per ottenere l'ARN per un'immagine, usa l'azione dell'API AppStream 2.0 DescribeImages o il comando describe-images AWS CLI. Gli ARN delle immagini seguono questo formato:
        • Immagini di base private: arn:aws:appstream:<REGION-CODE>:<AWS-ACCOUNT-ID>:image/<IMAGE-NAME>
        • Immagini di base pubbliche: arn:aws:appstream:<REGION-CODE>::image/<IMAGE-NAME>
    • instance_type = Il tipo di istanza AppStream 2.0 da usare per il workshop. Il valore predefinito è stream.standard.medium.

    Il tuo account deve avere limiti impostati per le dimensioni dell'istanza scelta. Per impostazione predefinita, il limite dell'account per il tipo di istanza stream.standard.medium è pari a cinque istanze.  

       4. Apri la console Amazon S3 su https://console.aws.amazon.com/s3/.


       5. Nell'elenco Nome bucket, scegli il nome del bucket che hai creato nella fase precedente.


       6. Nella finestra della console Amazon S3, sulla scheda Panoramica, scegli Upload.


       7. In una finestra diversa da quella della console, vai alla directory degli asset del sito web non decompressi sul computer locale. Seleziona tutti i file e le cartelle contenuti in tale directory. Verifica che la directory in sé non sia selezionata.


       8. Trascina le selezioni nella finestra di dialogo Upload.


       9. Scegli Upload.


       10. Attendi che l'upload sia stato completato e verifica che i file e le cartelle corretti figurino nell'elenco sulla scheda Panoramica.

    <!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>
  • Fase 3. Abilitazione dell'hosting del sito web statico per il bucket Amazon S3

    In un sito web statico, pagine web individuali includono contenuti statici. Potrebbero contenere anche script sul lato client. Invece, un sito web dinamico dipende dall'elaborazione sul lato server, compresi script sul lato server come PHP, JSP o ASP.NET. Amazon S3 non supporta gli script sul lato server. Procedi come segue per abilitare l'hosting del sito web statico per il bucket.

    1. Una volta selezionato il bucket Amazon S3 nella console Amazon S3, scegli la scheda Proprietà.
    2. Scegli Hosting sito web statico e poi scegli Usa questo bucket per l'hosting di un sito web.
    3. Per Documento indice, digita index.html. Quando configuri un bucket per l'hosting di un sito web, devi specificare un documento indice.
    4. Annota l'endpoint sulla parte superiore della finestra di dialogo Hosting sito web statico. Una volta abilitato il bucket per l'hosting del sito web statico, i browser possono accedere a tutti i tuoi contenuti tramite l'endpoint del sito web Amazon S3 relativo al bucket stesso.
    5. Scegli Salva.
  • Fase 4. Abilitazione dell'accesso pubblico alla lettura per il bucket Amazon S3.

    Quando configuri un bucket come un sito web, devi configurare gli oggetti che vuoi servire in modo che siano leggibili pubblicamente. A tal fine, procedi come segue per creare una policy relativa al bucket che dia a chiunque l'autorizzazione s3:GetObject.

    1. Una volta selezionato il bucket Amazon S3 nella console Amazon S3, scegli la scheda Autorizzazioni.
    2. ScegliModifica per modificare le impostazioni di accesso pubblico relative al bucket.
    3. Deseleziona tutte le caselle di controllo sulla scheda e poi scegli Salva.
    4. Quando compare la richiesta di conferma, digita confirm. Questo campo fa distinzione tra minuscole e maiuscole.
    5. Scegli Conferma per salvare le modifiche.
    6. Sulla scheda Autorizzazioni, scegli Policy di bucket.
    7. Nella casella di testoEditor policy di bucket, copia e incolla la seguente policy:

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

    dove <YOUR-BUCKET-NAME> è il nome del tuo bucket Amazon S3.

       8. Scegli SALVA