Complete the following steps to upload the Example Corp. website assets by using the Amazon S3 console.
- Download the Example Corp. website assets from our repository to your local computer.
- Unzip the file that you downloaded on your local computer.
- Navigate to the Web_generic\Web folder, and open index.html. Make the following changes to this file. The default format for this file is included at the end of this procedure.
Required:
- stateMachineArn = Replace the default value with the ARN of the state machine that you created in module 3.
- subnet1id = Replace <SUBNET-ID> with the ID of the first private subnet in the VPC that you are using for this project.
- subnet2id = Replace <SUBNET-ID> with the ID of the second private subnet in the VPC that you are using for this project.
- securitygroup = Replace <SECURITY-GROUP-ID> with the ID of the security group that you want to associate with your AppStream 2.0 instances.
- url: = Replace the default value with your API execution URL.
To obtain this URL, open the API Gateway console. In the navigation pane, under APIs, choose examplecorp_eao, and then choose Stages. In the Stages pane, expand test, and then choose POST. At the top of the pane, the Invoke URL displays. The URL follows this format:
https://<UNIQUE-ID>.execute-api.amazonaws.com/test/execute
- ib_arn = The ARN of the base AppStream 2.0 image that you want to use to create the image builder. Do one of the following:
- Option 1: To use a current base image, go to the Base Image Version page. The image ARN should be formatted as follows:
- arn:aws:appstream:<REGION-CODE>::image/<Image name>
- Option 2: Specify the ARN of a private image that you own. To obtain the ARN for an image, use the AppStream 2.0 DescribeImages API action or the describe-images AWS CLI command. Image ARNs follow this format:
- Private base images: arn:aws:appstream:<REGION-CODE>:<AWS-ACCOUNT-ID>:image/<IMAGE-NAME>
- Public base images: arn:aws:appstream:<REGION-CODE>::image/<IMAGE-NAME>
- instance_type = The AppStream 2.0 instance type to use for the workshop. The default value is stream.standard.medium.
Your account must have limits set for the instance size that you choose. By default, the account limit for the stream.standard.medium instance type is five instances.
4. Open the Amazon S3 console at https://console.aws.amazon.com/s3/.
5. In the Bucket name list, choose the name of the bucket that you created in the previous step.
6. In the Amazon S3 console window, on the Overview tab, choose Upload.
7. In a window other than the console window, navigate to the unzipped website assets directory on your local computer. Select all of the files and folders under that directory. Verify that the Web directory itself is not selected.
8. Drag and drop your selections into the Upload dialog box.
9. Choose Upload.
10. Wait for the upload to complete, and verify that the correct files and folders appear in the list on the Overview tab.
<!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>
