阿里云服务器ubuntu16.4部署Vue(2.X)+Springboot项目(全流程)

274 阅读3分钟

一、购买云服务器:

www.aliyun.com/daily-act/e… 阿里云服务器官网

image.png

购买后会进入配置选择界面,linux系统选择ubuntu16.4,网络节点选择最靠近自己城市的,其他默认。

二、配置云服务器:
首先先重置密码:

image.png

然后点击安全组,加入80端口访问:

image.png

点击蓝色字符串

image.png 点击手动添加,然后输入目的端口和源ip:

image.png 保存重启服务器

二、在云服务器上安装nginx:

如果之前有安装过的先卸载:

卸载nginx
rm -rf /etc/nginx/
rm -rf /usr/sbin/nginx
rm /usr/share/man/man1/nginx.1.gz
apt-get remove nginx*
dpkg --get-selections |grep nginx
apt-get --purge remove nginx-common

安装(这里我使用的是root用户,没有使用root用户的需要加上sudo):

apt-get update              #更新apt源,更新之前可以把apt源更改为阿里云apt
sudo apt-get install nginx   #安装nginx

启动nginx:

任意目录直接敲:nginx

启动过程可能遇到80/443端口被占用的情况,此时进行以下处理:

pkill -9 nginx            #强制停止Nginx
fuser -k 80/tcp           #把占用80/443的进程干掉
fuser -k 443/tcp


nginx -s reload   #修改配置后重新加载生效
nginx -s reopen   #重新打开日志文件
nginx -t -c /xxx/xxx/nginx.conf #测试nginx配置文件是否正确

三、安装JDK1.8:

链接:pan.baidu.com/s/102pLZ-4m… 提取码:4684
下载好后使用filezilla软件连接远程云服务器,上传到云服务器上(可传至任意目录,推荐opt目录)
解压jdk1.8压缩包:
tar -xzvf jdk包名称 解压目录
编辑系统配置文件:
vi ~/.bashrc
加入以下语句:

export JAVA_HOME=jdk1.8文件根目录
export JRE_HOME=${JAVA_HOME}/jre  
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib  
export PATH=${JAVA_HOME}/bin:$PATH

加入完成后:wq退出保存。
执行 source ~/.bashrc 更新配置
输入 java -version 看是否有java版本信息

四、安装mysql(其他数据库请参考其他博客),并导入sql文件:

查看是否安装了mysql:
dpkg -l | grep mysql
安装mysql(我这里使用的是root用户,其他用户需要加sudo):
apt install mysql-server
检查是否安装成功:
netstat -tap | grep mysql
登录mysql:
mysql -u root -p
输入密码后登录成功。
创建新数据库后导入数据表SQL文件:
source sql文件路径(不加分号)

五、更改vue请求路径,为打包做准备:

在原来的前端请求后端路径上更改:将localhost改为云服务器ip/api,其他不变。

六、上传打包Vue项目和springboot项目:

在服务器根目录下新建文件夹portal,在portal文件夹下新建vue和springboot文件夹:

cd /
mkdir portal
cd portal
mkdir vue springboot

本地环境进入vue项目根目录,路径名输入cmd开启命令行窗口,输入npm run build 进行打包,打包输出文件夹为dist。
本地环境进入idea,开启maven(视图-工具-maven),打开maven后找到"使用maven打包构建"构建jar包,jar包生成后会在target目录下。
使用filezilla软件将dist文件夹jar包上传到云服务器并分别放在vue文件夹和springboot文件夹下
编辑springboot服务和mysql服务启动脚本(脚本文件可放在根目录或任意目录下,这里我放在了springboot文件夹下):
vi startboot.sh

nohup  java -jar hgd-0.0.1-SNAPSHOT.jar &
nohup service mysql start & 

:wq保存退出。
./startboot.sh 启动springboot服务和mysql服务

七、配置nginx代理,并启动应用:

在/etc/nginx/conf.d文件夹下新建vue.conf文件:

cd /etc/nginx/conf.d
touch vue.conf

进入vue.conf文件并加入以下内容:
vi vue.conf

server {
  listen       80;
  server_name 39.108.209.201; #(服务器ip或者域名,浏览器访问路径)
     location /api/ {
           proxy_pass http://localhost:8081/; # 后台代码的路径 我这里请求后台是localhost:8081开头
           }

  location / {
      root /portal/vue/dist; # 项目路径
      index index.html;
  }
}

nginx -t查看配置是否正确
/etc/init.d/nginx reload 加载最新配置
/etc/init.d/nginx start 启动nginx

到浏览器访问服务器ip成功进入网站!

附nginx启动关闭,重加载命令:

image.png