ステップバイステップ手順通りに、静的ウェブサイトをホストします。

  • ステップ 1:新規の Amazon S3 バケットを作成する

    Amazon S3 を使用して静的ウェブサイトをホストできます。ウェブサーバーを設定または管理する必要はありません。以下の手順を実行して、新規の Amazon S3 バケットを作成し、ウェブサイトの静的アセットをすべてホストします。静的アセットには HTML、CSS、JavaScript、画像ファイルが含まれます。

    1. Amazon S3 コンソールを https://console.aws.amazon.com/s3/ で開きます。
    2. [バケットを作成する] を選択します。
    3. [バケット名] フィールドに、新規のバケット用の、グローバルに一意な DSN 準拠の名前を入力します。例: examplecorp-demo-firstname-lastname
    4. [リージョン] フィールドに、正しいリージョンが選択されていることを確認します。
    5. [作成] を選択します。
  • ステップ 2:Example Corp. ウェブサイトのアセットを、使用中の Amazon S3 バケットにアップロードする

    以下の手順を実行して、Example Corp. ウェブサイトのアセットを Amazon S3 コンソールを使用してアップロードします。

    1. Example Corp. ウェブサイトのアセットをリポジトリからローカルコンピュータにダウンロードします。
    2. ローカルコンピュータにダウンロードしたファイルを解凍します。
    3. [Web_generic\Web] フォルダに移動し、index.html を開きます。 このファイルに次の変更を加えます。このファイルのデフォルトの形式は、この手順の最後に記載されています。

    必須:

    • stateMachineArn = デフォルト値を、モジュール 3 で作成したステートマシンの ARN に置き換えます。
    • subnet1id = <SUBNET-ID> を、このプロジェクトで使用している VPC の最初のプライベートサブネット ID に置き換えます。
    • subnet2id = <SUBNET-ID> を、このプロジェクトで使用している VPC の 2 番目のプライベートサブネット ID に置き換えます。
    • securitygroup = <SECURITY-GROUP-ID> を、AppStream 2.0 インスタンスに関連付けるセキュリティグループの ID に置き換えます。
    • url: = デフォルト値を API 実行 URL に置き換えます。

    この URL を取得するには、API Gateway コンソールを開きます。ナビゲーションペインで [API] の下にある [examplecorp_eao] を選択し、次に [ステージ] を選択します。[ステージ] ペインで [test] を展開し、[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 ベースイメージを使用するには、次の ARNS のいずれかを指定します。
        • 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 インスタンスタイプのアカウントは 5 つのインスタンスに制限されています。 

       4.Amazon S3 コンソールを https://console.aws.amazon.com/s3/ で開きます。


       5.バケット名リストから、前の手順で作成したバケット名を選択します。


       6.Amazon S3 コンソールウィンドウの [概要] タブで、[アップロード] を選択します。


       7.コンソールウィンドウ以外のウィンドウで、ローカルコンピュータの解凍されたウェブサイトアセットのディレクトリに移動します。移動先ディレクトリの下にあるファイルとフォルダをすべて選択します。ウェブディレクトリそのものは選択していないことを確認します。


       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. 確認を求められたら、「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.[保存] を選択します。