linux之J2EE项目部署与发布

本期内容：

        1、反向代理与正向代理

        2、window版nginx的使用

        3、vue前端项目打包

        4、nginx进行负载均衡

        5、nginx进行代理操作

        6、nginx发布前端项目

一、反向代理与正向代理

 1、nginx是什么？

        ①、反向代理服务器 --> tomcat

        ②、html服务器

正向代理：

方向代理：

 负载均衡：系统部署图

二、window版nginx的使用

1、有关conf/nginx.conf配置文件的解析

#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;
    #    }
    #}

}

2、将nginx文件解压，点击nginx文件--》选择nginx.exe文件，双击开启

 报错：

解决方案：

cmd窗口输入HTTP命令netsh http show servicestate查看，

发现有个共同进程ID：5420

①、打开任务管理器，选择服务，找到PID（进程id）5420对应的服务把它停止就可以了。

②、直接在conf/nginx.conf配置文件中改端口号

成功进入：

三、 vue前端项目打包

1、在前台src/api/action.js文件中定义域名

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
    'SERVER': 'http://www.lv.com/T216_SSH', //服务器
    'SYSTEM_USER_DOLOGIN': '/vue/userAction_login.action', //用户登陆
    'SYSTEM_USER_DOREG': '/vue/userAction_reg.action', //用户注册
    'SYSTEM_MENU_TREE': '/vue/treeNodeAction.action', //左侧树形菜单加载
    'SYSTEM_ARTICLE_LIST': '/vue/articleAction_list.action', //文章列表
    'SYSTEM_ARTICLE_ADD': '/vue/articleAction_add.action', //文章新增
    'SYSTEM_ARTICLE_EDIT': '/vue/articleAction_edit.action', //文章修改
    'SYSTEM_ARTICLE_DEL': '/vue/articleAction_del.action', //文章删除
    'SYSTEM_USER_GETASYNCDATA': '/vue/userAction_getAsyncData.action', //vuex中的异步加载数据
    'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
        return this.SERVER + this[k];
    }
}
 

config/index.js文件：

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '../../',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
     assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}
 

2、打包项目

打开终端，运行：

npm run build

打包成功新增一个文件夹： 这个文件夹就是打包好的所有项目

 

双击index呈现界面：

 

3、将项目发布到Linux服务器上 

①、安装nginx

查看是否有nginx:

whereis nginx

未拥有：

 安装nginx服务器：

Ⅰ.添加 nginx 官方提供的 yum 源(需要联网且时间较长)

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

  Ⅱ、使用 yum 安装 nginx

     yum install nginx

Ⅲ、查看nginx版本（yum方式安装nginx，它的安装根目录为/etc/nginx）

  rpm -qa | grep nginx

 

 Ⅳ、查看是否已启动

systemctl status nginx

 Ⅴ、启动

systemctl start nginx

设计为开机自启：

 systemctl enable nginx

 Ⅵ、设置防火墙开放 80 端口

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

 Ⅶ、重启防火墙

systemctl restart firewalld

访问成功：

 四、nginx发布前端项目

1、进入/usr/share/nginx/html文件编辑

 按住i进行编辑，按Esc后输入":wq"进行保存退出：改了个标题

 2、将mysql安装包删掉

rm -f mysql*

3、将打包好的项目移入 

4、解压

unzip dist.zip

 5、新建一个文件夹，将index.html与static移入，删除dist.zip的安装包

 

6、备份，防止文件被损坏 

 cp default.conf default.conf.bak

 7、编辑default.conf

8、重新读取配置文件

 nginx -s reload

 如果文件还不生效，就需重启服务，重启服务也不行，就需要删除Linux重新装

已生效：

 9、阻止自己设置的域名跳到dns服务器，防止设置的域名跳到其他网址

打开C盘——》Windows文件——》system32文件——》drivers文件——》etc文件——》hosts文件（本地dns解析文档）

修改dns解析文档时需用管理员身份登录，否则无权限编辑：

右击hosts文件，选择属性，将自己的用户改为完全控制

 接着可以编辑此文件：定义主机的IP与域名

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host
         192.168.218.128   www.lv.com

# localhost name resolution is handled within DNS itself.
#    127.0.0.1       localhost
#    ::1             localhost
 

 五、nginx进行代理操作

1、安装9.0的tomcat

①、将文件移入

 ②、解压文件

tar zxvf apache-tomcat-9.0.55.tar.gz

③、搭建数据库

将之前所连接的数据库进行连接，并建数据库：要与ssh中的库名称对应

 

再将之前导出的数据引入进去：

 数据库已拥有~

④、将前端项目war包导入webapps路径中

⑤、进入tomcat中的bin文件启动tomcat 

./startup.sh

 ⑥、代理，配置文件

在default.conf文件中进行编辑

server {

    listen       80;
    server_name  www.lv.com;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/local/tools/vue;
        index  index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    location ~ ^/spa/ {
        proxy_pass   http://192.168.218.129:8080;
    }

    # 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;
    #}
}

重新读取：

nginx -s reload 

在进行nginx与tomcat负载均衡的时候遇到权限问题，可以执行下面命令：

setsebool -P httpd_can_network_connect 1

接下来可以访问界面了

本期内容结束~