Vue+SpringBoot+Nginx部署在阿里云上面

项目环境:

 webstorm  idea mysql 

项目能在本地运行跑通

阿里云服务器:

购买阿里云服务器

步骤:(没有的自行百度)

1.使用Xshell连接到阿里云服务器

2.在阿里云服务器的/usr/lcoal下面安装java并配置环境变量

3.安装nginx反向代理服务器

4.安装mysql,使用navcait for mysql连接远程服务器,建库导入表sql,这样服务器上就有数据了(java项目里面的数据库连接服务器上面的数据库)

5.将java项目打包放在/usr/local/vhr下面,运行,通过公网ip+端口+uri看接口能访问通

6.在webstorm中将vue项目,npm run build 打包,将dist文件压缩使用rz -y上传,unzip解压,

7.配置nginx.conf文件

8.ok,访问测试项目。

 

下面个人在具体操作时的个人笔记比较乱,但很全,不想整理了

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------


阿里云服务器

1.服务器公网ip和私网ip

服务器公网ip

可以用于域名解析ip,服务器远程登录ip,是最主要的服务器ip地址。

内网ip   不能用于域名解析。   不可以直接用于服务器远程登录,其主要作用是:跟当前帐号下的其他同集群的机器通信。

2.ssh

SSH 为 Secure Shell 的缩写,SSH 为建立在应用层基础上的安全协议。SSH 是较可靠,专为远程登录会话和其他网络服务提供安全性的协议。利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。

把所有传输的数据进行加密,这样"中间人"这种攻击方式就不可能实现了,而且也能够防止DNS欺骗和IP欺骗。使用SSH,还有一个额外的好处就是传输的数据是经过压缩的,所以可以加快传输的速度。

安全性:

从客户端来看,SSH提供两种级别的安全验证。

第一种级别(基于口令的安全验证)

第二种级别(基于密匙的安全验证)

3.A记录和Cname

A记录是解析域名到IP,CNAME是解析域名到另外一个域名。

A记录,即Address记录,它并不是一个IP或者一个域名,我们可以把它理解为一种指向关系:

  • 域名 www.xx.com → 111.111.111.111

  • 主机名 DD → 222.222.222.222

也就是当你访问这些域名或者主机名的时候,DNS服务器上会通过A记录会帮你解析出相应的IP地址,以达到后续访问目的。所以A记录是IP解析,直接将域名或主机名指向某个IP。

CNAME记录,也叫别名记录,相当于给A记录中的域名起个小名儿,比如www.xx.com的小名儿就叫www.yy.com好了,然后CNAME记录也和A记录一样,是一种指向关系,把小名儿www.yy.com指向了www.xx.com,然后通过A记录,www.xx.com又指向了对应的IP:

www.yy.com → www.xx.com → 111.111.111.111

举个CDN的栗子

Vue+SpringBoot+Nginx部署在阿里云上面_第1张图片

 

4.服务器安装jdk8

1.使用Xshell 建立会话 输入公网ip和root密码,保存密钥

2.

mkdir /usr/local/java 

将本地文件上传到Linux上

查看rz命令,是否安装lrzsz,没有输入

yum -y install lrzsz

安装,然后拖动文件即可,或rz -y命令弹出窗口

