Чтобы разместить статический веб-сайт, выполните указанные ниже пошаговые инструкции

  • Шаг 1. Создание новой корзины Amazon S3

    Сервис Amazon S3 можно использовать для размещения статических веб-сайтов, не настраивая при этом никакие веб-серверы и не управляя ими. Выполните следующие шаги, чтобы создать новую корзину Amazon S3 для размещения всех статических ресурсов вашего веб-сайта. Эти ресурсы включают HTML, CSS, JavaScript и файлы образов.

    1. Откройте консоль Amazon S3 по адресу https://console.aws.amazon.com/s3/.
    2. Нажмите кнопку Создать корзину.
    3. В поле Имя корзины введите глобально уникальное DNS-совместимое имя для новой корзины. Например: examplecorp-demo-firstname-lastname.
    4. В поле Регион проверьте правильность выбора региона.
    5. Нажмите кнопку Создать.
  • Шаг 2. Загрузка ресурсов типового веб-сайта в корзину Amazon S3

    Выполните следующие шаги, чтобы загрузить ресурсы типового веб-сайта с помощью консоли Amazon S3.

    1. Загрузите ресурсы типового веб-сайта из нашего репозитория на локальный компьютер.
    2. Распакуйте загруженный файл на локальном компьютере.
    3. Перейдите в папку Web_generic\Web и откройте файл index.html. Выполните для этого файла указанные ниже изменения. Формат по умолчанию для этого файла указан в конце описания процедуры.

    Обязательные изменения

    • stateMachineArn = замените значение по умолчанию номером ARN конечного автомата, созданного в модуле 3.
    • subnet1id = замените заполнитель <SUBNET-ID> идентификатором первой частной подсети в облаке VPC, которая используется для этого проекта.
    • subnet2id = замените заполнитель <SUBNET-ID> идентификатором второй частной подсети в облаке VPC, которая используется для этого проекта.
    • securitygroup = замените заполнитель <SECURITY-GROUP-ID> идентификатором группы безопасности, которую следует связать с вашими инстансами AppStream 2.0.
    • url: = замените значение по умолчанию URL-адресом выполнения API.

    Чтобы получить этот URL-адрес, откройте консоль API Gateway. В области навигации в разделе Интерфейсы API выберите запись examplecorp_eao и нажмите кнопку Этапы. На панели Этапы разверните раздел тестирование и нажмите кнопку POST. В верхней части панели отобразится значение URL-адрес вызова. URL-адрес имеет следующий формат:

    https://<UNIQUE-ID>.execute-api.amazonaws.com/test/execute
     
    Дополнительные изменения
    • ib_arn = номер ARN образа в базе AppStream 2.0, который следует использовать для создания элемента построения образа. Выполните одно из следующих действий.
      • Вариант 1. Чтобы использовать имеющийся образ (базовый образ публичного сервера Windows Server 2012 R2), замените заполнитель <REGION-CODE> в следующем ARN значением для вашего региона.
        • arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2012R2-09-18-2019
         
      • Вариант 2. Чтобы использовать недавно выпущенный базовый образ Windows Server 2016 или Windows Server 2019, укажите один из следующих ARN:
        • arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2016-09-18-2019
        • arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2019-09-18-2019
         
      • Вариант 3. Укажите ARN своего частного образа. Получить ARN для образа можно с помощью операции DescribeImages в интерфейсе API сервера AppStream 2.0 или команды describe-images в интерфейсе командной строки AWS. Номера ARN образов имеют указанный ниже формат.
        • Частные базовые образы: arn:aws:appstream:<REGION-CODE>:<AWS-ACCOUNT-ID>:image/<IMAGE-NAME>
        • Публичные базовые образы: arn:aws:appstream:<REGION-CODE>::image/<IMAGE-NAME>
    • instance_type = тип инстанса AppStream 2.0 для использования в ходе семинара. Значение по умолчанию: stream.standard.medium.

    В вашем аккаунте должны быть установлены ограничения размера для выбранного инстанса. По умолчанию ограничение аккаунта для типа stream.standard.medium составляет пять инстансов.  

       4. Откройте консоль Amazon S3 по адресу https://console.aws.amazon.com/s3/.


       5. В списке Имя корзины выберите имя корзины, созданной в предыдущем шаге.


       6. В окне консоли Amazon S3 на вкладке Обзор нажмите кнопку Загрузить.


       7. В окне, не относящемся к консоли, перейдите в распакованный каталог ресурсов веб-сайта на локальном компьютере. Выберите все файлы и папки в этом каталоге. Убедитесь, что сам каталог Web не выбран.


       8. Перетащите выбранные файлы и папки в диалоговое окно Загрузка.


       9. Нажмите кнопку Загрузить.


       10. Дождитесь завершения загрузки и убедитесь, что в списке на вкладке Обзор отображаются правильные файлы и папки.

    <!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>
  • Шаг 3. Включение функции размещения статического веб-сайта для корзины Amazon S3

    На статическом веб-сайте отдельные веб-страницы содержат статический контент. Они также могут содержать скрипты на стороне клиента. В отличие от этого, динамический веб-сайт использует функцию обработки на стороне сервера, включая скрипты на стороне сервера, такие как PHP, JSP или ASP.NET. Сервер Amazon S3 не поддерживает скрипты на стороне сервера. Выполните указанные ниже шаги, чтобы включить функцию размещения статического веб-сайта для вашей корзины.

    1. Выберите корзину Amazon S3 в консоли Amazon S3 и перейдите на вкладку Свойства.
    2. В разделе Размещение статических веб-сайтов выберите пункт Использовать эту корзину для размещения веб-сайта.
    3. В поле Начальный документ введите index.html. При настройке корзины для размещения веб-сайта необходимо указать начальный документ.
    4. Запишите адрес, указанный в верхней части диалогового окна Размещение статических веб-сайтов. После включения функции размещения статического веб-сайта для корзины веб-браузеры смогут получить доступ ко всему вашему контенту через адрес веб-сайта Amazon S3 для вашей корзины.
    5. Нажмите кнопку Сохранить.
  • Шаг 4. Включение общего доступа на чтение для корзины Amazon S3

    После настройки корзины как веб-сайта необходимо включить общий доступ на чтение для объектов, размещенных в ней. Для этого выполните указанные ниже шаги по созданию политики корзины, которая предоставляет всем разрешение s3:GetObject.

    1. Выберите корзину Amazon S3 в консоли Amazon S3 и перейдите на вкладку Разрешения.
    2. Нажмите кнопку Редактировать, чтобы изменить настройки общего доступа к корзине.
    3. Снимите все флажки на вкладке, затем нажмите кнопку Сохранить.
    4. В отобразившемся поле для подтверждения введите подтвердить. В этом поле учитывается регистр.
    5. Нажмите кнопку Подтвердить, чтобы сохранить изменения.
    6. На вкладке Разрешения выберите раздел Политика корзин.
    7. В текстовом поле редактора политики корзин скопируйте и вставьте указанную ниже политику.

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

    Замените заполнитель <YOUR-BUCKET-NAME> именем вашей корзины Amazon S3.

       8. Нажмите кнопку СОХРАНИТЬ.