：Membangun konsol video pendek

Ikhtisar konsol video pendek

Konsol video pendek memiliki fitur-fitur berikut:

• Menetapkan interceptor permintaan untuk memproses permintaan masuk atau meminta pengguna yang sesi masuknya kedaluwarsa untuk masuk kembali.
• Menampilkan semua video dan memungkinkan Anda untuk:
  • Mencari video berdasarkan ID video, ID pengguna, nama pengguna, judul video, status tinjauan, dan tanggal pembuatan.
  • Melihat informasi video, termasuk durasi, ukuran, dan ID video.
  • Memutar video dalam resolusi berbeda dan melihat deskripsi video.
  • Menampilkan snapshot.
  • Memeriksa status tinjauan dan status transkoding.
  • Merekomendasikan, meninjau, mentranskode, dan menghapus video.
• Menampilkan video rekomendasi dan memungkinkan Anda untuk:
  • Mencari video berdasarkan ID video, ID pengguna, nama pengguna, judul video, dan tanggal pembuatan.
  • Melihat informasi video, termasuk durasi, ukuran, dan ID video.
  • Memutar video dalam resolusi berbeda dan melihat deskripsi video.
  • Memeriksa status tinjauan dan status transkoding.
  • Mengambil video sebelum waktunya, membatalkan rekomendasi, dan mentranskode video menggunakan Narrowband HD™.

Prosedur

1. Unduh kode sumber demo video pendek.
   1. Untuk membangun konsol video pendek, unduh kode sumber demo AppServer dan konsol video pendek. Untuk informasi lebih lanjut, lihat Unduh Demo AppServer dan Konsol Video Pendek.
   2. Ekstrak paket kode sumber. Direktori video-admin berisi direktori dan file berikut:

      ├── node_modules                  // Direktori dependensi dalam lingkungan Node.js. Setelah Anda menjalankan perintah npm install, semua dependensi akan diinstal di direktori ini.
      ├── dist                          // Direktori file proyek yang dikemas.
      ├── public                        
      │   ├── favicon.ico               
      │   └── index.html                // Halaman web utama, tempat Anda dapat merujuk konten dari Content Delivery Network (CDN), seperti file JS dan CSS online.
      ├── src                           // Direktori logika bisnis dan komponen Vue.
      │   ├── assets                    // Direktori sumber daya statis, seperti file CSS, gambar, dan font.
      │   │   ├── images
      │   │   └── scss
      │   ├── components                // Direktori komponen Vue.
      │   │   ├── RecommendVideo.vue    // Komponen kotak dialog untuk video rekomendasi.
      │   │   └── VodPlayer.vue         // Komponen pemain.
      │   │   └── Tags.vue         // Tag video.
      │ │ └ ── VideoDot.vue // Penanda kemajuan video.
      │   │   └── VideoSort.vue         // Pengaturan TV play.
      │   ├── mixin                     // Direktori mixin Vue.
      │   │   └── index.js
      │   ├── router-short        // Konfigurasi tabel routing.
      │   │   └── index.js
      │   ├── views                     // Direktori komponen rendering untuk router Vue.
      │   │   ├── list                  // Komponen rendering untuk router daftar video.
      │   │   │  └── index.vue
      │   │   ├── login                 // Komponen rendering untuk router masuk.
      │   │   │   └── index.vue
      │   │   ├── recommend             // Komponen rendering untuk router daftar video yang direkomendasikan.
      │   │   │   └── index.vue
      │   │   └── videos                // Komponen rendering untuk halaman utama, panel navigasi samping, dan bilah navigasi atas.
      │   │       └── index.vue
      │   ├── App.vue                   // Komponen rendering utama.
      │   ├── main.js                   // File entri utama.
      │   └── router.js                 // Profil router Vue.
      ├── .browserslistrc               // Daftar browser yang kompatibel.
      ├── .gitignore
      ├── babel.config.js               // Profil Babel.
      ├── package-lock.json
      ├── package.json                  // File deskripsi paket, yang berisi informasi tentang dependensi, penulis, dan deskripsi.
      ├── postcss.config.js             // Profil PostCSS, yang diberi awalan dengan nama vendor CSS.
      ├── README.md
      ├── README_zh.md
      └── vue.config.js                 // Profil Vue. 

      Catatan Kode sumber konsol video pendek terletak di direktori video-admin. Jalankan perintah selanjutnya di direktori video-admin.
2. Lengkapi konfigurasi dan kompilasi yang diperlukan.
   1. Ubah konfigurasi di file ./video-admin/vue.config.js. Atur parameter proxy ke alamat IP publik instance ECS tempat AppServer dibangun, diikuti dengan nomor port 8080, yaitu http://<Alamat IP publik instance ECS>:8080. Berikut adalah contoh konfigurasinya:

      module.exports = {
      // Tentukan proxy untuk pengembangan frontend.
      devServer: {
       proxy: 'http://*.*.*.*:8080',    // Atur parameter ini ke titik akhir instance ECS, tanpa garis miring (/) di akhir.
      },
      productionSourceMap: false,
      // Tentukan jalur sumber daya statis untuk lingkungan produksi dan pengembangan.
      publicPath: process.env.NODE_ENV === 'production'
       ? 'http://example.com/resource/'
       : '/',
      }

   2. Setelah menginstal lingkungan, buka Antarmuka Baris Perintah (CLI) dan masuk ke direktori video-admin. Jalankan perintah berikut untuk menginstal dependensi proyek:

      npm install

   3. Setelah menginstal dependensi dan mengubah konfigurasi yang diperlukan, jalankan perintah berikut:

      npm run serve

      Catatan

      • Setelah menjalankan perintah di atas, layanan dimulai di komputer Anda. Buka URL default http://localhost:8080 di browser untuk menggunakan konsol di komputer lokal. Jika layanan dijalankan di server, gunakan URL berikut di browser: http://Alamat IP server:8080.
      • Saat menginisialisasi database di AppServer, akun administrator konsol dibuat secara default. Nama pengguna adalah admin, dan kata sandi adalah 123456. Gunakan akun ini untuk masuk ke konsol.
3. Kemas dan rilis kode sumber.
   1. Ubah konfigurasi di file ./video-admin/vue.config.js.

      Saat merilis kode sumber di lingkungan produksi, atur parameter publicPath di file vue.config.js ke jalur sumber daya statis. Misalnya, jika proyek menggunakan framework spring boot sebagai backend dan sumber daya statis disimpan di direktori webapp/resource/short-video, atur parameter publicPath di file vue.config.js seperti berikut:

      module.exports = {
         // Tentukan proxy untuk pengembangan frontend.
         devServer: {
          proxy: 'http://*.*.*.*:8080',    // Atur parameter ini ke titik akhir instance ECS, tanpa garis miring (/) di akhir.
         },
        productionSourceMap: false,
        // Tentukan jalur sumber daya statis untuk lingkungan produksi dan pengembangan.
        publicPath: process.env.NODE_ENV === 'production'
          ? '/resource/short-video/'
          : '/',
      }

   2. Masuk ke direktori proyek video-admin dan jalankan perintah pengemasan berikut:

      npm run build

      Catatan

      • Perintah ini mengompres file sumber daya statis. Kode sumber yang dikompres dapat dirilis di lingkungan produksi.
      • Proyek dikemas oleh webpack yang dienkapsulasi oleh Vue CLI. Anda dapat menyesuaikan webpack di file vue.config.js. Untuk informasi lebih lanjut, kunjungi Referensi Konfigurasi.
   3. Setelah menjalankan perintah pengemasan, file yang dikemas dihasilkan di direktori video-admin/dist dengan struktur berikut:

      ├──dist
         ├── css
         │   ├── app.[hash].css             // File CSS komponen Vue atau file CSS kustom.
         │   └── chunk-vendors.[hash].css   // File CSS yang diimpor oleh dependensi.
         ├── fonts
         ├── img
         ├── js
         │   ├── app.[hash].css             // File JS komponen Vue atau file JS kustom.
         │   └── chunk-vendors.[hash].css   // File JS yang diimpor oleh dependensi.
         ├── favicon.ico
         └── index.html

      Catatan Selama pengemasan, webpack memisahkan file CSS dan JSCSSJS dari dependensi. Pemisahan ini mempercepat respons halaman web dan memungkinkan pembaruan hanya pada file app.[hash].js dan app.[hash].css jika dependensi tidak berubah.
4. Rilis kode sumber di AppServer.
   1. Proyek menggunakan framework spring boot sebagai backend. Parameter targetPath menentukan direktori tempat konsol web diterapkan. Dalam demo, direktori tersebut adalah resources. Untuk mengubah direktori, ubah parameter targetPath tag <resources> di file pom.xml.
   2. Unggah direktori ./video-admin/dist yang telah dikemas ke instance ECS. Simpan semua file di direktori dist ke jalur /src/main/webapp/resource/short-video/ tempat kode sumber AppServer berada.

      # Unggah direktori dist ke instance ECS menggunakan perintah scp. Salin semua file di direktori dist ke direktori short-video.
      scp -rf Direktori unggah/dist/* Direktori root kode sumber AppServer/src/main/webapp/resource/short-video/

   3. Kemas ulang kode sumber AppServer tempat konsol diintegrasikan. Terapkan kode sumber di AppServer, lalu mulai ulang AppServer. Untuk informasi lebih lanjut, lihat Membangun AppServer Video Pendek.

      # Masuk ke direktori root proyek di CLI dan jalankan perintah kompilasi dan pengemasan. Jika AppServer sedang berjalan, kami sarankan Anda menghentikan layanan dan kemudian mengemas ulang kode sumber.
      mvn clean package -Dmaven.test.skip=true
      # Setelah kode sumber dikemas, file sdk-api-0.0.1-SNAPSHOT.jar dihasilkan di direktori target yang ada di direktori root proyek.
      # Masuk ke direktori paket JAR di CLI, terapkan paket JAR, dan mulai AppServer.
      nohup java -jar sdk-api-0.0.1-SNAPSHOT.jar &

      Catatan Instance ECS yang Anda beli mungkin memiliki memori idle yang terbatas. Jika ingin mengemas ulang dan menerapkan kode sumber AppServer, jalankan perintah jps dan kill untuk menghentikan layanan. Lalu, jalankan perintah mvn dan java untuk mengemas ulang kode sumber dalam paket JAR dan menerapkannya. Pengemasan mungkin gagal jika memori tidak mencukupi.
   4. Masukkan titik akhir AppServer video pendek di browser untuk mengakses halaman web konsol, misalnya, http://<Alamat IP publik instance ECS>:8080/resource/index.html atau http://Nama domain/resource/index.html.