Suivez les instructions détaillées pour héberger un site web statique

  • Étape 1. Création d'un compartiment Amazon S3

    Vous pouvez utiliser Amazon S3 pour héberger des sites web statiques sans devoir configurer ou gérer de serveurs web. Réalisez les étapes ci-dessous pour créer un nouveau compartiment Amazon S3, pour héberger toutes les ressources statiques de votre site Internet. Ces ressources comprennent les fichiers HTML, CSS, JavaScript et image.

    1. Ouvrez la console Amazon S3 sur https://console.aws.amazon.com/s3/.
    2. Choisissez Créer un compartiment.
    3. Dans le champ Nom du compartiment, saisissez un nom conforme DNS globalement unique pour votre nouveau compartiment. Par exemple : exempleentre-demo-prenom-nom.
    4. Dans le champ Région, vérifiez que la région adéquate est sélectionnée.
    5. Choisissez Créer.
  • Étape 2. Téléchargez les ressources de sites Internet de l'exemple d'entreprise vers votre compartiment Amazon S3

    Réalisez les étapes suivantes pour télécharger les ressources de site Internet d'exemple d'entreprise à l'aide de la console Amazon S3.

    1. Téléchargez les ressources de site Internet de l'exemple d'entreprise depuis notre référentiel sur votre ordinateur local.
    2. Décompressez le fichier téléchargé sur votre ordinateur local.
    3. Atteignez le dossier Web_generic\Web et ouvrez index.html. Effectuez les modifications suivantes sur le fichier. Le format par défaut de ce fichier est inclus à la fin de la présente procédure.

    Obligatoire :

    • stateMachineArn = remplacez la valeur par défaut par l'ARN de la machine d'état que vous avez créée au module 3.
    • subnet1id = remplacez <SUBNET-ID> par l'ID du premier sous-réseau privé du VPC que vous utilisez pour ce projet.
    • subnet2id = remplacez <SUBNET-ID> par l'ID du deuxième sous-réseau privé du VPC que vous utilisez pour ce projet.
    • securitygroup = remplacez <SECURITY-GROUP-ID> par l'ID du groupe de sécurité que vous souhaitez associer à vos instances AppStream 2.0.
    • url: = remplacez la valeur par défaut par votre URL d'exécution d'API.

    Pour l'obtenir, ouvrez la console Passerelle API. Dans le volet de navigation, sous API, choisissez examplecorp_eao, puis Étapes. Dans le panneau Étapes, développez test, puis sélectionnez PUBLIER. En haut du panneau, l'URL d'invocation apparaît. L'URL est au format suivant :

    https://<ID-UNIQUE>.execute-api.amazonaws.com/test/execute
     
    Facultatif :
    • ib_arn = l'ARN de l'image AppStream 2.0 de base que vous souhaitez utiliser pour créer le générateur d'images. Effectuez l'une des actions suivantes :
      • Option 1 : pour utiliser l'image par défaut fournie (une image de base Windows Server 2012 R2), remplacez <CODE-REGION> dans l'ARN suivant par la valeur de votre région.
        • arn:aws:appstream:<CODE-REGION>::image/AppStream-WinServer2012R2-09-18-2019
         
      • Option 2 : pour utiliser une version récente de l'image de base de Windows Server 2016 ou Windows Server 2019, spécifiez un des ARN suivants :
        • arn:aws:appstream:<CODE-REGION>::image/AppStream-WinServer2016-09-18-2019
        • arn:aws:appstream:<CODE-REGION>::image/AppStream-WinServer2019-09-18-2019
         
      • Option 3 : Spécifiez l'ARN d'une image privée que vous possédez. Pour obtenir l'ARN d'une image, utilisez l'action d'API DescribeImages d'AppStream 2.0 ou la commande describe-images de l'interface de ligne de commande AWS. Les ARN d'images sont au format suivant :
        • Images de base privées : arn:aws:appstream:<CODE-REGION>:<ID-COMPTE-AWS>:image/<NOM-IMAGE>
        • Images de base publiques : arn:aws:appstream:<CODE-REGION>::image/<NOM-IMAGE>
    • instance_type = le type d'instance AppStream 2.0 à utiliser pour l'atelier. La valeur par défaut est stream.standard.medium.

    Votre compte doit disposer de limites établies pour la taille d'instance choisie. Par défaut, la limite de compte pour le type d'instance stream.standard.medium est de cinq.  

       4. Ouvrez la console Amazon S3 sur https://console.aws.amazon.com/s3/.


       5. Dans la liste Nom de compartiment, choisissez le nom du compartiment créé au cours de l'étape précédente.


       6. Dans la fenêtre de la console Amazon S3, sous l'onglet Présentation, sélectionnez Charger.


       7. Dans une fenêtre autre que celle de la console, atteignez le répertoire des ressources de site Internet décompressées sur votre ordinateur local. Sélectionnez tous les fichiers et dossiers du répertoire. Assurez-vous que le répertoire web lui-même n'est pas sélectionné.


       8. Faites un glisser-déposer de votre sélection dans la boîte de dialogue Charger.


       9. Sélectionnez Charger.


       10. Attendez la fin du chargement et vérifiez que les fichiers et dossiers pertinents apparaissent dans la liste de l'onglet Présentation.

    <!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>
  • Étape 3. Autorisez l'hébergement de site Web statique pour votre compartiment Amazon S3

    Sur un site Web statique, les pages comprennent du contenu statique. Elles peuvent également inclure des scripts côté client. À l'inverse, un site Web dynamique utilise un traitement côté serveur, y compris des scripts côté serveur, comme PHP, JSP ou ASP.NET. Amazon S3 ne prend pas en charge la rédaction de scripts côté serveur. Réalisez les étapes suivantes pour autoriser un hébergement de site Web statique pour votre compartiment.

    1. Une fois votre compartiment Amazon S3 sélectionné dans la console Amazon S3, sélectionnez l'onglet Propriétés.
    2. Sélectionnez Hébergement de site Web statique, puis Utiliser ce compartiment pour héberger un site Web.
    3. Pour Document d'index, saisissez index.html. Lorsque vous configurez un compartiment pour l'hébergement de sites Web, vous devez spécifier un document d'index.
    4. Notez le Point de terminaison en haut de la boîte de dialogue Hébergement de site Web statique. Après avoir activé votre compartiment pour l'hébergement de site Web statique, les navigateurs Internet peuvent accéder à l'ensemble de votre contenu par le biais du point de terminaison de site Web Amazon S3 pour votre compartiment.
    5. Sélectionnez Enregistrer.
  • Étape 4. Autorisez l'accès en lecture public pour votre compartiment Amazon S3

    Lorsque vous configurez un compartiment en tant que site Web, vous devez rendre les objets que vous souhaitez fournir publiquement lisibles. Pour ce faire, réalisez les étapes ci-dessous pour créer une stratégie de compartiment qui accorde à tout le monde une autorisation s3:GetObject.

    1. Une fois votre compartiment Amazon S3 sélectionné dans la console Amazon S3, sélectionnez l'onglet Autorisations.
    2. Sélectionnez Modifier pour modifier les paramètres d'accès public du compartiment.
    3. Décochez toutes les cases de l'onglet, puis sélectionnez Enregistrer.
    4. Lorsque vous recevez l'invite de confirmation, saisissez confirm. Ce champ est sensible à la casse.
    5. Sélectionnez Confirmer pour enregistrer vos modifications.
    6. Dans l'onglet Autorisations, sélectionnez Stratégie de compartiment.
    7. Dans le champ de texte éditeur de stratégie de compartiment, copiez et collez la stratégie suivante :

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

    <YOUR-BUCKET-NAME> est le nom de votre compartiment Amazon S3.

       8. Sélectionnez ENREGISTRER