3.jdk解压

  1. 命令行进入/usr/local/java文件夹 cd /usr/local/java

  2. 解压:tar zxvf 压缩包名称 (例如:tar zxvf jdk-8u191-linux-x64.tar.gz)后面的名称可以只输入一个tar zxvf j,然后使用Tab按键自动补全文件名

  3. 删除压缩包:rm -f 压缩包名称 (例如 rm -f jdk-8u191-linux-x64.tar.gz

4.环境变量配置

  1. 编辑/etc/profile文件 vi /etc/profile

  2. Insert或者I键,切换成编辑模式。 找到内容末尾,按图片输入下面一段话。 在unset i的前面输入

 

export JAVA_HOME=/usr/local/java/jdk1.8.0_191
export CLASSPATH=.:$JAVA_HOME/jre/lib/rt.jar:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$PATH:$JAVA_HOME/bin
#(!!!注意:JAVA_HOME的路径是你实际解压后的JDK的路径,千万别写错了)
  1. Esc

    退出编辑模式,输入

    :wq

    保存并退出

    Vue+SpringBoot+Nginx部署在阿里云上面_第2张图片

  2. 生效环境变量 对于/etc/profile编写完成之后是不够的,还需要最后一个步骤,就是让刚刚我们修改的文件变成有效起来,所以我们再输入一个命令,让修改生效。 生效命令:source /etc/profile

5.验证安装成功与否

java -version

img

 

LINUX安装nginx步骤

https://blog.csdn.net/t8116189520/article/details/81909574

1.安装依赖包

//一键安装上面四个依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

 

2.下载并解压安装包

//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
//下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz

3.安装nginx

//进入nginx目录
cd /usr/local/nginx
//进入目录
cd nginx-1.13.7
//执行命令
./configure
//执行make命令
make
//执行make install命令
make install

4.配置nginx.conf

# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf

5.启动nginx

/usr/local/nginx/sbin/nginx -s reload

如果出现报错:nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed

则运行: /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

再次启动即可!

 

查看nginx进程是否启动:

ps -ef | grep nginx

Vue+SpringBoot+Nginx部署在阿里云上面_第3张图片

安装完成一般常用命令

进入安装目录中,

命令: cd /usr/local/nginx/sbin

启动,关闭,重启,命令:

./nginx 启动

./nginx -s stop 关闭

./nginx -s reload 重启

 

Vue+SpringBoot+Nginx部署在阿里云上面_第4张图片

 

netstat -ntlp 查看端口 
netstat -anp | grep nginx
#nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)报错
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

安装MYSQLhttps://blog.csdn.net/qq_40241957/article/details/90343651

 

https://yq.aliyun.com/articles/285398

在阿里云里面,先创建远程连接

用navicat for mysql 连接阿里云的数据建立一个新连接,连接名随意,ip地址公网

Vue+SpringBoot+Nginx部署在阿里云上面_第5张图片

 

后端的数据库和密码要和阿里云的一致

Vue+SpringBoot+Nginx部署在阿里云上面_第6张图片

 

打包 -Dmaven.test.skip=true指明忽略测试文件的报错

mvn install -Dmaven.test.skip=true

https://blog.csdn.net/SHUKAI618/article/details/89149990?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

注意1.加&表示一直后台运行,不加表示临时运行,关闭窗口项目即停止运行 2.nohup:即项目在运行前新建一个nohup.out文件用来记录该项目的运行日志情况。

启动应用指定外部文件
    nohup java -jar xxxx.jar  --Dspring.config.location=application.properties &
    nohup Java –jar 项目名 &
//关闭进程
ps -aux | grep java
kill -s 9 24204

nohup: ignoring input and appending output to ‘nohup.out’ 回车即可

忽略输入输出,将信息化信息记录到nohup.out文件中

文件会很大nohup.out,如果经常访问

nohup java -jar yourProject.jar >/dev/null 2>log & 只输出错误日志

https://blog.csdn.net/davidhzq/article/details/102766881

同时后端的端口要配置安全组才可使用公网ip访问接口地址

参考资料

https://www.csdn.net/gather_22/MtTaAg4sNTczNi1ibG9n.html

Vue+SpringBoot+Nginx部署在阿里云上面_第7张图片

 

 

前端vue项目进行打包:npm run build

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

要加.不然js文件访问有问题

在config/index.js中

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/vhr': {
        target: 'http://localhost:8889',
        secure: true,
        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
        pathRewrite: {
          '^/vhr': '/vhr'
        }
      }
    },

    // Various Dev Server settings
    host: '127.0.0.1', // can be overwritten by process.env.HOST
    port: 8080, // 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-

  
    useEslint: false,
   
    showEslintErrorsInOverlay: false,


    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,

    cssSourceMap: true
  },

proxyTable的中的是开发环境的后端接口,跨域与他没有任何关系

在nginx中配置跨域

server {
              listen 8080;     #1.你想让你的这个项目跑在哪个端口
              server_name 47.94.76.91;     #2.当前服务器ip
       location / {
           root   /home/dist/;     #3.dist文件的位置(我是直接放在home目录下了) 
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
       }
        location /vhr/api {  #4.当请求跨域时配置端口转发
            proxy_pass http://47.92.76.97:8889/vhr/api; #5.转发地址 ;8889后端接口
        } 
       }

 

你可能感兴趣的:(SpringBoot,Vue,分布式)