零基础入门云服务器二（部署vue+springboot项目）

起秀

已于 2023-03-17 13:49:55 修改

阅读量915

点赞数 4

分类专栏：云服务器文章标签：服务器 vue spring boot 阿里云

于 2023-02-05 12:53:28 首次发布

本文链接：https://blog.csdn.net/qq_50637757/article/details/128889194

版权

云服务器专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

本人现在大三，感觉前两年都荒废了没学什么东西，正好赶上今年学校安排vue和springboot的课程，借着这个做课设的机会学点东西，顺便整一个个人云服务器，我想作为一个软件工程专业的学生今后也一定会用到云服务器，早晚要学不如现在开始。

本文章的前提是你已经拥有一台云服务器（这里我用阿里云），并且你已经安装宝塔面板并成功进入宝塔面板的页面，而且你想在服务器上部署你的vue+springboot项目，购买云服务器和安装宝塔面板的教程网上有很多这里我就不做赘述。

本文的初衷是想通过写一篇笔记来记录一下我第一次使用云服务器（在此之前我对云服务器了解甚少，因此踩了很多坑），同时希望那些和我一样第一次想把自己的项目部署到服务器的人看了我的笔记后可以少踩一些坑

阿里云高校计划领取云服务器以及安装宝塔面板请观看我的上一篇博客

部署vue项目

上传

首先在你的vue.config.js中修改你请求的baseurl

axios.defaults.baseURL = 'http://ip:端口'

运行

npm run build

项目目录下会生成一个dist文件夹

宝塔面板中点击文件，然后找一个位置上传
我是上传到这里

如果文件夹中的文件太多，可以先压缩上传，在服务器上解压

配置nginx

listen后面跟你前端端口
server_name随便取
root后面跟你刚才dist目录的位置

下面附上我的配置

server
    {
        listen 8080;
        server_name localhost;
        index index.html index.php;
        root  /www/wwwroot/default/dist;
            location ~ /tmp/ {
                return 403;
            }

        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }
        location / {
          try_files $uri $uri/ /index.html;
        }
        location ~ /\.
        {
            deny all;
        }
        
        access_log  /www/wwwlogs/access.log;
    }

网上我看别人还有配置了一个代理转发
我本来也有弄，但后面删了发现能跑就没加了
如果你配置完报错了，那可以加上下面的代码试试，放在nginx配置文件的server里
本文中所有的ip指的都是服务器的公网ip

        location /api {
          proxy_pass http://ip:端口;
        }

开放端口

进入你的阿里云ECS
点击安全组

创建安全组或点进已有的安全组

点击手动添加或快速添加
快速添加就你想开放的打勾就好了

下面是手动添加

记得添加
8888 宝塔面板的端口
888 phpmyadmin
3306 mysql
xxxx 前端的端口
xxxx 后端的端口
还有22 443等端口

如果你的前端端口是8080
要开放8080端口，千万不要认为80和8080是同一个端口，不一样的（这句话的出现是有原因的呜呜呜）

设置完后点进实例
点击加入安全组，把刚刚设置的规则加入一下

至此，你应该能通过在浏览器输入 ip:端口来访问你的vue页面了

部署springboot项目

修改配置

打开你后端的application.properties文件

url中的localhost改成ip
数据库的用户名和密码也要改，具体在下文数据库配置中

打开你的拦截器配置文件
加上如下一行语句，网站同样是 ip:端口

打包上传

点击idea右侧的maven

先点击clean
执行完后再点击package

打包完后你的目录会出现一个target文件夹，文件夹下有一个.jar文件

宝塔面板中点击文件，然后找一个位置将target文件夹中的.jar文件上传
我是上传到和dist同一个目录

添加项目

打开宝塔面板，点击网站

点击添加java项目
参考我的配置

目标url是http://ip:前端端口
前端根目录是之前上传的dist文件夹
在哪里应该自己知道

添加完后运行项目即可

至此，后端部署完成

数据库配置

数据库权限

开放端口

宝塔添加数据库

后端对接数据库

这两边的用户密码要一样

url是 ip/数据库名

本地数据库上传服务器

点击数据库

点击导入

管理数据库（phpmyadmin）

你可以从上图的两个地方进入phpmyadmin进入数据库管理页面

可以用你创的数据库用户名密码登录进去

报错

phpmyadmin报错

nginx配置问题

如果你的phpmyadmin进不去
你需要去看看你的nginx配置有没有问题

点击软件商店

找到nginx

点击配置修改
在这里面修改你的nginx配置(你只需要去关注server就行)

正常来讲只要你不去改，他的配置默认就是能用的
由于我自己也不太懂这个该怎么配，我也是参考别人的
下面贴上我自己的配置

server
    {
        listen 888;
        server_name phpmyadmin;
        index index.html index.htm index.php;
        root  /www/server/phpmyadmin;

        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }