⭐️基础链接导航⭐️
服务器 → ☁️ 阿里云活动地址
看样例 → 🐟 摸鱼小网站地址
学代码 → 💻 源码库地址
一、前言
到这一篇我们终于把环境搭好,也做好了几个热搜小组件,为了让我们方便展示成果或者方便自己摸鱼,我们需要将这个小网站部署上云。整体流程并不复杂,但有很多个小细节。如果某个细节处理不当,可能会导致部署失败,因此这是一个不断尝试和调整的过程。基本流程包括:修改配置、打包、上传、运行和调试,然后反复进行,直到成功。
二、前端资源打包
1. 修改配置
找到apiService.js
文件,将baseURL改成自己的服务器的IP地址,端口建议使用80,因为http协议默认端口是80,https协议默认端口是443,这个应该都知道吧,如下:
// apiService.js
import axios from "axios";
// 创建axios实例并配置基础URL
const apiClient = axios.create({
baseURL: "http://ip:80/api",
headers: {
"Content-Type": "application/json"
},
});
export default {
// 封装Get接口
get(fetchUrl) {
return apiClient.get(fetchUrl);
}
};
找到vue.config.js
文件,将下面的配置替换一下,主要用于优化打包出来的文件,将一些不必要的文件去掉,如下:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 去除Vue打包后js目录下生成的一些.map文件,用于加速生产环境构建。
productionSourceMap: false,
// 去除Vue打包后.css和.js文件名称中8位hash值,跟缓存有关;一般为true就行。
filenameHashing:false
})
2. 执行打包命令
打开命令行,输入打包命令,如下:
npm run build
打包结束后,会有一个dist文件夹,里面包括html、js、css等文件,如下:
3. 提供资源访问接口
在summo-sbmy-start
这个module的resources目录下创建一个static文件,把dist里面的内容复制进去(ps:不包括dist目录本身),如下:
在application.properties中添加thymeleaf配置,如下:
spring.thymeleaf.prefix=classpath:/static/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
最后在在summo-sbmy-web
这个module下创建IndexController.java,如下:
package com.summo.sbmy.web.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
@GetMapping("/")
public String index(){
return "index";
}
}
这些做好之后,启动应用,访问http://localhost/,没有问题的话,应该就可以访问了。
如果你发现图标加载不出来,那可能是有个打包配置没有弄好,将<include>**/*.svg</include>
这行配置放到summo-sbmy-start
这个module的 <build>
标签下,如下:
<resources>
<resource>
<!-- 指定配置文件所在的resource目录 -->
<directory>src/main/resources</directory>
<includes>
<include>application.properties</include>
<include>logback-spring.xml</include>
<include>**/*.html</include>
<include>**/*.js</include>
<include>**/*.css</include>
<include>**/*.svg</include>
</includes>
<filtering>true</filtering>
</resource>
<resource>
<!-- 指定配置文件所在的resource目录 -->
<directory>src/main/resources</directory>
<includes>
<include>**/*.woff</include>
<include>**/*.ttf</include>
<include>**/*.xdb</include>
<include>**/*.jks</include>
<include>**/*.svg</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
配置和接口都弄好之后,启动应用重新访问一下,这时应该就可以看到图标了。
三、后端应用打包
在打包上传之前我们先做一些小准备,打开我们的idea工具,找到插件管理,一般是File —> Settings —> Plugins,搜索Alibaba Cloud Toolkit
,下载安装一下,如下:
下载安装好之后,有一个Alibaba Cloud View,这里可以直接连接到我们买的阿里云ECS服务器,如下:
这个插件可以上传文件,也可以直接打开终端,这样就不用下载专门的软件连接ECS了,很方便。
1. xxl-job应用部署
(1) 应用打包
找到Maven插件,执行package命令,如下:
打包出来,如下:
(2) 应用上传
使用刚才下载的阿里云插件,可以直接将打包出来的jar包上传到指定的目录,我设置的是/home/admin/xxl-job
,如下:
上传后,打开终端,可以启动一下,看看有没有问题,如下:
(3) 执行脚本
在我们使用SpringBoot框架开发完一个项目后,需要将该项目打成jar包,放到用于生产的服务器上去运行。一般都是执行 java -jar xxx.jar &命令运行,但是这样是有问题的。
比如启动时需要加入参数,如-Dxxx=xxx,这个命令就会很长不易读且容易忘。所以,最好是使用shell脚本将配置与命令维护起来。
新建一个shell脚本,名为start.sh,如下:
#!/bin/bash
#这里可替换为你自己的执行程序,其他代码无需更改
APP_NAME=xxx.jar
#使用说明,用来提示输入参数
usage() {
echo "Usage: sh 脚本名.sh [start|stop|restart|status]"
exit 1
}
#检查程序是否在运行
is_exist(){
pid=`ps -ef|grep $APP_NAME|grep -v grep|awk '{print $2}' `
#如果不存在返回1,存在返回0
if [ -z "${pid}" ]; then
return 1
else
return 0
fi
}
#启动方法
start(){
is_exist
if [ $? -eq "0" ]; then
echo "${APP_NAME} is already running. pid=${pid} ."
else
nohup java -jar /home/admin/$APP_NAME > /dev/null 2>&1 &
echo "${APP_NAME} start success"
fi
}
#停止方法
stop(){
is_exist
if [ $? -eq "0" ]; then
kill -9 $pid
else
echo "${APP_NAME} is not running"
fi
}
#输出运行状态
status(){
is_exist
if [ $? -eq "0" ]; then
echo "${APP_NAME} is running. Pid is ${pid}"
else
echo "${APP_NAME} is NOT running."
fi
}
#重启
restart(){
stop
start
}
#根据输入参数,选择执行对应方法,不输入则执行使用说明
case "$1" in
"start")
start
;;
"stop")
stop
;;
"status")
status
;;
"restart")
restart
;;
*)
usage
;;
esac
使用方式如下:
- 给start.sh文件授权:
chmod 744 start.sh
- 启动服务,在当前目录下执行:
./start.sh start
- 关闭服务,在当前目录下执行:
./start.sh stop
- 重启服务,在当前目录下执行:
./start.sh restart
- 查看服务状态,在当前目录下执行:
./start.sh status
2. summo-sbmy应用部署
打包、上传、启动和上面的xxl-job应用一样的步骤,我就不赘述了。
这里说一点别的:在打包时如何指定配置文件?
就是开发的时候我们一般会有两个配置文件(或者更多):日常的application-dev.properties;线上的application-publish.properties。这两个文件配置是一样的,但是使用的资源不同,开发和线上的MySQL、Redis等资源是两套,就像这样,如下:
这里可能有同学有疑惑,既然有了日常和线上环境的配置文件,为啥还要有application.properties这个文件?
这里的application.properties我们可以当做是一个配置文件容器,它可以将其他配置文件的内容加到这里来。还有一个原因就是因为SpringBoot项目启动的时候只认识application.properties文件,不认识其他的。
(1) 环境配置区分
首先我们在这个module下添加环境配置,如下:
<!-- 添个环境的变量,变量名为environment -->
<profiles>
<profile>
<id>dev</id>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
<properties>
<environment>dev</environment>
</properties>
</profile>
<profile>
<id>publish</id>
<properties>
<environment>publish</environment>
</properties>
</profile>
</profiles>
<build>
<finalName>summo-sbmy</finalName>
<resources>
<resource>
<!-- 指定配置文件所在的resource目录 -->
<directory>src/main/resources</directory>
<includes>
<include>application.properties</include>
<include>application-${environment}.properties</include>
</includes>
<filtering>true</filtering>
</resource>
... 其他配置
</resources>
</build>
刷新一下Maven插件,这两个配置就会被扫描到了,如下:
(2) 使用spring.profiles.active指定环境
在application.properties文件中加入spring.profiles.active=@environment@
配置,将那些不变的配置也可以放进来,如下:
#通过配置的方式激活环境
spring.profiles.active=@environment@
# 项目名称
spring.application.name=summo-sbmy
# 服务器端口
server.port=80
# 资源扫描配置
spring.thymeleaf.prefix=classpath:/static/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
# Mybatis自动映射
mybatis.configuration.auto-mapping-behavior=full
# Mybatis自动映射下划线到驼峰格式
mybatis.configuration.map-underscore-to-camel-case=true
# MyBatis-Plus Mapper的XML映射文件路径
mybatis-plus.mapper-locations=classpath*:/mybatis/mapper/*.xml
(3) 打包命令
- 日常环境打包指令
mvn clean package -Dmaven.test.skip=true -P=daily
- 正式环境打包指令
mvn clean package -Dmaven.test.skip=true -P=publish
四、小结一下
上面说的在打包时指定配置文件,如果大家嫌麻烦的话,也可以只用一份application.properties
文件,省的麻烦。我是开发环境和线上环境的数据库是两套,所以使用不同的配置文件。
包打好之后上传到云服务器这一步不难,启动方式建议使用我推荐的start.sh
脚本,这个应该也不难。阿里云ECS的安全组规则好像默认对80、443端口是全量放开的,所以只要你启动没有什么问题的话,在浏览器输入你的机器公网IP就可以访问达到你的小网站了。
因为部署的细节比较多,可能大家会出现这样那样的问题,如果有问题的话,欢迎评论区留言。
番外:百度贴吧热榜爬虫
1. 爬虫方案评估
百度贴吧热榜是这样的, 接口是:https://tieba.baidu.com/hottopic/browse/topicList?res_type=1
这又是一个网页版热搜榜,网页版的数据解析需要用户到jsoup,这个工具的使用在前面已经说过了,我直接放代码了。
2. 网页解析代码
TiebaHotSearchJob.java
package com.summo.sbmy.job.tieba;
import java.io.IOException;
import java.net.URI;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;
import java.util.Calendar;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
import javax.annotation.PostConstruct;
import com.google.common.collect.Lists;
import com.summo.sbmy.common.model.dto.HotSearchDetailDTO;
import com.summo.sbmy.dao.entity.SbmyHotSearchDO;
import com.summo.sbmy.service.SbmyHotSearchService;
import com.summo.sbmy.service.convert.HotSearchConvert;
import com.xxl.job.core.biz.model.ReturnT;
import com.xxl.job.core.handler.annotation.XxlJob;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.collections4.CollectionUtils;
import org.apache.commons.lang3.StringUtils;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import static com.summo.sbmy.common.cache.SbmyHotSearchCache.CACHE_MAP;
import static com.summo.sbmy.common.enums.HotSearchEnum.TIEBA;
/**
* @author summo
* @version DouyinHotSearchJob.java, 1.0.0
* @description 贴吧热搜Java爬虫代码
* @date 2024年08月09
*/
@Component
@Slf4j
public class TiebaHotSearchJob {
@Autowired
private SbmyHotSearchService sbmyHotSearchService;
@PostConstruct
public void init() {
try {
// 调用 hotSearch 方法
hotSearch(null);
} catch (IOException e) {
log.error("启动时调用热搜爬虫任务异常", e);
}
}
@XxlJob("tiebaHotSearchJob")
public ReturnT<String> hotSearch(String param) throws IOException {
log.info("贴吧热搜爬虫任务开始");
try {
String url = "https://tieba.baidu.com/hottopic/browse/topicList?res_type=1";
List<SbmyHotSearchDO> sbmyHotSearchDOList = Lists.newArrayList();
Document doc = Jsoup.connect(url).get();
//标题
Elements titles = doc.select(".topic-top-item-desc");
//热搜链接
Elements urls = doc.select(".topic-text");
//热搜指数
Elements levels = doc.select(".topic-num");
for (int i = 0; i < levels.size(); i++) {
SbmyHotSearchDO sbmyHotSearchDO = SbmyHotSearchDO.builder().hotSearchResource(TIEBA.getCode()).build();
//设置文章标题
sbmyHotSearchDO.setHotSearchTitle(titles.get(i).text().trim());
//设置文章连接
sbmyHotSearchDO.setHotSearchUrl(urls.get(i).attr("href"));
//设置知乎三方ID
sbmyHotSearchDO.setHotSearchId(getValueFromUrl(sbmyHotSearchDO.getHotSearchUrl(), "topic_id"));
//设置热搜热度
sbmyHotSearchDO.setHotSearchHeat(levels.get(i).text().trim().replace("W实时讨论", "") + "万");
//按顺序排名
sbmyHotSearchDO.setHotSearchOrder(i + 1);
sbmyHotSearchDOList.add(sbmyHotSearchDO);
}
if (CollectionUtils.isEmpty(sbmyHotSearchDOList)) {
return ReturnT.SUCCESS;
}
//数据加到缓存中
CACHE_MAP.put(TIEBA.getCode(), HotSearchDetailDTO.builder()
//热搜数据
.hotSearchDTOList(
sbmyHotSearchDOList.stream().map(HotSearchConvert::toDTOWhenQuery).collect(Collectors.toList()))
//更新时间
.updateTime(Calendar.getInstance().getTime()).build());
//数据持久化
sbmyHotSearchService.saveCache2DB(sbmyHotSearchDOList);
log.info("贴吧热搜爬虫任务结束");
} catch (IOException e) {
log.error("获取贴吧数据异常", e);
}
return ReturnT.SUCCESS;
}
/**
* 从链接中获取参数
*
* @param url 链接
* @param param 想要提取出值的参数
* @return
* @throws Exception
*/
public static String getValueFromUrl(String url, String param) {
if (StringUtils.isAnyBlank(url, param)) {
throw new RuntimeException("从链接中获取参数异常,url或param为空");
}
try {
URI uri = new URI(url);
String query = uri.getQuery();
Map<String, String> queryPairs = new HashMap<>();
String[] pairs = query.split("&");
for (String pair : pairs) {
int idx = pair.indexOf("=");
String key = URLDecoder.decode(pair.substring(0, idx), StandardCharsets.UTF_8.name());
String value = URLDecoder.decode(pair.substring(idx + 1), StandardCharsets.UTF_8.name());
queryPairs.put(key, value);
}
return queryPairs.get(param);
} catch (Exception e) {
log.error("提取参数发生异常", e);
throw new RuntimeException("从链接中获取参数异常");
}
}
}