linux vue digunakan untuk nginx

Prakata

Dalam pembangunan web moden, beberapa alatan yang popular dan mudah digunakan biasanya digunakan untuk mencipta dan mengurus aplikasi web. Ini termasuk Linux, Vue dan Nginx.

Linux ialah sistem pengendalian sumber terbuka yang biasa digunakan untuk penempatan bahagian pelayan. Vue ialah rangka kerja JavaScript bahagian hadapan yang popular untuk membangunkan aplikasi web sebelah pelanggan. Nginx ialah pelayan web berprestasi tinggi yang boleh digunakan untuk mengehoskan aset statik dan mengarahkan permintaan ke aplikasi yang sesuai melalui proksi terbalik.

Dalam artikel ini, kita akan membincangkan cara untuk menggunakan aplikasi Vue pada Nginx dan membuat beberapa konfigurasi dan pengoptimuman yang diperlukan untuk prestasi optimum. Kami akan menggunakan aplikasi Vue sebenar sebagai contoh dan menganggap anda sudah memasang Linux dan Nginx.

Bahagian 1: Persediaan

Sebelum menggunakan aplikasi ke Nginx, kami perlu melakukan beberapa persediaan. Berikut adalah beberapa langkah perlu yang perlu anda ambil sebelum memulakan.

1. Jana sumber statik

Jalankan arahan berikut untuk menjana sumber statik untuk aplikasi Vue anda:

npm run build

Ini akan mencipta direktori dist dengan Mengandungi fail statik untuk penempatan ke pelayan.

2. Buat fail konfigurasi Nginx

Buat fail konfigurasi Nginx baharu untuk mengehos aplikasi kami. Dengan mengandaikan anda telah memasang Nginx, anda boleh mencipta fail baharu dalam direktori /etc/nginx/sites-available/ untuk menentukan aplikasi anda.

sudo nano /etc/nginx/sites-available/myapp

Tambah kandungan berikut dalam fail untuk mentakrifkan aplikasi kami:

server {
    listen 80;
    root /var/www/myapp/dist;
    index index.html;
    server_name myapp.example.com;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Dalam fail konfigurasi ini, kami mentakrifkan aplikasi kami. Arahan listen menentukan port yang akan didengari oleh aplikasi. Arahan root menentukan direktori akar aplikasi, iaitu direktori dist yang baru kami hasilkan. Arahan server_name menetapkan nama domain aplikasi. Arahan location digunakan untuk mengkonfigurasi peraturan penghalaan permintaan.

3. Pautkan fail konfigurasi ke tapak yang didayakan

Buat pautan simbolik dalam direktori /etc/nginx/sites-enabled/ ke fail konfigurasi yang baru kami buat.

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/myapp

Kemudian uji konfigurasi Nginx anda:

sudo nginx -t

Jika tiada ralat, mulakan semula Nginx:

sudo systemctl restart nginx

Anda kini boleh mengakses aplikasi anda dan menggunakan aplikasi ke alamat IP Awam atau nama domain.

Bahagian 2: Mengoptimumkan Konfigurasi Nginx

Sekarang kami telah berjaya menggunakan aplikasi ke Nginx, kami perlu membuat beberapa pengoptimuman dan konfigurasi yang diperlukan untuk mendapatkan prestasi terbaik.

Berikut ialah beberapa langkah yang boleh anda ambil untuk mengoptimumkan konfigurasi Nginx anda:

1. Hidupkan pemampatan Gzip

Mampatan Gzip boleh menjimatkan lebar jalur dan mempercepatkan halaman memuatkan. Untuk mendayakan pemampatan Gzip, tambah kod berikut dalam fail konfigurasi Nginx:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

2. Dayakan caching

Dalam aplikasi Vue, kebanyakan sumber statik seperti fail JavaScript dan CSS ) jarang berubah selepas digunakan. Oleh itu, caching penyemak imbas boleh didayakan untuk meningkatkan prestasi dan mengurangkan penggunaan lebar jalur.

Untuk mendayakan caching, gunakan arahan konfigurasi berikut:

location ~* .(js|css|png|jpeg|jpg|gif)$ {
  expires 1y;
  add_header Cache-Control "public, no-transform";
}

Arahan ini membolehkan caching penyemak imbas dan menetapkan penyemak imbas untuk menggunakan fail cache yang sama selama satu tahun.

3. Menggunakan HTTP/2

HTTP/2 ialah protokol lanjutan yang meningkatkan kelajuan dan prestasi tapak web. Untuk mendayakan HTTP/2, tambah baris berikut dalam fail konfigurasi Nginx:

listen 443 ssl http2;

4. Dayakan SSL

Mendayakan SSL dengan selamat menyulitkan data yang dihantar dan meningkatkan keselamatan prestasi aplikasi. Untuk mendayakan SSL, ambil langkah berikut:

a Pasang sijil SSL

Anda boleh membeli atau menandatangani sendiri sijil SSL, atau menggunakan pihak berkuasa sijil percuma seperti Let’s Encrypt. Kemudian, muat naik sijil SSL dan kunci ke pelayan.

b. Konfigurasikan SSL

Dalam fail konfigurasi Nginx, tambah baris berikut untuk mendayakan SSL:

listen 443 ssl http2;
ssl_certificate /path/to/cert.crt;
ssl_certificate_key /path/to/key.key;

Ini akan mentakrifkan port HTTPS mendengar Nginx dan menggunakan sijil SSL anda dan kunci.

Ringkasan

Dalam artikel ini, kami membincangkan cara untuk menggunakan aplikasi Vue pada Nginx dan membuat beberapa pengoptimuman dan konfigurasi yang diperlukan untuk mendapatkan prestasi terbaik. Kami telah mempelajari cara menjana sumber statik, mencipta fail konfigurasi Nginx dan mengoptimumkan SSL, Gzip dan caching. Anda kini boleh menggunakan teknik ini pada aplikasi yang anda bina sepanjang jalan untuk menggunakannya ke dalam persekitaran pengeluaran.

Atas ialah kandungan terperinci linux vue digunakan untuk nginx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!