关于前端:Spring-BootVue前后端分离项目部署笔记

5次阅读

共计 6359 个字符,预计需要花费 16 分钟才能阅读完成。

前言:

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

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>

之后 rebuild 整个我的项目,应用 maven 侧边栏的操作按钮,依照 clean->compile->package->install 的程序,实现后在我的项目的 target 文件夹下生成 xxx.jar,即为打包后的我的项目文件,后端我的项目打包实现。

3. 上传我的项目到云服务器

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

装置胜利后,关上,在“主机”处增加服务器 ip,新建会话:

连贯会话:

依据提醒输出用户名和明码登录,即可近程连贯阿里云服务器。

[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 启动胜利:

重启服务:

/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;
            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=/hkTool/jdk1.8.0_131(换成你的 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

而后就是登陆 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';

注:8.0 后明码有要求要蕴含字母大小写、特殊符号、数字

设置胜利。

批改 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 'password' WITH GRANT OPTION;
FLUSH PRIVILEGES; 

重起 mysql 服务

service mysqld restart

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

service iptables status

如果防火墙开启,请敞开

service iptables stop

到此就能够近程连贯了。

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 命令大全地址:https://www.linuxcool.com

本文和掘金社区文章同步更新:https://juejin.cn/post/696314…

正文完
 0