請遵循逐步指示來託管靜態網站

  • 步驟 1.建立新的 Amazon S3 儲存貯體

    無需設定或管理任何 Web 伺服器,您即可使用 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 = 使用您在單元 3 中建立的 狀態機器的 ARN 取代預設值。
    • subnet1id = 使用您用於此專案的 VPC 中的第一個私有子網路的 ID 取代 <SUBNET-ID>。
    • subnet2id = 使用您用於此專案的 VPC 中的第二個私有子網路的 ID 取代 <SUBNET-ID>。
    • securitygroup = 使用您想與 AppStream 2.0 關聯的安全群組的 ID 取代 <SECURITY-GROUP-ID>。
    • url: = 使用您的 API 執行 URL 取代預設值。

    要取得此 URL,請開啟 API Gateway 主控台。在導覽窗格中的 APIs 下,選擇 examplecorp_eao,然後選擇階段。在階段窗格中,展開測試,然後選擇 POST。在窗格的頂部,會顯示叫用 URL。URL 遵循此格式:

    https://<UNIQUE-ID>.execute-api.amazonaws.com/test/execute
     
    選擇性:
    • ib_arn = 您想用於建立映像產生器的基本 AppStream 2.0 映像的 ARN。執行以下其中一項:
      • 選項 1:要使用提供的預設映像 (公有 Windows Server 2012 R2 基本映像),請使用您區域的值取代以下 ARN 中的 <REGION-CODE>
        • 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,請使用 AppStream 2.0 DescribeImages API 動作或 describe-images AWS CLI 命令。映像 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. 記下靜態網站託管對話方塊頂部的端點。您為靜態網站託管啟用儲存貯體後,Web 瀏覽器即可透過您儲存貯體的 Amazon S3 網站端點存取所有內容。
    5. 選擇儲存
  • 步驟 4.為您的 Amazon S3 儲存貯體啟用公開讀取存取

    當您將儲存貯體設定為網站時,您必須將您想要提供的物件設為公開可讀。為此,完成以下步驟以建立儲存貯體政策,進而授與每個人 s3:GetObject 許可。

    1. 使用您在 Amazon S3 主控台中選取的 Amazon S3 儲存貯體,選擇許可標籤。
    2. 選擇編輯以變更儲存貯體的公開存取設定。
    3. 清理標籤上的所有核取方塊,然後選擇儲存
    4. 當系統提示您確認時,請鍵入 confirm。此欄位會區分大小寫。
    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.選擇儲存