Mempratinjau aplikasi yang berjalan di AWS Cloud9 Integrated Development Environment (IDE) - AWS Cloud9
Menjalankan aplikasiMempratinjau aplikasi yang sedang berjalanMemuat ulang pratinjau aplikasiMengubah jenis pratinjau aplikasiMembuka pratinjau aplikasi di tab peramban web terpisahBeralih ke URL pratinjau yang berbedaMembagikan aplikasi yang sedang berjalan melalui internet

AWS Cloud9 tidak lagi tersedia untuk pelanggan baru. Pelanggan yang sudah ada AWS Cloud9 dapat terus menggunakan layanan seperti biasa. Pelajari lebih lanjut”

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

Mempratinjau aplikasi yang berjalan di AWS Cloud9 Integrated Development Environment (IDE)

Anda dapat menggunakan AWS Cloud9 IDE untuk melihat pratinjau aplikasi yang sedang berjalan dari dalam IDE.

Menjalankan aplikasi

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.1localhost, atau0.0.0.0.

catatan

Anda tidak diharuskan untuk menjalankan aplikasi Anda menggunakan HTTP melalui port 80808081,, atau 8082 dengan alamat IP127.0.0.1,localhost, atau0.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 header X-Frame-Options. 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.

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 berbedaContent-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 namaindex.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

Sebelum Anda melihat pratinjau aplikasi Anda, konfirmasikan hal berikut:

  • Aplikasi Anda berjalan menggunakan protokol HTTP melalui port8080,8081, atau8082.

  • Alamat IP aplikasi Anda di lingkungan adalah127.0.0.1,localhost, atau0.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 Jika ketika Anda mencoba untuk melihat pratinjau aplikasi atau file, Anda mendapatkan pemberitahuan berikut “Fungsionalitas pratinjau dinonaktifkan karena browser Anda memiliki cookie pihak ketiga yang dinonaktifkan”, ikuti langkah-langkah pemecahan masalah di. Pemberitahuan pratinjau aplikasi atau pratinjau file: "Cookie pihak ke tiga dinonaktifkan"

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 IP 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 dan IP sebelumnya. 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-2adalah 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 IP127.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, lihatMembagikan aplikasi yang sedang berjalan melalui internet.

Memuat ulang pratinjau aplikasi

Pada tab pratinjau aplikasi, pilih tombol Refresh (panah melingkar).

catatan

Perintah ini tidak me-restart server. Ini hanya menyegarkan isi tab pratinjau aplikasi.

Mengubah jenis pratinjau aplikasi

Pada tab pratinjau aplikasi, pilih salah satu dari berikut ini dari daftar jenis pratinjau:

  • Peramban: Pratinjau output dalam format peramban web.

  • Konten Mentah (UTF-8): Upaya untuk melihat pratinjau output dalam format Unicode Transformation Format 8-bit (UTF-8), jika berlaku.

  • Markdown: Mencoba untuk melihat pratinjau output dalam format Markdown, jika berlaku.

Membuka pratinjau aplikasi di tab peramban web terpisah

Pada tab pratinjau aplikasi, pilih Pop Out Ke Jendela Baru.

catatan

AWS Cloud9 IDE juga harus berjalan di setidaknya satu tab lain di browser web yang sama. Jika tidak, pratinjau aplikasi tidak ditampilkan di tab browser web terpisah.

AWS Cloud9 IDE juga harus berjalan di setidaknya satu tab lain di browser web yang sama. Jika tidak, pratinjau aplikasi tidak ditampilkan di tab browser web terpisah. Jika tab pratinjau aplikasi menampilkan kesalahan atau kosong, ikuti langkah-langkah pemecahan masalah di. Pemberitahuan pratinjau aplikasi atau pratinjau file: "Cookie pihak ke tiga dinonaktifkan"

Beralih ke URL pratinjau yang berbeda

Pada tab pratinjau aplikasi, masukkan jalur ke URL yang berbeda di bilah alamat. Bilah alamat terletak di antara tombol Refresh dan daftar jenis pratinjau.

Membagikan aplikasi yang sedang berjalan melalui internet

Setelah Anda melihat pratinjau aplikasi yang berjalan, Anda dapat membuatnya tersedia untuk orang lain melalui internet.

