아래의 단계별 지침에 따라 정적 웹 사이트를 호스팅합니다.

  • 1단계. 새 Amazon S3 버킷 생성

    Amazon S3를 사용하여 웹 서버를 구성하거나 관리할 필요 없이 정적 웹 사이트를 호스팅할 수 있습니다. 다음 단계를 완료하여 웹사이트에 모든 고정 자산을 호스팅할 새 Amazon S3 버킷을 생성합니다. 이 자산에는 HTML, CSS, JavaScript, 이미지 파일이 포함됩니다.

    1. https://console.aws.amazon.com/s3/에서 Amazon S3 콘솔을 엽니다.
    2. [버킷 생성]을 선택합니다.
    3. [버킷 이름] 필드에서 새 버킷에 전체적으로 고유한 DNS 준수 이름을 입력합니다. 예: examplecorp-demo-firstname-lastname.
    4. [리전] 필드에서 올바른 리전이 선택되었는지 확인합니다.
    5. [생성]을 선택합니다.
  • 2단계. Example Corp. 웹사이트 자산을 Amazon S3 버킷에 업로드

    다음 단계에 따라 Amazon S3 콘솔을 사용하여 Example Corp. 웹사이트 자산을 업로드합니다.

    1. 리포지토리에서 로컬 컴퓨터로 Example Corp. 웹사이트 자산을 다운로드합니다.
    2. 로컬 컴퓨터에 다운로드된 파일의 압축을 해제합니다.
    3. Web_generic\Web 폴더로 이동해서 index.html을 엽니다. 이 파일을 다음과 같이 변경합니다. 이 파일의 기본 형식은 이 절차의 마지막에 포함됩니다.

    필수:

    • stateMachineArn = 기본값을 모듈 3에서 생성한 상태 머신의 ARN으로 대체합니다.
    • subnet1id = <서브넷 ID>를 이 프로젝트에 사용하는 VPC에서 첫 번째 비공개 서브넷의 ID로 대체합니다.
    • subnet2id = <서브넷 ID>를 이 프로젝트에 사용하는 VPC에서 두 번째 비공개 서브넷의 ID로 대체합니다.
    • securitygroup = <보안 그룹 ID>를 AppStream 2.0 인스턴스와 연결하려는 보안 그룹의 ID로 대체합니다.
    • url: = 기본값을 API 실행 URL로 대체합니다.

    이 URL을 얻으려면 API 게이트웨이 콘솔을 엽니다. 탐색 창의 [API]에서 examplecorp_eao를 선택한 다음, [단계]를 선택합니다. [단계] 창에서 [테스트]를 펼친 다음, POST를 선택합니다. 창 상단에 호출 URL이 표시됩니다. URL 형식은 다음과 같습니다.

    https://<고유 ID>.execute-api.amazonaws.com/test/execute
     
    선택 사항:
    • ib_arn = 이미지 빌더를 생성하는 데 사용하려는 기본 AppStream 2.0 이미지의 ARN입니다. 다음 중 하나를 수행합니다.
      • 옵션 1: 제공된 기본 이미지(공개 Windows Server 2012 R2 기본 이미지)를 사용하려면 다음 ARN의 <리전 코드>를 해당 리전의 값으로 대체합니다.
        • arn:aws:appstream:<리전 코드>::image/AppStream-WinServer2012R2-09-18-2019
         
      • 옵션 2: 최근에 릴리스된 Windows Server 2016 또는 Windows Server 2019 기본 이미지를 사용하려면 다음 ARN 중 하나를 지정합니다.
        • arn:aws:appstream:<리전 코드>::image/AppStream-WinServer2016-09-18-2019
        • arn:aws:appstream:<리전 코드>::image/AppStream-WinServer2019-09-18-2019
         
      • 옵션 3: 자신이 소유한 개인 이미지의 ARN을 지정합니다. 이미지의 ARN을 얻으려면 AppStream 2.0 DescribeImages API 작업 또는 describe-images AWS CLI 명령을 사용합니다. 이미지 ARN의 형식은 다음과 같습니다.
        • 개인 기본 이미지: arn:aws:appstream:<리전 코드>:<AWS 계정 ID>:image/<이미지 이름>
        • 공개 기본 이미지: arn:aws:appstream:<리전 코드>::image/<이미지 이름>
    • instance_type = 워크숍에 사용할 AppStream 2.0 인스턴스 유형입니다. 기본값은 stream.standard.medium입니다.

    계정에는 선택한 인스턴스 크기에 대한 제한을 설정해야 합니다. 기본적으로 stream.standard.medium 인스턴스 유형의 계정 제한은 인스턴스 5개입니다.  

       4. https://console.aws.amazon.com/s3/에서 Amazon 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. [고정 웹사이트 호스팅] 대화 상자 위에 엔드포인트를 입력합니다. 고정 웹사이트 호스팅을 위한 버킷을 활성화하면 웹 브라우저에서 버킷의 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>*"
        }
    ]
    }

    <버킷 이름>은 Amazon S3 버킷의 이름입니다.

       8. [저장]을 선택합니다.