前后端分离项目上云

原创已于 2024-11-01 11:17:58 修改 · 1.7k 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#java #运维开发 #json #vue.js

于 2024-11-01 11:14:22 首次发布

我不知道怎么描述这种心情!

当你自己做过的项目，你随时随地都可以访问到，并且还可以作为简历和答辩时随时展示!

这种就很爽!!!

接下来我就基于阿里云服务器来操作一下前后端项目如何上云!!!

我这里使用的是vue+springboot，vue使用的是vite项目，spring boot使用的是maven项目。

如果你想要我演示的这个项目可以加q裙463727795，内附软件、资料等等，欢迎加入一起讨论编程问题!!!

这里我们先打包

前端vite打包

这里执行命令后就会产生一个dist文件夹，先记住，后面用

接下来是springboot项目的部署，这里我使用到啦maven插件

<!--    SpringBoot应用打包插件-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

然后就直接打包了，这里直接maven点击package

打包完成后就去target目录下面找jar包

接下来再将mqsql的数据打包下来

直接命令台cmd

mysqldump -u [username] -p[password] [database_name] > [filename].sql

参数说明

[username]: MySQL 用户名
[password]: MySQL 密码（注意：-p和密码之间没有空格）
[database_name]: 要导出的数据库名称
>: 输出重定向符号，将输出写入文件
[filename].sql: 输出的 SQL 文件

打包完后就直接在这个文件路径下面找

这是整理出来的文件，sql后缀是数据库，jar后缀是后台，dist文件夹是前端

这里我们准备上云

当然，上云你需要服务器，这里我使用的是阿里云ecs服务器，然后将本地文件全部上传到云上面（记住，dist文件夹压缩后上传）

这里我使用的是宝塔可视化界面，如果你没有这个界面，可以看我的上一个文章

Linux系统安装可视化宝塔-优快云博客https://blog.youkuaiyun.com/zhdbshiai/article/details/143374594?spm=1001.2014.3001.5501

然后点开文件，先将文件上传,这里我们上传成功了

接下来就开始部署，首先是mysql数据库部署，点开数据库，如果没有下载的话，他会有提示，直接基于提示安装对应的版本，然后创建数据库，然后就导入sql文件，就可以了

这里数据库就导入成功了，记住是导入sql文件

然后我们进行后台部署，点击网站，点击java项目，选择springboot项目，部署端口，jdk等等，然后直接提交就ok了

注意：这里端口得在阿里云服务器里面安全组放行，不然访问不了

接下来部署前端项目我们点击PHP，安装对应的PHP就行，无脑安装

接下来开始部署

点开后是这个页面

有域名填域名，没域名填ip+前端端口就行

像我这样

然后确定后，去访问ip+端口或者域名，访问后显示如下图就OK了

这里如果访问不了，多半因为安全组没有添加导致的

然后开始部署我的vite前端项目

点开文件夹，就会看见刚才我们创建的项目的文件夹

将里面的所有文件删除，然后将dist压缩包搞进去，然后解压，就像这样，然后解压

然后将dist里面的文件全部搞出来，将dist文件夹删除，最好

然后再次访问这个前端的ip+端口

像这样，你的项目就成功上云了。

问题：你会发现你前端无论如何就登录都会报错，这里有可能是代理的问题

如果说你的前端用到了代理，这里就必须配置一下前端文件了。接下来准备配置

加入这写代码

# 其他代理配置
    location ^~/app-dev/ {
        proxy_pass http://localhost:6002/;
    }

根据自己实际项目中来

然后再重新启动前端项目

然后就部署成功了!!!