Jika instans Amazon EC2 terhubung ke lingkungan Anda, ikuti langkah-langkah berikut. Jika tidak, konsultasikan dokumentasi server Anda.

Langkah 1: Dapatkan ID dan alamat IP instans

Pada langkah ini, Anda mencatat ID instans dan alamat IP publik untuk instans Amazon EC2 yang terhubung ke lingkungan. Anda memerlukan ID instans di langkah selanjutnya untuk mengizinkan permintaan aplikasi masuk. Kemudian, bagikan alamat IP publik kepada orang lain sehingga mereka dapat mengakses aplikasi yang sedang berjalan.

  1. Dapatkan ID instans Amazon EC2. Untuk mendapatkannya, lakukan salah satu hal berikut:

    • Dalam sesi terminal di AWS Cloud9 IDE untuk lingkungan, jalankan perintah berikut untuk mendapatkan ID instans Amazon EC2.

      curl http://169.254.169.254/latest/meta-data/instance-id

      ID instance dalam format berikut:i-12a3b456c789d0123. Catat ID instans ini.

    • Di IDE untuk lingkungan, pada bilah menu, pilih ikon pengguna Anda, dan kemudian pilih Kelola Instans EC2.

      Memilih untuk mengelola instance dari AWS Cloud9 IDE

      Di konsol Amazon EC2 yang ditampilkan, catat ID instans yang ditampilkan di kolom ID Instans. ID instance dalam format ini:i-12a3b456c789d0123.

  2. Dapatkan alamat IP publik instans Amazon EC2. Untuk mendapatkannya, lakukan salah satu hal berikut:

    • Di IDE untuk lingkungan, pada bilah menu, pilih Bagikan. Di kotak dialog Bagikan lingkungan ini, catat alamat IP publik di kotak Aplikasi. Alamat IP publik dalam format ini: 192.0.2.0

    • Dalam sesi terminal di IDE untuk lingkungan, jalankan perintah berikut untuk mendapatkan alamat IP publik instans Amazon EC2.

      curl http://169.254.169.254/latest/meta-data/public-ipv4

      Alamat IP publik dalam format ini: 192.0.2.0 Catat alamat IP publik ini.

    • Di IDE untuk lingkungan, pada bilah menu, pilih ikon pengguna Anda, dan kemudian pilih Kelola Instans EC2. Di konsol Amazon EC2 yang ditampilkan, pada tab Deskripsi, catat alamat IP publik untuk bidang IP Publik IPv4. Alamat IP publik dalam format ini: 192.0.2.0

    catatan

    Alamat IP publik aplikasi Anda dapat berubah kapan saja instans untuk aplikasi Anda dimulai ulang. Untuk mencegah alamat IP Anda berubah, alokasikan alamat IP Elastis. Kemudian, tetapkan alamat itu ke instance yang sedang berjalan. Untuk petunjuk, lihat Mengalokasikan Alamat IP Elastis dan Mengaitkan Alamat IP Elastis dengan Instans Berjalan di Panduan Pengguna Amazon EC2. Mengalokasikan alamat IP Elastis dapat Akun AWS menyebabkan Anda dikenakan biaya. Untuk informasi selengkapnya, lihat Penetapan Harga Amazon EC2.

Langkah 2: Siapkan grup keamanan untuk instans

Pada langkah ini, di konsol Amazon EC2, siapkan grup keamanan Amazon EC2 untuk instance yang terhubung ke lingkungan. Atur untuk memungkinkan permintaan HTTP masuk melalui port 8080, 8081, atau 8082.

catatan

Anda tidak diharuskan menjalankan menggunakan HTTP melalui port8080,8081, atau8082. Jika Anda tidak melakukan ini, Anda tidak dapat melihat pratinjau aplikasi yang sedang berjalan dari dalam IDE. Untuk informasi selengkapnya, lihat Mempratinjau aplikasi yang sedang berjalan. Jika tidak, jika Anda menjalankan protokol atau port yang berbeda, gantilah di langkah ini.

