Spring Boot+Vue前后端分离项目部署笔记

·  阅读 1174

前言:

因为毕设项目老师要求上线,所以这是我第一次将本地项目部署到云服务器上,在部署的时候出现过许多问题,最后也是成功将毕设项目部署上线,在此进行记录,也方便和我一样的新手小白少走弯路。

1.申请和配置云服务器

登录阿里云,购买阿里云ECS,新手选择一键配置(选择centos的linux服务器)。

配置安全组:

将前端、后端项目和数据库的对应端口都加入安全组配置中,mysql默认为3306,授权对象都设置为:0.0.0.0/0

配置完成。

2.修改项目配置

[1]. 前端项目

修改main.js中的baseURL的localhost以及所有有涉及到localhost的地方均改为申请到的阿里云服务器的公网IP,使用终端命令

npm run build
复制代码

打包后项目生成dist文件夹,前端项目打包完成。

[2]. 后端项目

修改数据库配置(properties.yml文件)中的localhost为申请到的阿里云服务器的公网IP,修改每个子项目和母项目的pom文件,加入以下配置:

<package>jar</package>
复制代码

注:使用jar包的形式打包项目的优势在于,不同于传统的war包打包方式,当项目上传到云服务器时不用额外下载配置tomcat服务器,即可运行使用jar包打包的项目(jar包自带tomcat)。

之后rebuild整个项目,使用idea工具的maven侧边栏的操作按钮,按照clean->compile->package->install的顺序,完成后在项目的target文件夹下生成xxx.jar,即为打包后的项目文件,后端项目打包完成。

3.上传项目到云服务器

[1]. 下载xshell最新版终端模拟软件

安装成功后,打开,在“主机”处添加服务器 ip,新建会话:

img

连接会话:

img

根据提示输入用户名和密码登录,即可远程连接阿里云服务器。

[2]. 安装文件传输软件 Xftp

主要用于云服务器中的文件可视化操作,减少linux命令。安装成功后新建会话,添加主机、用户名、密码,点击确定。

[3]. 上传项目

一般在云服务器中的usr目录下新建文件夹,将打包好的前端项目的dist文件夹和后端项目的jar包传输到该文件夹下。

4.云服务器配置

[1].前端nginx配置

在Linux官网下载对应版本地nginx压缩包(以tar.gz结尾),将其上传到阿里云服务器上,使用如下命令解压 nginx 安装包(根据下载的nginx版本更换对应版本):

tar -zxvf nginx-1.8.1.tar.gz
复制代码

进入 nginx-1.8.1 目录:

cd nginx-1.8.1
复制代码

make 编译安装它:

./configure
make
make install
复制代码

安装 zlib 库

cd ~
wget http://www.zlib.net/zlib-1.2.11.tar.gz
tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make
make install
复制代码

安装 SSL

yum -y install openssl openssl-devel
复制代码

安装 pcre

yum -y install pcre-devel
复制代码

nginx 服务的基本操作

启动服务:

/usr/local/nginx/sbin/nginx
复制代码

这个时候访问你服务器的公用 ip 地址,如果可以打开下面这样一个页面,说明 nginx 启动成功:

img

重启服务:

/usr/local/nginx/sbin/nginx -s reopen
复制代码

查看服务:

ps -ef | grep nginx
复制代码

查看配置:

vim /usr/local/nginx/conf/nginx.conf
复制代码

配置nginx.conf文件(搜索文件的Linux命令:whereis xxx.conf,编辑文件使用的linux命令:先cd进该文件存放的目录,然后使用vim xxx.conf),以fitnesshub-vue项目为例,增加如下配置:

server {
        listen       9000;
        server_name  www.fitnesshub.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/myproject/dist;
            autoindex on;
            index  index.html index.htm;
            #解决界面刷新后出现404的问题
            try_files $uri $uri/ /index.html;
        }
}
复制代码

nginx.cnf完整配置如下:

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;

    server {
        listen       9000;
        server_name  www.fitnesshub.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/myproject/dist;
            autoindex on;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

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

}
复制代码

编辑完成使用esc退出编辑并保存,使用:wq+enter或者qa!+enter退出文件编辑界面

重新载入配置文件:

在修改了配置文件后需要重新载入配置文件

/usr/local/nginx/sbin/nginx -s reload
复制代码

至此nginx.conf文件就配置好了。

访问服务器 ip 地址,就可以看到自己的项目了。

[2]. 后端项目配置

官网下载1.8版本的JDK(linux版),上传云服务器后解压:

tar -zxvf jdk-8u151-linux-x64.tar.gz
复制代码

配置JAVA环境:

vim /etc/profile
复制代码

添加如下内容:

export JAVA_HOME=/usr/java/jdk1.8.0_151 (换成你的jdk目录)
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar 
export PATH=$PATH:$JAVA_HOME/bin  
复制代码

执行

source/etc/profile
复制代码

查看安装情况

java -version
复制代码

搞定。

之后安装linux版的mysql

操作系统:Centos 7.4 MySQL版本: MySQL 5.7

登录服务器

1、下载数据库

cd usr/local/src/
wget https://repo.mysql.com//mysql57-community-release-el7-8.noarch.rpm
复制代码

2、安装mysql

yum -y install mysql57-community-release-el7-8.noarch.rpm
复制代码

3、查看mysql安装情况

yum repolist enabled | grep mysql.*
复制代码

