Bincangkan cara mengalih keluar API daripada persekitaran pengeluaran Vue

Vue ialah rangka kerja progresif untuk membina antara muka pengguna. Dalam banyak projek Vue, kita perlu menggunakan API untuk mendapatkan data. Apabila kami membina aplikasi Vue, kami biasanya perlu mengakses API untuk mendapatkan data dan memaparkannya kepada pengguna. Walau bagaimanapun, dalam persekitaran pengeluaran, mengakses API mungkin tidak diperlukan dan mungkin berbahaya. Dalam artikel ini, kami akan membincangkan cara mengalih keluar API dalam persekitaran pengeluaran Vue.

1. Menggunakan API dalam persekitaran pembangunan Vue

Dalam persekitaran pembangunan Vue, kami sering menggunakan perpustakaan seperti axios untuk menghantar permintaan HTTP untuk mendapatkan data. Ini kerana dalam persekitaran pembangunan kita perlu mendapatkan data dengan cepat dan menyahpepijatnya. Menggunakan API dalam mod pembangunan sangat membantu. Sebagai contoh, apabila kami menggunakan Vue untuk membuat senarai Todo, kami perlu mengakses API untuk mendapatkan data senarai tugas.

Dalam projek Vue, kami biasanya mencipta fail js yang berasingan untuk meletakkan permintaan API. Dalam fail API ini, kami akan menentukan fungsi yang akan menghantar permintaan HTTP kepada pelayan dan mengembalikan objek Promise untuk mendapatkan data API.

2. Mengalih keluar API dalam persekitaran pengeluaran Vue

Sama seperti menggunakan API dalam persekitaran pembangunan, kita perlu mengalih keluar API dalam persekitaran pengeluaran. Ini kerana dalam persekitaran pengeluaran kita perlu menggunakan aplikasi ke berbilang pelayan. Dalam kes ini, kami tidak boleh menggunakan alamat API tertentu dengan tetap Kami perlu menggunakan alamat API yang berbeza berdasarkan penggunaan pelayan yang berbeza.

Jadi apabila kami menggunakan aplikasi Vue dalam persekitaran pengeluaran, kami perlu melakukan langkah berikut:

1) Alih keluar alamat API daripada pengekodan keras

Pertama, Kami perlu mengalih keluar alamat API daripada dikodkan keras. Kami tidak boleh mengekodkan alamat API secara keras, tetapi mengurus alamat melalui fail konfigurasi. Dalam projek Vue, kami boleh menggunakan fail .env untuk mengurus parameter konfigurasi ini. Kami boleh menentukan alamat API dalam fail .env dan kemudian menggunakan parameter dalam aplikasi.

Tambah yang berikut dalam fail .env anda:

VUE_APP_API_URL=/api

Gunakan parameter ini dalam aplikasi anda.

axios.get(`${process.env.VUE_APP_API_URL}/todos`)
  .then(response => {
    this.todos = response.data;
  });

2) Gunakan Nginx sebagai proksi terbalik

Kami tahu bahawa dalam aplikasi Vue, kami tidak boleh mengakses API secara langsung. Kita perlu mendapatkan data API melalui pelayan. Dalam persekitaran pengeluaran, kita boleh menggunakan Nginx sebagai proksi terbalik. Proksi terbalik merujuk kepada pemajuan permintaan pelanggan ke pelayan bahagian belakang dan mengembalikan data API kepada pelanggan. Dalam kes ini, aplikasi Vue akan mengakses API melalui pelayan proksi terbalik.

Tambah kandungan berikut pada fail konfigurasi Nginx:

location /api {
  proxy_pass http://api-service;
}

Konfigurasi ini menentukan proksi /api yang memajukan permintaan ke http://api-service.

3) Gunakan kontena Docker untuk menggunakan

Akhir sekali, kami boleh menggunakan kontena Docker untuk menggunakan aplikasi Vue. Kontena ialah teknologi yang digunakan secara meluas dalam persekitaran pengeluaran. Apabila kami menggunakan kontena Docker untuk menggunakan aplikasi Vue, kami boleh menggunakan dan menjalankan bekas pada berbilang nod dan menetapkan alamat API yang berbeza dalam setiap bekas.

Faedah penggunaan dalam kontena Docker bagi aplikasi Vue ialah ia boleh mengurus kebergantungan aplikasi secara automatik dan mempercepatkan proses penggunaan aplikasi.

Kesimpulan

Dalam aplikasi Vue, mengakses API sangat diperlukan, tetapi menggunakan API dalam persekitaran pengeluaran boleh berbahaya. Untuk menggunakan aplikasi Vue dengan selamat dalam persekitaran pengeluaran, kita perlu mengalih keluar API, menggunakan Nginx sebagai proksi terbalik, dan akhirnya menggunakan kontena Docker untuk menggunakan aplikasi Vue. Langkah-langkah ini memastikan aplikasi kami berjalan dengan lebih selamat dan cekap dalam persekitaran pengeluaran.

Atas ialah kandungan terperinci Bincangkan cara mengalih keluar API daripada persekitaran pengeluaran Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!