Mempratinjau aplikasi yang sedang berjalan di IDE AWS Cloud9 - AWS Cloud9
Menjalankan aplikasiMempratinjau aplikasi yang sedang berjalan

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

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

Anda dapat menggunakan AWS Cloud9 Integrated Development Environment (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 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.

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. 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 menonaktifkan cookie pihak ketiga”, 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 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-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.