Siga las instrucciones paso a paso para alojar un sitio web estático

  • Paso 1. Crear un nuevo bucket de Amazon S3

    Puede usar Amazon S3 para alojar sitios web estáticos sin necesidad de configurar ni administrar ningún servidor web. Siga los pasos que se describen a continuación para crear un nuevo bucket de Amazon S3 para alojar todos los recursos estáticos de su sitio web. Estos recursos incluyen archivos HTML, CSS, JavaScript y de imagen.

    1. Abra la consola de Amazon S3 en https://console.aws.amazon.com/s3/.
    2. Elija Crear bucket.
    3. En el campo Nombre del bucket, escriba un nombre que cumpla con DNS que sea único en el mundo para su nuevo bucket. Por ejemplo: empresadeejemplo-demo-nombre-apellido.
    4. En el campo Región, verifique que esté seleccionada la región correcta.
    5. Seleccione Crear.
  • Paso 2. Cargar los recursos del sitio web de la empresa de ejemplo en su bucket de Amazon S3

    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.

    1. Descargue los recursos del sitio web de la empresa de ejemplo de nuestro repositorio a su equipo local.
    2. Descomprima el archivo que ha descargado en su equipo local.
    3. 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>
  • Paso 3. Habilitar el alojamiento de sitios web estáticos para su bucket de Amazon S3

    En un sitio web estático, las páginas web individuales incluyen contenido estático. También pueden contener scripts del lado del cliente. En cambio, un sitio web dinámico depende de un procesamiento del lado del servidor, incluidos scripts del lado del servidor, como PHP, JSP o ASP.NET. Amazon S3 no admite scripts del lado del servidor. Siga los pasos que se describen a continuación con el fin de habilitar el alojamiento de sitios web estáticos para su bucket.

    1. Con su bucket de Amazon S3 seleccionado en la consola de Amazon S3, elija la pestaña Propiedades.
    2. Elija Alojamiento de sitios web estáticos y, a continuación, elija Usar este bucket para alojar un sitio web.
    3. Para Documento de índice, escriba index.html. Cuando configura un bucket para el alojamiento de sitios web, debe especificar el documento de índice.
    4. Tome nota del punto de enlace en la parte superior del cuadro de diálogo Alojamiento de sitios web estáticos. Después de habilitar su bucket para el alojamiento de sitios web estáticos, los navegadores web podrán acceder a todo su contenido a través del punto de enlace del sitio web de Amazon S3 para su bucket.
    5. Elija Guardar.
  • Paso 4. Habilitar el acceso de lectura público para su bucket de Amazon S3

    Cuando configura un bucket como sitio web, debe permitir la lectura pública de los objetos que desea servir. Para hacerlo, siga los pasos que se describen a continuación con el fin de crear una política de bucket que le otorgue un permiso s3:GetObject a todos.

    1. Con su bucket de Amazon S3 seleccionado en la consola de Amazon S3, elija la pestaña Permisos.
    2. Elija Editar para cambiar la configuración de acceso público para el bucket.
    3. Borre todas las casillas en la pestaña y, a continuación, elija Guardar.
    4. Cuando se le solicite confirmación, escriba confirmar. Este campo distingue entre mayúsculas y minúsculas.
    5. Elija Confirmar para guardar sus cambios.
    6. En la pestaña Permisos, elija Política de bucket.
    7. En el cuadro de texto editor de la política de bucket, copie y pegue la siguiente política:

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

    Donde <YOUR-BUCKET-NAME> es el nombre del bucket de su bucket de Amazon S3.

       8. Elija GUARDAR