Siga los pasos que se describen a continuación para cargar los recursos del sitio web de la empresa de ejemplo usando la consola de Amazon S3.
- Descargue los recursos del sitio web de la empresa de ejemplo de nuestro repositorio a su equipo local.
- Descomprima el archivo que ha descargado en su equipo local.
- Vaya a la carpeta Web_generic\Web y abra index.html. Realice los siguientes cambios a este archivo. El formato predeterminado para este archivo se incluye al final de este procedimiento.
Obligatorio:
- stateMachineArn = reemplace el valor predeterminado con el ARN de la máquina de estado que creó en el módulo 3.
- subnet1id = reemplace <SUBNET-ID> con el ID de la primera subred privada en la VPC que está usando para este proyecto.
- subnet2id = reemplace <SUBNET-ID> con el ID de la segunda subred privada en la VPC que está usando para este proyecto.
- securitygroup = reemplace <SECURITY-GROUP-ID> con el ID del grupo de seguridad que quiere asociar con sus instancias de AppStream 2.0.
- url: = reemplace el valor predeterminado con su URL de ejecución de la API.
Para obtener esta URL, abra la consola de API Gateway. En el panel de navegación, en las API, elija examplecorp_eao y, luego, elija Etapas. En el panel Etapas, amplíe prueba y, luego, elija POST. En la parte superior del panel, se muestra la URL de invocación. La URL tiene el siguiente formato:
https://<UNIQUE-ID>.execute-api.amazonaws.com/test/execute
Opcional:
- ib_arn = el ARN de la imagen de base de AppStream 2.0 que quiere usar para generar un creador de imágenes. Aplique alguna de las siguientes acciones:
- Opción 1: para usar la imagen predeterminada provista (una imagen de base pública de Windows Server 2012 R2), reemplace <REGION-CODE> en el siguiente ARN con el valor de su región.
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2012R2-09-18-2019
- Opción 2: para usar una imagen de base recientemente publicada de Windows Server 2016 o Windows Server 2019, especifique uno de los siguientes ARN:
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2016-09-18-2019
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2019-09-18-2019
- Opción 3: especifique el ARN de una imagen privada que tenga. Para obtener el ARN de una imagen, use la acción de la API AppStream 2.0 DescribeImages o el comando de la CLI de AWS describe-images. Las imágenes de ARN tienen el siguiente formato:
- Imágenes de base privadas: arn:aws:appstream:<REGION-CODE>:<AWS-ACCOUNT-ID>:image/<IMAGE-NAME>
- Imágenes de base públicas: arn:aws:appstream:<REGION-CODE>::image/<IMAGE-NAME>
- instance_type = el tipo de instancia de AppStream 2.0 que se usará en el taller. El valor predeterminado es stream.standard.medium.
Su cuenta debe tener límites establecidos para el tamaño de la instancia que usted elija. De forma predeterminada, el límite de la cuenta para el tipo de instancia stream.standard.medium es de cinco instancias.
4. Abra la consola de Amazon S3 en https://console.aws.amazon.com/s3/.
5. En la lista Nombre del bucket, elija el nombre del bucket que creó en el paso anterior.
6. En la ventana de la consola de Amazon S3, en la pestaña Información general, elija Cargar.
7. En una ventana que no sea la ventana de la consola, vaya al directorio de recursos del sitio web descomprimidos en su equipo local. Seleccione todos los archivos y las carpetas en ese directorio. Verifique que el directorio web no esté seleccionado.
8. Arrastre y suelte sus opciones en el cuadro de diálogo Cargar.
9. Seleccione Cargar.
10. Espere a que se complete la carga y verifique que las carpetas y los archivos correctos aparezcan en la lista de la pestaña Información general.
<!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>
