如何将前后分离的项目部署到云服务器

目录

一、购买服务器（腾讯云、阿里云……）

二、下载 X-shell和Xftp

三、部署前准备

1、打包前端文件dis

打包：npm run build

2、打包后端文件jar

打包 ：mvn clean package 执行打包后的jar

3、打包后可以先尝试一下运行打包的文件

四、 部署云服务器的环境并将打包的前后端文件上传上去

1、使用上面下载的X-shell和Xftp安装软件：nginx、jdk、mysql

 安装jdk1.8

安装nginx 

安装mysql 

 2、部署前端文件dist

 3、部署后端文件jar

4、启动程序： 

---

一、购买服务器（腾讯云、阿里云……）

云服务器操作系统分为Windows和Linux类，Linux系统相对于win占用更少系统资源，一般选用Linux

阿里云Linux镜像可选Aliyun Linux、CentOS、Ubuntu、Debian、SUSE Linux、OpenSUSE、CoreOS和FreeBSD。

Aliyun Linux是阿里云原生Linux操作系统，针对ECS做了大量深度优化，完全兼容CentOS生态和操作方式；

如果是Web网站应用，免费好用首选CentOS；

Ubuntu基于Debian，新手更容易上手，时长占有率也高。
综上，阿里云ECS云服务器Linux镜像推荐选择Aliyun Linux、CenOS或Ubuntu都可以，根据用户实际熟悉程度及应用选择

这里选用：CentOS 7.2的Linux系统

前端开发工具：vscode  vue+element
后端开发工具：IDEA    spring boot
部署环境：阿里云Linux CentOS7

二、下载 X-shell和Xftp

家庭/学校免费 - NetSarang Website

每次连接服务器都要一步步连挺麻烦的 ∴借助一个第三方的工具进行远程与服务器连接

管理云服务器的软件：XShell，Putty，SecureCRT等

使用的是Xshell和Xftp。

Xshell提供了一个终端界面用于Shell操作，使用SSH协议连接到远程服务器

Xftp支持SSH和SFTP协议，主要用于文件传输和管理

三、部署前准备

1、打包前端文件dis

修改baseUrl：

新建文件.env.development（本地配置）

VUE_APP_BASEURL='http://localhost:9090'

新建文件..env.production（生产配置）

VUE_APP_BASEURL='http://服务器地址:9090'

main.js 设置全局变量$baseUrl

Vue.prototype.$baseUrl=process.env.VUE_APP_BASEURL

打包：npm run build

vue-cli-service 默认会读取 env.development文件

2、打包后端文件jar

打包 ：mvn clean package 执行打包后的jar