AWS Cloud9 IDE에서 실행 중인 애플리케이션 미리 보기 - AWS Cloud9
애플리케이션 실행실행 중인 애플리케이션 미리 보기

AWS Cloud9 는 더 이상 신규 고객이 사용할 수 없습니다. AWS Cloud9 의 기존 고객은 정상적으로 서비스를 계속 이용할 수 있습니다. 자세히 알아보기

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

AWS Cloud9 IDE에서 실행 중인 애플리케이션 미리 보기

AWS Cloud9 통합 개발 환경(IDE)을 사용하여 IDE 내에서 실행 중인 애플리케이션을 미리 볼 수 있습니다.

애플리케이션 실행

IDE 내에서 애플리케이션을 미리 보려면 AWS Cloud9 먼저 개발 환경에서 애플리케이션을 실행해야 합니다. 다음 포트를 통해 HTTP를 사용해야 합니다.

  • 8080

  • 8081

  • 8082

위의 모든 포트는 127.0.0.1 localhost 또는 0.0.0.0의 IP 주소를 사용해야 합니다.

참고

IP 주소가 127.0.0.1, localhost 또는 0.0.0.0인 포트 8080, 8081 또는 8082를 통해 HTTP를 사용하여 애플리케이션을 실행할 필요가 없습니다. 단, 이 경우 IDE 내에서 실행 중인 애플리케이션을 미리 볼 수 없습니다.

참고

미리 보기 애플리케이션은 IDE 내에서 실행되며 iframe 요소 내에 로드됩니다. 일부 애플리케이션 서버는 기본적으로 X-Frame-Options 헤더와 같은 iframe 요소에서 오는 요청을 차단할 수 있습니다. 미리 보기 애플리케이션이 미리 보기 탭에 표시되지 않는 경우 애플리케이션 서버가 iframe에 콘텐츠를 표시하는 것을 금지하지 않는지 확인하세요.

특정 포트와 IP 주소에서 애플리케이션을 실행하는 코드를 작성하려면 애플리케이션 문서를 참조하세요.

애플리케이션을 실행하려면 코드 실행을 참조하세요.

이 동작을 테스트하려면 환경의 루트에 있는 server.js라는 이름의 파일에 다음 JavaScript 코드를 추가합니다. 이 코드는 Node.js라는 파일을 사용하여 서버를 실행합니다.

참고

다음 예에서 text/html은 반환된 콘텐츠의 Content-Type입니다. 콘텐츠를 다른 형식으로 반환하려면 다른 Content-Type을 지정합니다. 예를 들어, CSS 파일 형식으로 text/css를 지정할 수 있습니다.

var http = require('http');
var fs = require('fs');
var url = require('url');

http.createServer( function (request, response) {
  var pathname = url.parse(request.url).pathname;
  console.log("Trying to find '" + pathname.substr(1) + "'...");

  fs.readFile(pathname.substr(1), function (err, data) {
    if (err) {
      response.writeHead(404, {'Content-Type': 'text/html'});
      response.write("ERROR: Cannot find '" + pathname.substr(1) + "'.");
      console.log("ERROR: Cannot find '" + pathname.substr(1) + "'.");
    } else {
      console.log("Found '" + pathname.substr(1) + "'.");
      response.writeHead(200, {'Content-Type': 'text/html'});
      response.write(data.toString());
    }
    response.end();
  });
}).listen(8080, 'localhost'); // Or 8081 or 8082 instead of 8080. Or '127.0.0.1' instead of 'localhost'.

또는 환경의 루트에 있는 server.py라는 이름의 파일에 다음 Python 코드를 추가 할 수 있습니다. 다음 예제에서는 Python을 사용하여 서버를 실행합니다.

import os
import http.server
import socketserver

ip = 'localhost' # Or '127.0.0.1' instead of 'localhost'.
port = '8080' # Or '8081' or '8082' instead of '8080'.
Handler = http.server.SimpleHTTPRequestHandler
httpd = socketserver.TCPServer((ip, int(port)), Handler)
httpd.serve_forever()

환경의 루트에서 index.html이라는 파일에 다음 HTML 코드를 추가합니다.

