前后端分离项目上云

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

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

这种就很爽!!!

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

我这里使用的是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系统安装可视化宝塔-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/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/;
    }

 根据自己实际项目中来

然后再重新启动前端项目

然后就部署成功了!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值