4、查看mysql server

yum install mysql-community-server
复制代码

5、启动mysql

systemctl start mysqld
复制代码

设置开机自启:

systemctl enable mysqld
systemctl daemon-reload
复制代码

然后就是登陆MySQL

首先获取默认密码 , 执行

grep "A temporary password is generated for root@localhost" /var/log/mysqld.log
复制代码

我这里密码是 S9vMy4eoPc.p

登陆mysql

mysql -uroot -p
复制代码

输入初始密码后执行以下命令修改密码:

ALTER USER 'root'@'localhost' IDENTIFIED BY 'your password';
或者
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your password'; 
复制代码

注:Mysql8.0后密码有要求要包含字母大小写、特殊符号、数字

设置成功。

通过

exit; 
复制代码

命令退出 MySQL,然后通过新密码再次登陆

修改my.cnf文件配置

使用

whereis my.cnf
复制代码

或者

which mysql
以上执行出的路径 后加上--verbose --help | grep -A 1 'Default options'
即可看到my.cnf的路径
复制代码

查找该文件位置,然后

vi /xxx/my.cnf(一般是/etc/my.cnf)
复制代码

如果初始文件如下所示则不用配置,如果不是则需配置该文件内容如下:

[mysqld]
#
# Remove leading # and set to the amount of RAM for the most important data
# cache in MySQL. Start at 70% of total RAM for dedicated server, else 10%.
# innodb_buffer_pool_size = 128M
#
# Remove leading # to turn on a very important data integrity option: logging
# changes to the binary log between backups.
# log_bin
#
# Remove leading # to set options mainly useful for reporting servers.
# The server defaults are faster for transactions and fast SELECTs.
# Adjust sizes as needed, experiment to find the optimal values.
# join_buffer_size = 128M
# sort_buffer_size = 2M
# read_rnd_buffer_size = 2M
datadir=/var/lib/mysql
socket=/var/lib/mysql/mysql.sock

# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0

log-error=/var/log/mysqld.log
"/etc/my.cnf" 27L, 960C
复制代码

上传sql数据库文件到云服务器并执行

首先本地打包sql文件(选择导出),之后将打包好的sql文件(这里以fitnesshub.sql为例)上传到/tmp目录。

mysql中执行如下命令导入sql文件:

create database fitnesshub(新建数据库)
use fitnesshub
set names utf8mb4
source /tmp/fitnesshub.sql
复制代码

然后屏幕上就会不断的滚,最后提示导入成功。

MySQL5.7 设置远程访问

选择数据库

use mysql;
复制代码

开启远程连接 root 用户名 % 所有人都可以访问 password 密码

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'your password' WITH GRANT OPTION;
FLUSH PRIVILEGES; 
复制代码

或者

create user 'root'@'%' identified with mysql_native_password by 'your password';
grant all privileges on *.* to 'root'@'%' with grant option;
flush privileges;
复制代码

重起mysql服务

service mysqld restart
复制代码

如果执行完以上步骤,还是不能远程连接,那么我们需要查看服务器的防火墙是否开启

service iptables status
复制代码

如果防火墙开启,请关闭

service iptables stop
复制代码

或者打开防火墙开放3306端口

#开启防火墙
systemctl start firewalld
#开放3306端口
firewall-cmd --zone=public --add-port=3306/tcp --permanent
firewall-cmd --reload
复制代码

修改mysql数据库默认编码为utf8mb4

修改/etc/my.cnf配置文件,在[mysqld]下添加编码配置,如下:

character_set_server=utf8mb4
init_connect='SET NAMES utf8mb4'
复制代码

编辑保存完重启mysql服务:

systemctl restart mysqld
复制代码

查看mysql数据库编码:

show variables like '%character%';
复制代码

到此就可以远程连接了。

mysql远程连接

在navicat中新建mysql连接,输入申请到的阿里云服务器的公网IP、账号(root)和密码,即可远程登录。

5.运行已部署好地项目

[1]. 前端项目启动

前端项目由nginx反向代理,进入nginx安装目录下的sbin目录下

执行以下命令:

./nginx -c /usr/local/nginx/conf/nginx.conf
复制代码

说明:

● 其中/usr/local/nginx/conf/nginx.conf是你自己的nginx.conf路径。

● -c参数指定了要加载的nginx配置文件路径。

linux如何重启nginx?

重新平滑启动:

1、进入nginx安装目录下的sbin目录下

2、执行以下命令:

./nginx -s reload
复制代码

前端项目启动完成

[2]. 后端项目启动

运行命令:

java -jar xxx.jar
复制代码

然后回车,即可在xshell中看到项目的启动状态。

如果有多个服务需要开启则运行以上linux命令后回车,然后输入以上命令继续回车

保持项目一直在云服务器上运行的linux命令

nohup java -jar xxx.jar &
复制代码

关闭java进程

ps查进程ID

ps -ef | grep 你的jar包名称
复制代码

之后会显示两个进程信息,选择带xxx.jar的一个(一般是第一个)

杀掉该进程

kill -9 你的java进程号
复制代码

6.结束

至此spring boot和vue的前后端分离项目就成功部署到云服务器上了,登录公网IP+前端项目端口号即可正常访问你所部署好的项目。

最后附上linux命令大全地址:www.linuxcool.com

本文和Segmentfault社区文章同步更新:segmentfault.com/a/119000004…

分类:
阅读
标签: