Bagaimana untuk menggunakan projek reaksi dalam nginx

Test item react-demo

Klon projek react-demo anda ke pelayan (secara lalai, Github digunakan untuk menguruskan projek kami)

Seolah-olah perlu , sila pasang persekitaran projek, seperti node.js, yarn, dsb.

Masukkan direktori projek, laksanakan npm run build dan mula bina projek

Selepas binaan berjaya, folder dist akan dijana (bergantung pada konfigurasi projek anda), dengan fail statik dalam folder ini Fail akan menjadi fail akses untuk projek kami.

Untuk mengkonfigurasi Nginx, pelayan Linux masukkan: /etc/nginx/sites-enabled, kemudian sebagai pentadbir, cipta fail konfigurasi baharu untuk projek react anda seperti react-demo.conf, kemudian edit Fail itu:

pelayan{

listen8080

# pelayan _ namakan domain.com anda

root/home/root/react-demo/dist ;

index.htmlindex.htm;

lokasi/

cuba _ fail $ uri $ uri//index .html;

}

lokasi^~/assets/{

gzip _ staticon

expiresmax

tambah _ header cache-control public; ralat _ halaman 500502503504/500 .html;

klien _ max _ badan _ saiz20M

keepalive _ tamat masa10

}Laksanakan perkhidmatan sudo nginx restart untuk memulakan semula perkhidmatan Nginx.

Akses projek, http://IP:8080/

Nota:

1 Jika anda mengkonfigurasi nama domain, anda memerlukan 80 port . Selepas berjaya, anda hanya perlu mengakses nama domain untuk mengakses projek 2 Jika anda menggunakan mod cerita penyemak imbas penghala reaksi, sila tambah konfigurasi berikut pada konfigurasi Nginx:

lokasi/

cuba _ fail $ uri $ uri//index html ;

} prinsip, kerana projek kami hanya mempunyai satu entri akar, halaman ini tidak boleh ditemui apabila memasukkan url seperti. /rumah. Ini kerana nginx akan cuba memuatkan index.html Selepas memuatkan index.html, react-router akan berfungsi dan sepadan dengan laluan /home yang kami masukkan, sekali gus memaparkan halaman utama yang betul. Jika projek dalam mod cerita penyemak imbas tidak mengkonfigurasi kandungan di atas, 404 akan berlaku.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan projek reaksi dalam nginx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!