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

朴灿烈づ我的快乐病毒、 2024-03-31 16:22 20阅读 0赞

#### 文章目录 ####

*  云服务购买、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(默认给的用户）的登录密码
     *  2. Vue项目部署
     *   *  2-1 安装docker
         *  2-2 docker下安装Nginx
         *   *  2-2-1 Vue项目发布至Nginx
     *  3. SpringBoot后台项目部署
     *   *  3-1 将SpringBoot的Jar包拷贝至Ubuntu服务器
         *  3-2 后台运行SpringBoot服务
         *  3-3 如需 Jar 开机自动启动，可参考我写的另一篇文章：
     *  4. 修改Vue项目的相关配置，如接口地址

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

### 1. 云服务器购买 ###

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

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

![在这里插入图片描述][1cbf54dc415445519e105fade493d83d.png_pic_center]

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

![在这里插入图片描述][85a3d7a98d9b4010b59bf00556fb3536.png_pic_center]

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

![在这里插入图片描述][7a136d07075a44f681efbfd19036d700.png_pic_center]

##### 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无法连接】

![在这里插入图片描述][ad27f132e317490493bc5ef9c04e2947.png_pic_center]

### 2. Vue项目部署 ###

#### 2-1 安装docker ####

[参考我写的Docker笔记][Docker]

#### 2-2 docker下安装Nginx ####

[参考连接][Link 1]

##### 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开机启动][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"
    
    # 如此，整个网站搭建完成了，本人过程中被端口号的问题折腾了蛮久，此处记录下来，供日后备忘浏览

[1cbf54dc415445519e105fade493d83d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e81f5837405146708f8bc319486a5db2.png
[85a3d7a98d9b4010b59bf00556fb3536.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/ed166f3e45c24a8f9d890896e0365890.png
[7a136d07075a44f681efbfd19036d700.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/abc58e4a7e554781bc19c5ae4ddf6f3d.png
[ad27f132e317490493bc5ef9c04e2947.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1fd66ec3caf24815a28db5a4577c2b11.png
[Docker]: https://blog.csdn.net/qq_17847881/article/details/127821303
[Link 1]: https://blog.csdn.net/qq_37774171/article/details/122544493
[Ubuntu_SpringBoot_Jar]: https://blog.csdn.net/qq_17847881/article/details/128234938