nginx + Tomcat + vue项目在服务器上的部署

引言

毛主席曾经说过，实践是检验真理的唯一标准。在本地写好项目就行了嘛，项目部署这么高大上的东西，我们当然也得瞎折腾折腾，本文讲的是我第一次在阿里云服务器上部署项目，期间遇到的各种坑真是各种泪啊！

一、创建服务器

阿里云ECS服务器，阿里云有个免费套餐(为你提供0门槛上云实践机会)刚注册6个月以内可以申请一个月或者几个月的服务器，大学生认证之后有个云翼计划9.5/月(不打广告，当然也可以选其他的比如腾讯云也有免费的)。

创建服务器的时候选择linux版本，我选的ubuntu 16.0，几个版本都差不多要说有什么区别我也说不来。创建完毕他会告诉你连接密码(注意保存好)。第一次连接阿里云服务器是在阿里云页面上的终端，每个服务器都会有个root用户，密码是你的服务器实例密码(也好像没有密码，我忘了，先连上root用户再说)，如果不知道密码，如图:

root用户登陆，创建普通用户，修改密码，刚开始不用管什么创建用户组，创建了一个用户时会自动创建一个组，这里只简单介绍，如果想了解具体的一些linux创建用户、用户组，自行百度。

#号代表root用户下    　　$代表普通用户下

useradd -d /home/xxx -m xxx
passwd xxx
//ENETER PASSWORD 
.....

创建用户完毕，使用远程软件登陆,win10下也可用终端ssh登陆

终端登陆:

//windows键+R 输入cmd 调出终端控制台
ssh xxx@ip
enter password

远程软件登陆,比如SecureCRT、putty、Xshell,这里我用的是SecureCRT（需要破解，如要资源，最下方有链接），打开软件点击左边SessionManager----》出现一个sessions文件夹,右键New Session

登陆成功

二、SFTP连接往服务器上传资源

SecureCRT软件登录服务器之后，软件左上方File--->Connect SFTP Session ,压缩包、图片等资源直接往里拖，结束后，你会在当前登陆的用户  /home/xxx下找到你的资源。

SFTP还有一些其余的操作，比如服务器往本地传资源，本地更新服务器资源的操作命令，感兴趣的可以自行百度。这里基本用不上就不多说了。

三、项目环境

此处需要用到tomcat、nginx、postgreSQL、MongoDB

1、jdk11安装及其配置

下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html

 注意下载版本   　　  linux环境下    jdkxxxxxx_bin.tar.gz

配置环境

//第一次登陆后修改root用户密码
sudo passwd root
Enter new UNIX password:
Retype new UNIX password:
successfully

//按Tab键自动补全
su root 
password:
mkdir     /usr/software
mv jdk.....     /usr/software

cd /usr/software
tar -zxvf jdk..._bin.tar.gz
//可删可不删   随意
rm -rf jdk..._bin.tar.gz 

vi /etc/profile
//在最下面加上如下配置，注意JAVA_HOME路径即解压好的jdk路径
//键盘 按i 输入或复制以下内容
#java config
export JAVA_HOME=/usr/software/jdk-11.0.1
export JRE_HOME=$JAVA_HOME
export CLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib:$CLASSPATH
export PATH=$JAVA_HOME/bin:$JRE_HOME/bin:$PATH
//最后    esc +   :wq    保存退出

//让配置立即生效  或者重启服务器也行
source /etc/profile

这里需要注意的是:jdk11下载解压完之后，文件夹里面并没有jre文件夹，前几个版本下载完都会有一个jdk文件夹中有一个jre文件夹，以前配置java环境时JRE_HOME=$JAVA_HOME/jre,如果用jdk11的话JRE_HOME=$JAVA_HOME就行了。

java -version

出现如下提示jdk即配置正确

2、安装配置tomcat、并远程访问验证是否启动成功

下载地址: tomcat.apache.org

压缩包通过SFTP上传服务器并放到新创建好的/usr/software(也可以是自己指定的任意位置)下，解压，上面有相同步骤。

//简单配置端口　　port端口换成合适的，也可以不换，只要端口不冲突就行 
sudo vi /xxx/xxx/apache-tomcat-9.0.14/conf/server.xml

   ......
　　<Connector port="8081" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />
    <!-- A "Connector" using the shared thread pool-->
    <!--
    <Connector executor="tomcatThreadPool"
               port="8081" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />  
　　......

//注意如果放在 / 根目录下需要root权限访问
//比如我是/usr/software/apache-tomcat ,则命令前加上sudo 或者 用root用户操作
//用sudo则用的还是普通用户的环境变量，这个时候需要另外配置，这里我用root用户操作
#tomcat运行
/xxx/xxx/apache-tomcat-9.0.14/bin/startup.sh

#tomcat关闭
/xxx/xxx/apache-tomcat-9.0.14/bin/shutdown.sh

#看tomcat是否成功启动或成功关闭
cat /xxx/xxx/apache-tomcat-9.0.14/logs/catalina.out