Untuk lapisan keamanan tambahan, siapkan daftar kontrol akses jaringan (ACL) untuk subnet di VPC yang dapat digunakan instance. Untuk informasi selengkapnya tentang grup keamanan dan ACL jaringan, lihat hal berikut ini:

  1. Di IDE untuk lingkungan, pada bilah menu, pilih ikon pengguna Anda, dan kemudian pilih Kelola Instans EC2. Kemudian lanjutkan ke langkah 3 dalam prosedur ini.

  2. Jika memilih Kelola Instans EC2 atau langkah lain dalam prosedur ini menghasilkan kesalahan, masuk ke konsol Amazon EC2 menggunakan kredenal untuk administrator di konsol Anda. Akun AWS Kemudian, lengkapi instruksi berikut. Jika Anda tidak dapat melakukan ini, tanyakan kepada Akun AWS administrator Anda.

    1. Masuk ke AWS Management Console https://console.aws.amazon.com/ jika Anda belum masuk.

    2. Buka konsol Amazon EC2. Untuk melakukan ini, di bilah navigasi, pilih Layanan. Kemudian, pilih EC2.

    3. Di bilah navigasi, pilih Wilayah AWS tempat lingkungan Anda berada.

    4. Jika Dasbor EC2 ditampilkan, pilih Instans Berjalan. Jika tidak, di panel navigasi layanan, perluas Instans jika belum diperluas dan pilih Instans.

    5. Dalam daftar instance, pilih instance dengan ID Instance yang cocok dengan ID instans yang Anda catat sebelumnya.

  3. Di tab Deskripsi untuk contoh, pilih tautan grup keamanan yang ada di sebelah Grup keamanan.

  4. Dengan grup keamanan yang ditampilkan, lihat tab Masuk. Jika ada aturan dengan Jenis diatur ke Aturan TCP Kustom dan Rentang Port diatur ke 8080, 8081, atau 8082, pilih Batal, dan lewati ke depan. Langkah 3: Siapkan subnet untuk instans Jika tidak, pilih Edit.

  5. Di kotak dialog Edit aturan masuk, pilih Tambahkan Aturan.

  6. Untuk Jenis, pilih Aturan TCP Kustom.

  7. Untuk Port Range, masukkan8080,8081, atau8082.

  8. Untuk Sumber, pilih Di mana saja.

    catatan

    Dengan memilih Anywhere for Source, Anda mengizinkan permintaan masuk dari alamat IP apa pun. Untuk membatasi ini ke alamat IP tertentu, pilih Custom dan kemudian masukkan rentang alamat IP. Atau, pilih IP Saya untuk membatasi permintaan hanya dari alamat IP Anda.

  9. Pilih Simpan.

Langkah 3: Siapkan subnet untuk instans

Gunakan konsol Amazon EC2 dan Amazon VPC untuk menyiapkan subnet untuk instans Amazon EC2 yang terhubung ke lingkungan. Kemudian, izinkan permintaan HTTP masuk melalui port 8080, 8081, atau 8082.

catatan

Anda tidak diharuskan untuk menjalankan menggunakan HTTP melalui port8080,8081, atau8082. Namun, jika tidak, Anda tidak dapat melihat pratinjau aplikasi yang sedang berjalan dari dalam IDE. Untuk informasi selengkapnya, lihat Mempratinjau aplikasi yang sedang berjalan. Jika tidak, jika Anda menjalankan protokol atau port yang berbeda, gantilah di langkah ini.

