Bagaimana untuk melancarkan projek Angular? Mari bercakap tentang proses dalam talian dengan nginx!

SudutBagaimana untuk melancarkan projek? Artikel berikut akan membincangkan proses pelancaran projek Angular dalam kombinasi dengan nginx. Saya harap ia akan membantu semua orang!

Selepas kami melengkapkan projek angular, bagaimanakah anda harus pergi ke dalam talian? [Cadangan tutorial berkaitan: "tutorial sudut"]

Mungkin anda akan menjawab:

Itu bukan perniagaan saya?

Sememangnya, sebagai pembangun bahagian hadapan yang tulen, selepas menyelesaikan pembangunan projek, anda tidak perlu menyentuh kandungan dalam talian seterusnya.

Namun, sebagai pembangun, adalah penting untuk kita memahami proses sesuatu projek daripada pembangunan hingga pelancaran.

Mari kita terangkan bersama dengan nginx.

Sama untuk reaksi dan vue

Projek pembungkusan

Di sini kami menggunakan angular-cli yang dihasilkan projek. Selepas membangunkan projek, anda hanya perlu menjalankan npm run build. builder akan dikeluarkan berdasarkan kandungan pembungkusan yang anda pratetapkan dalam angular.json.

• outputPath: laluan folder storan berpakej
• indeks: lekapkan fail templat
• utama: projek Selepas fail entri utama
• ...

selesai, anda boleh melihat fail yang dibungkus melalui outputPath.

Pasang Nginx

Kami memasang . Operasi adalah berdasarkan Nginx operasi sumber centos. yum

# 安装nginx
yum -y install nginx

# 查看版本
nginx -v

# 启动nginx
systemctl start nginx.service

# 访问 默认是80端口
your_ip:80

Konfigurasikan Nginx

Lihat fail konfigurasi

Nginx. nginx.conf

Gunakan

untuk mencari lokasi pemasangan whereis nginx nginx

Tambah fail konfigurasi baharu dalam folder

, seperti /etc/nginx/conf.d, dan Konfigurasikan alamat antara muka pelayan dan laluan fail kemasukan bahagian hadapan: demo.conf

upstream api {
  server 127.0.0.1:8888; // 服务端
  keepalive 2000;
}

server {
  listen       [::]:80 default_server;
  server_name  _;
  root         /usr/share/nginx/demo-frontend/dist/demo-web; // 前端资源位置
  location / {
    add_header Access-Control-Allow-Origin *;
  }

  location /api { // api 处理
    proxy_pass http://api;
  }

}


# Settings for a TLS enabled server.

#     server {

#         listen       443 ssl http2 default_server;
#         listen       [::]:443 ssl http2 default_server;
#         server_name  _;
#         root         /usr/share/nginx/frontend/demo.com/dist;


#         ssl_certificate "/root/ssh/nginx/1_demo.com_bundle.crt";
#         ssl_certificate_key "/root/ssh/nginx/2_demo.com.key";
#         ssl_session_cache shared:SSL:1m;
#         ssl_session_timeout  10m;
#         ssl_ciphers HIGH:!aNULL:!MD5;
#         ssl_prefer_server_ciphers on;

#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#.         add_header Access-Control-Allow-Origin *;
#        }


# to api restful service
#       location /api {
#         proxy_pass http://api;
#       }

#        error_page 404 /404.html;
#        location = /404.html {
#        }


#        error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#        }
#     }

Bahagian komen kod TLS ialah protokol penyulitan penghantaran

dan sijil yang sepadan memerlukan untuk ditambah. https

Dalam kod di atas, kami menyimpan sumber statik bahagian hadapan di bawah

, kemudian kami hanya memuat naik kandungan berpakej di bawah /usr/share/nginx/frontend/demo.com/dist/ ke fail direktori ini. dist/**

/usr/share/nginx/frontend/demo.com/dist/ sebenarnya menunjuk ke fail masukan index.html.

Penyelesaian muat naik yang agak mudah ialah melaksanakannya terus pada mesin pengguna:

. Segerakkan kandungan yang dibungkus ke lokasi pelayan jauh yang sepadan. Kemudian mulakan semula rsync -avzh 服务器用户名@62.**1.**.**:/usr/share/nginx/frontend/demo.com/dist/ /dist项目下的index.html及其同级的内容, iaitu nginx dan anda selesai. nginx -s reload

Ringkasan

Mari kita ringkaskan keseluruhan proses:

• pembungkusan projek sudut

• Nginx pemasangan pelayan

• pemprosesan nginx untuk perkhidmatan back-end

• nginx mengendalikan kandungan bahagian hadapan

• Muat naik fail pembungkusan sudut ke lokasi yang ditentukan pada pelayan

Sudah tentu, anda mesti memohon maklumat yang berkaitan terlebih dahulu Nama domain, pendaftaran, sijil berkaitan, dsb.

Ideanya semudah itu. Sudah tentu, kerja profesional harus diserahkan kepada rakan sekerja operasi dan penyelenggaraan, jangan terlalu sibuk~

Alamat asal: https://juejin.cn/post/7087417501486678030

Pengarang: Jimmy

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengajaran Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk melancarkan projek Angular? Mari bercakap tentang proses dalam talian dengan nginx!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!