如果日志中没有报错，则启动正常，下面可以检验是否能够远程连接,有时候会报端口占用的错误，解决方法如下:

# 查看端口是否被占用
lsof -i:8080

COMMAND   PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
java    15911 root   41u  IPv4  94219      0t0  TCP *:tproxy (LISTEN)

#查看进程详细信息
ps aux|grep 进程号(PID)/java

ps aux|grep java
ps aux|grep 15911
ps aux|grep nginx

kill -9 进程号(PID) 强制杀死进程(尽量少用-9强制方式)
kill 进程号(PID) 杀死进程

注意，有时候进程开启后再杀死，如果再迅速开启，还是会报端口占用，这是因为进程有个什么规则控制，如果关闭后再开启还是有错，那就在关闭后等一段时间再去开启。

测试：

浏览器地址栏输入:　　ip:port　　

比如47.110.xx.xx:8081，如果有页面那就恭喜你了，如果浏览器地址栏一直转圈最后找不到页面，看下面操作。

我一开始死活登不上,后来各种百度，以为是防火墙的原因，或者各种问题，压根不是，而且有的配置最好不要乱动，虽然是自己的东西瞎折腾没关系，配置文件要是某个地方弄错了，你的环境出了问题，你会纠结好长一段时间。

可以先用服务器内网测试tomcat有没有真正开启，相当于在本地浏览器地址栏上输入localhost:8081,只是因为服务器一般没有浏览器所以通过这个命令访问:

curl -i "http://localhost:8081"

进入阿里云控制台(其他云的服务器我不知道有没有效，阿里云实测有效),左侧找到ECS阿里云服务器----->安全组----->配置规则-------->添加安全组规则(8081端口供tomcat使用,80端口供nginx使用)

配置完成后再访问，看到一只猫就行了：

3.nginx了解、下载及配置

首先，为什么要用nginx服务器?

部署java web项目我们常见的有apache+tomcat+数据库，或者nginx+tomcat+数据库，一开始我有个疑问，我tomcat也能直接访问项目，为什么要在上面加一层apache或者nginx或者别的呢?这里我们需要弄清应用服务器和Web服务器的概念，tomcat属于应用服务器它主要是做servlet容器用的，一般用在应用层，运行后台逻辑代码，访问数据库服务器等；nginx、apache是Web服务器，从性能角度来讲Ngix的性能似乎要比apache略好，但从使用方便上来看，apache配置起来更方便，功能上都很强大，因为apache名气似乎更大一些，用的人就更多一些。

在这里主要了解下nginx：

　　nginx主要功能有:1、反向代理 2、负载均衡 3、HTTP服务器(包含动静分离) 4、正向代理

反向代理：以代理服务器接受internet上的连接请求，然后将请求转发给内部网络上的服务器，简单来说就是用户不知道真实服务器，真实服务器不能直接被外部网络访问

 负载均衡：处理高并发

HTTP服务器：现在流行前后端分离项目，像一开始学习javaweb项目在WEB-INF下存放jsp这样的前端文件就不是前后端分离项目，我在项目中使用到的是前端使用到的技术是vue,项目完成后打包成静态资源npm run build非常方便

下载安装及配置(nginx下载可手动下载压缩包或直接在服务器上下载)

可参考教程http://www.cnblogs.com/piscesLoveCc/p/5794926.html

实用命令:

//开启nginx服务器
sudo /usr/local/nginx/sbin/nginx 

//关闭
sudo /usr/local/nginx/sbin/nginx -s stop

//重新加载配置
sudo /usr/local/nginx/sbin/nginx -s reload

配置文件:

vi /home/lyh/xxx.conf
//编写xxx.conf文件 加入以下内容 并保存退出
server {
    listen       80;
    server_name  ip;

    location / {
        #静态资源路径
        root  /home/lyh/dist;
        index index.html;
    }

    location /api {
        #注意重写url
        rewrite ^/api/(.*) /$1 break;
        proxy_pass http://127.0.0.1:8081;
    }
}
----------------------------------------------------------------
vi /etc/local/nginx/conf/nginx.conf
//内容  http{} 中加入 并保存退出
include /home/lyh/xxx.conf

这里需要注意:

我使用的是vue+element UI作为前端，查看在前端项目中是否有代理请求的转发,我的vue项目中config文件里有个index.js文件

proxyTable: {
        '/api': {
            target: 'http://localhost:8081/',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
                '^/api': '/'
            }
        },
        '/advImg': {
            target: 'D:/tmp/',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
                '^/advImg': 'D:/tmp/'
            }
        }

当时我在配置nginx 配置文件 xxx.conf 作反向代理的时候,直接这样配置，导致我的项目卡在登陆页面，发不出请求，并且报405错误。

    location /api {
        proxy_pass http://127.0.0.1:8081;
    }

查看tomcat 输出日志，居然说我controller中post方法不支持,我在本地都能访问，在服务器上就post方法不支持？原因就是我的nginx配置有问题。

rewrite ^/api/(.*) /$1 break;

