前端项目部署与负载均衡

本文介绍了如何利用Webpack打包前端工程,并详细阐述了连接后台API接口、安装依赖、执行打包指令、将打包文件分发到多个节点、配置Nginx以实现3节点部署,以及设置负载均衡和双机热备的步骤。通过这些操作,可以确保前端应用的高效稳定运行。
摘要由CSDN通过智能技术生成
  • 利用WebPack打包工程

1.连接后台项目api接口

修改/static/config/index-prod.js目录文件中 window.SITE_CONFIG['baseUrl'] = '本地api接口请求地址';

window.SITE_CONFIG['baseUrl'] = 'http://192.168.123.151:6201/renren-fast';

2.安装依赖

cnpm install

3.在前端项目路径下执行打包指令

cnpm run build

4.dist目录的文件拷贝到宿主机的/home/fn1/renren-vue、/home/fn2/renren-vue、/home/fn3/renren-vue的目录下面

5.创建3节点的Nginx,部署前端项目

宿主机/home/fn1/nginx.conf的配置文件

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
	
	proxy_redirect          off;
	proxy_set_header        Host $host;
	proxy_set_header        X-Real-IP $remote_addr;
	proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
	client_max_body_size    10m;
	client_body_buffer_size   128k;
	proxy_connect_timeout   5s;
	proxy_send_timeout      5s;
	proxy_read_timeout      5s;
	proxy_buffer_size        4k;
	proxy_buffers           4 32k;
	proxy_busy_buffers_size  64k;
	proxy_temp_file_write_size 64k;
	
	server {
		listen 6501;
		server_name  192.168.123.130;
		location  /  {
			root  /home/fn1/r
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值