Follow the step-by-step instructions to Host a static website

  • Step 1. Create a new Amazon S3 bucket

    You can host your web site assets from any webserver, however for this workshop Amazon S3 will be used to host a static website without having to configure or manage any web servers. Complete the following steps to create a new Amazon S3 bucket to host all of the static assets for your website. These assets include HTML, CSS, JavaScript, and image files.

    1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/.
    2. Choose Create bucket.
    3. In the Bucket name field, type a globally unique DNS-compliant name for your new bucket. For example: examplecorp-demo-firstname-lastname.
    4. In the Region field, verify that the correct Region is selected.
    5. Choose Create.
  • Step 2. Upload the Example Corp. website assets to your Amazon S3 bucket

    Complete the following steps to upload the Example Corp. website assets by using the Amazon S3 console.

    1. Download the Example Corp. website assets from our repository to your local computer.
    2. Unzip the file that you downloaded on your local computer.
    3. 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>
  • Step 3. Enable static website hosting for your Amazon S3 bucket

    On a static website, individual webpages include static content. They might also contain client-side scripts. By contrast, a dynamic website relies on server-side processing, including server-side scripts such as PHP, JSP, or ASP.NET. Amazon S3 does not support server-side scripting. Complete the following steps to enable static website hosting for your bucket.

    1. With your Amazon S3 bucket selected in the Amazon S3 console, choose the Properties tab.
    2. Choose Static website hosting, and then choose Use this bucket to host a website.
    3. For Index Document, type index.html. When you configure a bucket for website hosting, you must specify an index document.
    4. Make a note of the Endpoint at the top of the Static website hosting dialog box. After you enable your bucket for static website hosting, web browsers can access all of your content through the Amazon S3 website endpoint for your bucket.
    5. Choose Save.
  • Step 4. Enable public read access for your Amazon S3 bucket

    When you configure a bucket as a website, you must make the objects that you want to serve publicly readable. To do this, complete the following steps to create a bucket policy that grants everyone s3:GetObject permission.

    1. With your Amazon S3 bucket selected in the Amazon S3 console, choose the Permissions tab.
    2. Choose Edit to change the public access settings for the bucket.
    3. Clear all of the check boxes on the tab, and then choose Save.
    4. When you’re prompted for confirmation, type confirm. This field is case-sensitive.
    5. Choose Confirm to save your changes.
    6. On the Permissions tab, choose Bucket Policy.
    7. In the bucket policy editor text box, copy and paste the following policy:

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

    Where <YOUR-BUCKET-NAME> is the bucket name of your Amazon S3 bucket.

       8. Choose SAVE