在location /api中加入上面一句话nginx就差不多配置好了，至于其他一些复杂的配置，用到的时候再说。

3、PostgreSql下载及安装

sudo apt update
//默认安装在/usr/share/postgresql
sudo apt install postgresql postgresql-contrib
//安装完postgresql之后，会自动创建linux 中postgres用户
sudo -i -u postgres  
// 切换到 postgres SQL命令行输入模式
psql
// 退出
\q

//修改linux中 postgres密码
sudo passwd -d postgres
sudo -u postgres passwd
//输入密码
//确认密码

sudo -u postgres psql
//修改postgres数据库密码 
postgres=# ALTER USER postgres WITH PASSWORD 'postgres';

创建新的数据库

su postgres
//输入密码  进入postgresSQL命令行输入模式

//创建数据库
CREATE  DATABASE  dbName;
//创建用户
CREATE USER userName WITH PASSWORD 'password' ;
//赋予权限
GRANT ALL PRIVILEGES ON DATABASE mtyxpdb to mtyxpdb;      
//退出
\q

导入测试数据：

注意，我们一般使用navicat等数据库连接工具管理数据，导出数据也更方便，但是在navicat中导出的数据库  xxx.sql文件并不适用于直接往服务器里的数据库导入数据，因为用navicat导出的数据表名会带"",而这是navicat这样的工具才会产生的，如图：

所以我们得用psql命令行模式下导出数据

//1.导出整个数据库
pg_dump –hlocalhost –U postgres –p 5432 –d postgres –f “D:/test.sql”

//2.往服务器导入整个数据库
psql -U postgres(用户名)  数据库名(缺省时同用户名) < /home/lyh/test.sql

//3.导出某个表
pg_dump -h localhost -U postgres(用户名) 数据库名(缺省时同用户名)  -t table(表名) > /home/lyh/xxx.sql

//4.一般如果数据较大，则需要压缩
xz xxx.sql

//5.压缩数据导入数据库方法
xzcat /data/dum.sql.xz | psql -h localhost -U postgres(用户名) 数据库名(缺省时同用户名)

导入数据时有时会出现报一大堆有关于  \N\N的错，这个时候可以先运行通过navicat生成的sql文件，再运行一遍由psql命令行导出的sql文件。

4.MongoDB的下载安装

下载及安装教程：https://blog.csdn.net/qq_20407705/article/details/79225996

MongoDB属于NOSQL,NOSQL本意是"Not Only SQL",NoSQL的产生并不是要彻底地否定非关系型数据库，而是作为传统关系型数据库的一个有效补充。NOSQL数据库在特定的场景下可以发挥出难以想象的高效率和高性能。

NoSQL数据库主要有以下特点:

1)、NOSQL不是否定关系数据库，而是作为关系数据库的一个重要补充 
2)、NOSQL为了高性能、高并发而生，忽略影响高性能，高并发的功能 
3)、NOSQL典型产品memcached （纯内存），redis（持久化缓存），mongodb（文档的数据库）

常用命令:

//启动服务
//指定数据存储目录 日志目录
sudo /usr/software/mongodb/bin/mongod --port 27017 --fork --dbpath=/usr/software/mongodb/data/mongodb_data  --logpath=/usr/software/mongodb/data/mongodb_log/mongodb.log  --logappend

//数据库命令行窗口,启动客户端
sudo /usr/software/mongodb/bin/mongo  

在本项目中MongoDB主要是作为日志的存储和查看，我们经常拿MongoDB和Redis比较,redis主要适用于并发量大但是数据量不大的情况下，而MongoDB适用数据量特别大的情况下。

四、vue静态资源打包和idea下java项目打成war包

1、静态资源打包

cmd命令窗口进入项目文件目录下

//若npm run dev 运行vue项目成功,则使用npm run build打包没问题
npm run dev

//打包
npm run build

vue打包后资源结构图(结构为dist --> static文件夹 +index.html):

2、idea下java项目打成war包

 File--->Project Structure----> +号     From Modules选择打成war包的项目

选择上个步骤生成的exploded

最终会生成两个文件

生成完毕之后，点击idea软件上方的Build ------->Build Artifacts

最后在项目文件夹中找到一个xxx.war文件，将它上传到服务器中

这里只介绍一种javawar部署最简单的方法:

//1.删除tomcat原有的webapps文件夹
rm -r /usr/software/apache-tomcat-9.0.14/webapps/
//2.创建新的
mkdir /usr/software/apache-tomcat-9.0.14/webapps/
//3.移动war文件到webapps下并改名ROOT.war
mv xxx.war /usr/software/apache-tomcat-9.0.14/webapps/ROOT.war

最后启动tomcat

项目部署完毕，写的不好勿喷，这里只是简单记录一下我第一次部署服务器的过程。

参考文档:

https://www.cnblogs.com/hltswd/p/6165918.html

https://blog.csdn.net/sinat_34496643/article/details/79138646

https://baijiahao.baidu.com/s?id=1605747127646299584&wfr=spider&for=pc

https://blog.csdn.net/xiaxinkai/article/details/83188665