

 AWS Cloud9 tidak lagi tersedia untuk pelanggan baru. Pelanggan yang sudah ada AWS Cloud9 dapat terus menggunakan layanan seperti biasa. [Pelajari selengkapnya](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/)

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Mempratinjau aplikasi yang sedang berjalan di IDE AWS Cloud9
<a name="app-preview"></a>

Anda dapat menggunakan AWS Cloud9 Integrated Development Environment (IDE) untuk melihat pratinjau aplikasi yang sedang berjalan dari dalam IDE.

## Menjalankan aplikasi
<a name="app-preview-run-app"></a>

Sebelum Anda dapat melihat pratinjau aplikasi Anda dari dalam IDE, aplikasi Anda harus berjalan di lingkungan AWS Cloud9 pengembangan. Itu harus menggunakan HTTP melalui port berikut:
+ `8080`
+ `8081`
+ `8082`

Semua port di atas harus menggunakan alamat IP `127.0.0.1``localhost`, atau`0.0.0.0`.

**catatan**  
Anda tidak diharuskan untuk menjalankan aplikasi Anda menggunakan HTTP melalui port `8080``8081`,, atau `8082` dengan alamat IP`127.0.0.1`,`localhost`, atau`0.0.0.0`. Namun, jika Anda tidak melakukannya, Anda tidak dapat melihat pratinjau aplikasi yang sedang berjalan dari dalam IDE.

**catatan**  
Aplikasi pratinjau dijalankan dalam IDE dan dimuat di dalam elemen iframe. Beberapa server aplikasi mungkin secara default memblokir permintaan yang berasal dari elemen iframe, seperti X-Frame-Options header. Jika aplikasi pratinjau Anda tidak ditampilkan di tab pratinjau, pastikan server aplikasi Anda tidak melarang menampilkan konten dalam iframe. 

Untuk menulis kode untuk menjalankan aplikasi Anda pada port dan alamat IP tertentu, lihat dokumentasi aplikasi Anda.

Untuk menjalankan aplikasi Anda, lihat [Menjalankan Kode Anda](build-run-debug.md#build-run-debug-run).

Untuk menguji perilaku ini, tambahkan JavaScript kode berikut ke file yang diberi nama `server.js` di root lingkungan Anda. Kode ini menjalankan server menggunakan file yang bernama Node.js.

**catatan**  
Dalam contoh berikut, `text/html` adalah konten `Content-Type` yang dikembalikan. Untuk mengembalikan konten dalam format yang berbeda, tentukan yang berbeda`Content-Type`. Misalnya, Anda dapat menentukan `text/css` untuk format file 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'.
```

Di root lingkungan Anda, Anda dapat menambahkan kode Python berikut ke file dengan nama seperti. `server.py` Dalam contoh berikut, server dijalankan menggunakan 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()
```

Di root lingkungan Anda, tambahkan kode HTML berikut ke file yang diberi nama`index.html`.

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

Untuk melihat output HTML dari file ini pada tab pratinjau aplikasi, jalankan `server.js` dengan Node.js atau `server.py` file dengan Python. Kemudian, ikuti langkah-langkah di bagian selanjutnya untuk melihat pratinjaunya. Pada tab pratinjau aplikasi, tambahkan `/index.html` ke akhir URL, lalu tekan `Enter`.

## Mempratinjau aplikasi yang sedang berjalan
<a name="app-preview-preview-app"></a>

Sebelum Anda melihat pratinjau aplikasi Anda, konfirmasikan hal berikut:
+ Aplikasi Anda berjalan menggunakan protokol HTTP melalui port`8080`,`8081`, atau`8082`.
+ Alamat IP aplikasi Anda di lingkungan adalah`127.0.0.1`,`localhost`, atau`0.0.0.0`. 
+ File kode aplikasi Anda terbuka dan aktif di AWS Cloud9 IDE.

Setelah Anda mengonfirmasi semua detail ini, pilih salah satu opsi berikut dari bilah menu:
+  **Pratinjau, Pratinjau Aplikasi yang Berjalan** 
+  **Alat, Pratinjau, Pratinjau Aplikasi yang Menjalankan** 

Salah satu opsi ini membuka tab pratinjau aplikasi dalam lingkungan, dan kemudian menampilkan output aplikasi pada tab.

**catatan**  
Jika tab pratinjau aplikasi menampilkan kesalahan atau kosong, ikuti langkah-langkah pemecahan masalah di. [Tab pratinjau aplikasi menampilkan kesalahan atau kosong](troubleshooting.md#troubleshooting-app-preview) Jika ketika Anda mencoba untuk melihat pratinjau aplikasi atau file, Anda mendapatkan pemberitahuan berikut *“Fungsionalitas pratinjau dinonaktifkan karena browser Anda menonaktifkan cookie pihak ketiga”*, ikuti langkah-langkah pemecahan masalah di. [Pemberitahuan pratinjau aplikasi atau pratinjau file: "Cookie pihak ke tiga dinonaktifkan"](troubleshooting.md#troubleshooting-preview)

**catatan**  
Jika aplikasi belum berjalan, kesalahan muncul di tab pratinjau aplikasi. Untuk mengatasi masalah ini, jalankan atau restart aplikasi, lalu pilih perintah menu bar lagi.  
Misalkan, misalnya, aplikasi Anda tidak dapat berjalan di salah satu port atau IPs yang disebutkan. Atau, aplikasi Anda harus berjalan di lebih dari satu port ini secara bersamaan. Misalnya, aplikasi Anda harus berjalan pada port `8080` dan `3000` pada saat yang sama. Jika itu masalahnya, maka tab pratinjau aplikasi mungkin menampilkan kesalahan atau mungkin kosong. Ini karena tab pratinjau aplikasi dalam lingkungan hanya berfungsi dengan port sebelumnya dan. IPs Selain itu, aplikasi ini bekerja hanya dengan satu port pada satu waktu.  
Kami tidak menyarankan untuk berbagi URL di tab pratinjau aplikasi dengan orang lain. (URL dalam format berikut:`https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/`. Dalam format ini, `12a34567b8cd9012345ef67abcd890e1` adalah ID yang AWS Cloud9 diberikan ke lingkungan. `us-east-2`adalah ID Wilayah AWS untuk lingkungan.) URL ini bekerja hanya ketika IDE untuk lingkungan terbuka dan aplikasi berjalan di peramban web yang sama.  
Jika Anda mencoba mengunjungi IP`127.0.0.1`,`localhost`, atau `0.0.0.0` dengan menggunakan tab pratinjau aplikasi di IDE atau di tab browser web terpisah di luar IDE, AWS Cloud9 IDE secara default mencoba masuk ke komputer lokal Anda, bukan instance atau server Anda sendiri yang terhubung ke lingkungan.

Untuk petunjuk tentang cara memberi orang lain pratinjau aplikasi yang sedang berjalan di luar IDE, lihat[Membagikan aplikasi yang sedang berjalan melalui internet](app-preview-share.md).