Conclua as etapas a seguir para carregar os ativos do site da Example Corp. usando o console do Amazon S3.
- Faça o download dos recursos do site da Example Corp. do nosso repositório para o seu computador local.
- Descompacte o arquivo que você fez o download em seu computador local.
- Navegue até a pasta Web_generic\Web e abra o index.html. Faça as seguintes alterações neste arquivo. O formato padrão para este arquivo está incluído no final deste procedimento.
Obrigatório:
- stateMachineArn = Substitua o valor padrão pelo ARN da máquina de estado que você criou no módulo 3.
- subnet1id = Substitua <SUBNET-ID> pelo ID da primeira sub-rede privada na VPC que você está usando para este projeto.
- subnet2id = Substitua <SUBNET-ID> pelo ID da segunda sub-rede privada na VPC que você está usando para este projeto.
- securitygroup = Substitua <SECURITY-GROUP-ID> pelo ID do grupo de segurança que você deseja associar às instâncias do AppStream 2.0.
- url: = Substitua o valor padrão pelo seu URL de execução da API.
Para obter esse URL, abra o console do API Gateway. No painel de navegação, em APIs, selecione examplecorp_eao e, depois, Estágios. No painel Estágios, expanda teste e escolha POST. Na parte superior do painel, a URL de chamada é exibida. A URL segue este formato:
https://<UNIQUE-ID>.execute-api.amazonaws.com/test/execute
Opcional:
- ib_arn = O ARN da imagem base do AppStream 2.0 que você deseja usar para criar o construtor de imagens. Execute uma das seguintes ações:
- Opção 1: para usar a imagem padrão fornecida (uma imagem básica pública do Windows Server 2012 R2), substitua <REGION-CODE> no ARN a seguir pelo valor da sua região.
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2012R2-09-18-2019
- Opção 2: para usar uma imagem base do Windows Server 2016 ou Windows Server 2019 lançada recentemente, especifique um dos seguintes ARNS:
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2016-09-18-2019
- arn:aws:appstream:<REGION-CODE>::image/AppStream-WinServer2019-09-18-2019
- Opção 3: especifique o ARN de uma imagem privada que você possui. Para obter o ARN para uma imagem, use a ação da API AppStream 2.0 DescribeImages ou o comando da CLI da AWS descreva-imagens. Os ARNs de imagem seguem este formato:
- Imagens de base privadas: arn:aws:appstream:<REGION-CODE>:<AWS-ACCOUNT-ID>:image/<IMAGE-NAME>
- Imagens de base pública: arn:aws:appstream:<REGION-CODE>::image/<IMAGE-NAME>
- instance_type = O tipo de instância do AppStream 2.0 a ser usado no workshop. O valor padrão é stream.standard.medium.
Sua conta deve ter limites definidos para o tamanho da instância que você escolher. Por padrão, o limite da conta para o tipo de instância stream.standard.medium é de cinco instâncias.
4. Abra o console do Amazon S3 em https://console.aws.amazon.com/s3/.
5. Na lista Nome do bucket, escolha o nome do bucket que você criou na etapa anterior.
6. Na janela do console do Amazon S3, na guia Visão geral, escolha Upload.
7. Em uma janela diferente da janela do console, navegue até o diretório descompactado de ativos do site no computador local. Selecione todos os arquivos e pastas nesse diretório. Verifique se o próprio diretório da Web não está selecionado.
8. Arraste e solte suas seleções na caixa de diálogo Upload.
9. Selecione Upload.
10. Aguarde a conclusão do upload e verifique se os arquivos e pastas corretos aparecem na lista da guia Visão geral.
<!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>
