linux之J2EE项目部署与发布

本期内容：1、反向代理与正向代理2、window版nginx的使用3、vue前端项目打包4、nginx进行负载均衡5、nginx进行代理操作6、nginx发布前端项目一、反向代理与正向代理1、nginx是什么？①、反向代理服务器 --> tomcat②、html服务器正向代理：方向代理：负载均衡：系统部署图...

爱嘤斯塔

3177人浏览 · 2021-12-10 17:04:06

爱嘤斯塔 · 2021-12-10 17:04:06 发布

本期内容：

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

接下来可以访问界面了

本期内容结束~

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^