Linuk部署项目(前端)

目录

1.nginx的简介

2.nginx使用(负载均衡)

2.1.安装nginx

 2.2.使用yum源安装nginx

2.3.启动nginx以及开机启动

 2.4.设置防火墙开发80端口

2.5.准备两个tomcat

2.6.测试

2.7.配置nginx

3.前端项目部署

3.1.确保前台项目能正常运行

3.2.将前台项目进行打包


1.nginx的简介

负载均衡:流量分摊。
反向代理:处理外网访问内网问题。
动静分离:判断动态请求还是静态请求,选择性的访问指定服务器。

负载均衡:

2.nginx使用(负载均衡)

2.1.安装nginx

设置yum源: rpm -Uvh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.14.2-1.el7_4.ngx.x86_64.rpm

注意:要联网

 2.2.使用yum源安装nginx

yum install nginx

注1:yum方式安装nginx,它的安装根目录为/etc/nginx
 注2:查看nginx版本

  rpm -qa | grep nginx

注意: nginx的端口默认是80端口

2.3.启动nginx以及开机启动

 systemctl start nginx.service
 systemctl enable nginx.service

 2.4.设置防火墙开发80端口

 firewall-cmd --zone=public --add-port=80/tcp --permanent
刷新防火墙规则及显示

 firewall-cmd --reload && firewall-cmd --list-port

2.5.准备两个tomcat

在原有的基础上增加一个tomcat:

cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/

 修改端口号:进入/root/xbb/software/apache-tomcat-8.5.20_8081/conf/

把里面相关的端口号进行修改,保存

 开启两个tomcat,8080和8081

由于8081的tomcat才创建所有要启动8081的服务器 

 firewall-cmd --zone=public --add-port=8081/tcp --permanent

更新&查询

firewall-cmd --reload && firewall-cmd --list-port

2.6.测试

分别访问8080和8081,如果都能访问说明配置成功

为了能够清楚的演示负载均衡我们把两个tomcat的界面进行跟改:

/root/xbb/software/apache-tomcat-8.5.20_8081/webapps/ROOT里面的index中进行修改

2.7.配置nginx

 通过命令systemctl status nginx查看目录

查看文件内容:cat /etc/nginx/nginx.conf

 建议:可以直接进入文件里面配置

在ngin.conf添加

upstream  tomcat_list {  #服务器集群名字
    server    127.0.0.1:8080  weight=1;   #服务器1   weight是权重的意思,权重越大,分配的概率越大。
    server    127.0.0.1:8081  weight=1; #服务器2   weight是权重的意思,权重越大,分配的概率越大

 在default.conf添加

location / {
      #root   /usr/share/nginx/html;
      #proxy_pass   http://172.17.0.3:8080;
      proxy_pass   http://tomcat_list;
      index index.html index.htm;
  }

重启Nginx服务,让配置生效  

systemctl restart nginx

nginx开发所有配置模板:


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;


    #服务器的集群
    upstream  tomcat_list {  #服务器集群名字
        server    127.0.0.1:8080  weight=1;   #服务器1   weight是权重的意思,权重越大,分配的概率越大。
        #server    172.17.0.4:8080  weight=2; #服务器2   weight是权重的意思,权重越大,分配的概率越大
    } 

    server {
        listen       80;            #监听80端口,可以改成其他端口
        #server_name  localhost;    #当前服务的域名
    server_name  www.zking.com; #当前服务的域名(虚拟域名也可以)
    root         html/crm;      #将要访问的网站的根目录,nginx节点会自动继承父节点的配置

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

    location / {
            #该句代码是为解决history路由不能跳转的问题,在vue-router官网有介绍 
        try_files $uri $uri/  /index.html;
    }
    location  ^~/api/ {
        #^~/api/表示匹配前缀是api的请求,proxy_pass的结尾有/, 则会把/api/*后面的路径直接拼接到后面,即移除api
        proxy_pass http://tomcat_list/;
    }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}
 

错误问题解决:

 出现权限问题:

#现象:connect() to 192.168.195.139:8080 failed (13: Permission denied) while connecting to upstream
#解决方案:执行下面命令
setsebool -P httpd_can_network_connect 1

执行完命令即可访问

3.前端项目部署

3.1.确保前台项目能正常运行

先在本地进行测试

进入项目的bin目录cmd:npm run dev

3.2.将前台项目进行打包

npm run build

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值