Langkah ini menjelaskan cara menyiapkan ACL jaringan untuk subnet di Amazon VPC yang dapat digunakan instans. Ini tidak diperlukan tetapi direkomendasikan. Menyiapkan jaringan ACL menambahkan lapisan keamanan tambahan. Untuk informasi lebih lanjut tentang ACL jaringan, lihat hal berikut:

  1. Di konsol Amazon EC2, di panel navigasi layanan, perluas Instans jika belum diperluas, dan pilih Instans.

  2. Dalam daftar instance, pilih instance dengan ID Instance yang cocok dengan ID instans yang Anda catat sebelumnya.

  3. Di tab Deskripsi untuk instans, perhatikan nilai ID Subnet. ID subnet dalam format berikut:subnet-1fab8aEX.

  4. Buka konsol Amazon VPC. Untuk melakukan ini, di bilah AWS navigasi, pilih Layanan dan kemudian pilih VPC.

    Untuk langkah ini, kami sarankan Anda masuk ke konsol VPC Amazon menggunakan kredensi administrator di konsol Anda. Akun AWS Jika Anda tidak dapat melakukan ini, tanyakan kepada Akun AWS administrator Anda.

  5. Jika Dasbor VPC ditampilkan, pilih Subnet. Jika tidak, di panel navigasi layanan, pilih Subnet.

  6. Dalam daftar subnet, pilih subnet dengan nilai Subnet ID yang cocok dengan yang Anda catat sebelumnya.

  7. Pada tab Ringkasan, pilih tautan ACL jaringan yang berada di sebelah Network ACL.

  8. Dalam daftar ACL jaringan, pilih ACL jaringan. (Hanya ada satu ACL jaringan.)

  9. Lihat pada tab Aturan Masuk untuk ACL jaringan. Jika aturan sudah ada di mana Jenis diatur ke HTTP* (8080), HTTP* (8081), atau HTTP* (8082), lanjutkan ke Langkah 4: Bagikan URL aplikasi yang sedang berjalan. Jika tidak, pilih Edit.

  10. Pilih Tambahkan aturan lain.

  11. Untuk Aturan #, masukkan nomor untuk aturan (misalnya,200).

  12. Untuk Jenis, pilih Aturan TCP Kustom.

  13. Untuk Rentang Port, ketikkan 8080, 8081, atau 8082.

  14. Untuk Sumber, ketikkan rentang alamat IP untuk mengizinkan permintaan masuk. Misalnya, untuk mengizinkan permintaan masuk dari alamat IP apa pun, masukkan0.0.0.0/0.

  15. Dengan Izinkan / Tolak diatur ke IZINKAN, pilih Simpan.

Langkah 4: Bagikan URL aplikasi yang sedang berjalan

Setelah aplikasi Anda berjalan, Anda dapat berbagi aplikasi Anda dengan orang lain dengan memberikan URL aplikasi Anda. Untuk ini, Anda memerlukan alamat IP publik yang Anda catat sebelumnya. Untuk menulis URL lengkap aplikasi Anda, pastikan untuk memulai alamat IP publik aplikasi Anda dengan protokol yang benar. Selanjutnya, jika port aplikasi Anda bukan port default untuk protokol yang digunakannya, tambahkan informasi nomor port. Berikut ini adalah contoh URL aplikasi: http://192.0.2.0:8080/index.html menggunakan HTTP melalui port 8080.

Jika tab browser web yang dihasilkan menampilkan kesalahan, atau tab kosong, ikuti langkah-langkah pemecahan masalah. Tidak dapat menampilkan aplikasi yang sedang berjalan di luar IDE

catatan

Alamat IP publik aplikasi Anda dapat berubah kapan saja instans untuk aplikasi Anda dimulai ulang. Untuk mencegah alamat IP Anda berubah, alokasikan alamat IP Elastis, lalu tetapkan alamat itu ke instance yang sedang berjalan. Untuk petunjuk, lihat Mengalokasikan Alamat IP Elastis dan Mengaitkan Alamat IP Elastis dengan Instans Berjalan di Panduan Pengguna Amazon EC2. Mengalokasikan alamat IP Elastis dapat Akun AWS menyebabkan Anda dikenakan biaya. Untuk informasi selengkapnya, lihat Penetapan Harga Amazon EC2.

Anda tidak diharuskan untuk menjalankan aplikasi Anda menggunakan HTTP melalui port8080,8081, atau8082. Namun, jika tidak, Anda tidak dapat melihat pratinjau aplikasi yang sedang berjalan dari dalam IDE. Untuk informasi selengkapnya, lihat Mempratinjau aplikasi yang sedang berjalan.

Misalkan, misalnya, permintaan yang berasal dari VPN yang memblokir lalu lintas melalui protokol atau port yang diminta. Kemudian, permintaan untuk mengakses URL aplikasi Anda mungkin gagal. Permintaan harus dibuat dari jaringan yang berbeda yang memungkinkan lalu lintas melalui protokol dan port yang diminta. Untuk informasi selengkapnya, hubungi administrator jaringan Anda.

Kami tidak menyarankan berbagi URL di tab pratinjau aplikasi Anda di IDE dengan orang lain. (URL ini 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-2adalah ID Wilayah AWS untuk lingkungan.) URL ini bekerja hanya ketika IDE untuk lingkungan terbuka dan aplikasi berjalan di peramban web yang sama.