<html>
  <head>
    <title>Hello Home Page</title>
  </head>
  <body>
    <p style="font-family:Arial;color:blue">Hello, World!</p>
  </body>
</html>

애플리케이션 미리 보기 탭에서 이 파일의 HTML 출력을 보려면 Node.js의 경우 server.js, Python의 경우 server.py 파일을 실행합니다. 그러고 나서 다음 섹션의 단계에 따라 미리 봅니다. 애플리케이션 미리 보기 탭에서 URL의 끝부분에 /index.html을 추가한 다음 Enter 키를 누릅니다.

실행 중인 애플리케이션 미리 보기

애플리케이션을 미리 보기 전에 다음 사항을 확인하세요.

  • 애플리케이션은 포트 8080, 8081 또는 8082를 통해 HTTP 프로토콜을 사용하여 실행됩니다.

  • 해당 환경의 애플리케이션 IP 주소는 127.0.0.1, localhost 또는 0.0.0.0입니다.

  • 애플리케이션 코드 파일이 열려 있고 AWS Cloud9 IDE에서 활성 상태입니다.

이러한 세부 정보를 모두 확인한 후 메뉴에서 다음 옵션 중 하나를 선택합니다.

  • 미리 보기, 실행 중인 애플리케이션 미리 보기

  • 도구, 미리 보기, 실행 중인 애플리케이션 미리 보기

이러한 옵션 중 하나를 선택하면 환경 내에서 애플리케이션 미리 보기 탭이 열리고 애플리케이션의 출력이 탭에 표시됩니다.

참고

애플리케이션 미리 보기 탭에 오류가 표시되거나 비어 있으면 애플리케이션 미리 보기 탭에 오류가 표시되거나 이 탭이 비어 있음의 문제 해결 단계를 따릅니다. 애플리케이션이나 파일을 미리 볼 때 "브라우저에 타사 쿠키가 비활성화되어 있으므로 미리 보기 기능이 비활성화되었습니다."라는 알림이 표시되면 애플리케이션 미리 보기 또는 파일 미리 보기 알림: ‘서드 파티 쿠키가 사용 중지됨(Third-party cookies disabled)’의 문제 해결 단계를 따르세요.

참고

애플리케이션이 아직 실행되고 있지 않으면 애플리케이션 미리 보기 탭에 오류가 표시됩니다. 이 문제를 해결하려면 애플리케이션을 실행하거나 다시 시작한 다음 메뉴 모음 명령을 다시 선택합니다.

예를 들어, 언급된 어떤 포트나 IP에서도 애플리케이션을 실행할 수 없습니다. 또는 이러한 포트 중 하나 이상에서 애플리케이션을 동시에 실행해야 합니다. 예를 들어, 애플리케이션을 포트 8080과 3000에서 동시에 실행해야 합니다. 이 경우 애플리케이션 미리 보기 탭에 오류가 표시되거나 비어 있을 수 있습니다. 이는 환경 내의 애플리케이션 미리 보기 탭이 앞의 포트와 IP에서만 작동하고 한 번에 하나의 포트에서만 작동하기 때문입니다.

애플리케이션 미리 보기 탭의 URL을 다른 사용자와 공유하지 않는 것이 좋습니다. (URL의 형식은 입니다https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. 이 형식에서는 12a34567b8cd9012345ef67abcd890e1가 환경에 할당하는 AWS Cloud9 ID입니다. us-east-2는 환경의 AWS 리전 에 대한 ID입니다.) 이 URL은 환경의 IDE가 열려 있고 애플리케이션이 동일한 웹 브라우저에서 실행 중인 경우에만 작동합니다.

IDE 또는 IDE 외부의 별도의 웹 브라우저 탭에서 애플리케이션 미리 보기 탭을 0.0.0.0 사용하여 localhost, 또는 127.0.0.1의 IP를 방문하려고 하면 AWS Cloud9 IDE는 기본적으로 환경에 연결된 인스턴스 또는 자체 서버 대신 로컬 컴퓨터로 이동하려고 시도합니다.

IDE 외부에서 실행 중인 애플리케이션의 미리 보기를 다른 사용자에게 제공하는 방법에 대한 지침은 인터넷을 통해 실행 중인 애플리케이션 공유 섹션을 참조하세요.