前后端分离项目发布至云服务器--云服务器购买、Vue前端搭建至Nginx、SpringBoot后台部署

云服务购买、Vue项目部署、SpringBoot项目部署

1. 云服务器购买

1-1. 本次测试使用的是 腾讯云 服务器 ，30天免费试用；

1-1-1访问官方网站： https://cloud.tencent.com/ ，选择产品-轻量服务器，如下图：

1-1-2个人可以选择试用一个月，如下图，按提示，使用QQ、微信、手机号、实名认证等操作即可购买成功

1-1-3登录腾讯云后端管理界面 ，微信扫码登录 ， 官网地址：https://console.cloud.tencent.com/

1-1-4 选中轻量服务器，即可进入服务器的管理页面，我选的是Ubuntu服务器：

1-1-5 开放端口–很重要【仅此处有效，命令行ufw iptables等开放端口无效】：

		流程：     选中机器-管理-防火墙-添加规则

1-1-6 设置登录用户和密码： 选中机器-更多-重置密码： 设置root，ubuntu(默认给的用户）的登录密码

	  A、 用户登录【如test】： 选中机器-登录-输入用户名[如root] -- 进入到命令行模式了； 【注：root只有这里可以直接登录】
	  B、 客户端工具，如Putty，Xshell等连接了，如使用ubuntu登录，命令行可以su root切换root用户 【注：直接root无法连接】

2. Vue项目部署

2-1 安装docker

参考我写的Docker笔记

2-2 docker下安装Nginx

参考连接

2-2-1 Vue项目发布至Nginx

• Vue项目执行：npm run build 指令，之后生成的dist文件夹压缩，如： dist.rar
• 将dist.rar放到服务器的Nginx目录下，如我的路径：usr/local/nginx/html/
• 解压 (Linux默认无法解压rar，需安装rar工具)

# 安装压缩、解压缩工具先
sudo apt-get install rar
sudo apt-get install unrar

# 解压rar
unrar x dist.rar

• 然后就可以通过外网访问Vue网站了：如： http://1.117.139.89/dist

3. SpringBoot后台项目部署

3-1 将SpringBoot的Jar包拷贝至Ubuntu服务器

• 借助工具或云服务器后端控制台，直接上传文件至指定的目录即可

3-2 后台运行SpringBoot服务

#  切换至Jar包路径，执行如下指令：
# testLog.txt为SpringBoot服务启动的日志信息，可以打开浏览，观察是否启动成功
nohup java -jar test.jar > testLog.txt 2>&1 &

# 若需要更改服务信息，如修改端口号为8888：
# 1. 在jar包目录下，创建application.properties文件
touch application.properties
vi application.properties
# 2. 写入：   server.port=8888
# 3. 停止之前运行的服务，重新启动
#  -- 查找java的进程信息
ps -aux | grep java
#  -- 杀死进程即可   24204为上面查找出来的进程ID
kill -s 9 24204
# 重新启动SpringBoot服务
rm testLog.log  # 删除之前启动的日志信息
nohup java -jar test.jar > testLog.txt 2>&1 & 
# 4. 本地发起测试：
curl http://localhost:8888/UserInfoApi/system/menu/my/1.6.1
# 5. 外网发起测试：
http://1.117.138.89:8888/UserInfoApi/system/menu/my/1.6.1

3-3 如需 Jar 开机自动启动，可参考我写的另一篇文章：

Ubuntu设置SpringBoot项目Jar开机启动

4. 修改Vue项目的相关配置，如接口地址

cd /usr/local/nginx/html/dist
cat config.js
# 修改内容，注： 接口地址需为外网的完整地址，不可为LocalHost或者127.0.0.1，否则Vue项目，外网访问无法正常调用后端接口
vi config.js    # 如：  API_URL: "http://1.117.138.89:8888/UserInfoApi"

# 如此，整个网站搭建完成了，本人过程中被端口号的问题折腾了蛮久，此处记录下来，供日后备忘浏览