《花100块做个摸鱼小网站! 》第六篇—将小网站部署到云服务器上

news2024/9/20 5:43:48

⭐️基础链接导航⭐️

服务器 → ☁️ 阿里云活动地址

看样例 → 🐟 摸鱼小网站地址

学代码 → 💻 源码库地址

一、前言

到这一篇我们终于把环境搭好,也做好了几个热搜小组件,为了让我们方便展示成果或者方便自己摸鱼,我们需要将这个小网站部署上云。整体流程并不复杂,但有很多个小细节。如果某个细节处理不当,可能会导致部署失败,因此这是一个不断尝试和调整的过程。基本流程包括:修改配置、打包、上传、运行和调试,然后反复进行,直到成功。

二、前端资源打包

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("从链接中获取参数异常");
        }
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2118632.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【CSS in Depth 2 精译_026】4.4 Flexbox 元素对齐、间距等细节处理(上)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

HTML深度探索 :img应用与实践

HTML深度探索 &#xff1a;img应用与实践 1、定义和用法2、图像格式3、常用属性4、预加载和懒加载4.1 预加载4.2 懒加载 1、定义和用法 HTML 元素 <img>将一张图像嵌入文档。 从技术上讲&#xff0c;实际上并没有将图像插入到网页中&#xff0c;而是将图像链接到了网页。…

17种最佳的联盟营销工具,助你赚取更多佣金

通过最新、最先进的工具获得竞争优势&#xff0c;并启动你的联盟营销策略&#xff0c;以提高效率和节省&#xff08;大量&#xff09;时间。 如果你销售联盟产品或服务&#xff0c;你可能知道&#xff0c;当你意识到市场营销涉及大量工作&#xff08;有时还包括金钱&#xff0…

【算法思想·二叉树】后续篇

本文参考labuladong算法笔记[二叉树心法&#xff08;后序篇 | labuladong 的算法笔记] 前序位置的代码只能从函数参数中获取父节点传递来的数据&#xff0c;而后序位置的代码不仅可以获取参数数据&#xff0c;还可以获取到子树通过函数返回值传递回来的数据。 那么换句话说&am…

软件设计师备考——计算机系统

学习内容源自「软件设计师」 上午题 #1 计算机系统_哔哩哔哩_bilibili 目录 1.1.1 计算机系统硬件基本组成 1.1.2 中央处理单元 1.CPU 的功能 1)运算器 2)控制器 RISC && CISC 流水线控制 存储器 Cache 中断 输入输出IO控制方式 程序查询方式 中断驱动方…

在python里把图变成gif

import scipy.io import matplotlib.pyplot as plt import imageio import numpy as npdata scipy.io.loadmat("/文件路径/Sol.mat")# 提取数据 t_current data[t].flatten() XX, YY np.meshgrid(data[x].flatten(), data[y].flatten()) u_pred_plot_final data[…

轻松应对:环保专包二级资质续期常见问题解答

在环保专包二级资质续期过程中&#xff0c;企业可能会遇到一系列常见问题。以下是对这些问题的详细解答&#xff0c;旨在帮助企业轻松应对续期挑战&#xff1a; 一、政策理解与把握 问题&#xff1a;如何准确理解和把握最新的环保政策和资质续期要求&#xff1f; 解答&#x…

HCIA--实验十三:VLAN间通信子接口实验/双单臂路由实验

一、实验内容 1.需求/要求&#xff1a; 将两个单臂路由通过两台交换机连接起来&#xff0c;成为双臂路由&#xff0c;并探讨这么做的原因。实现全网通&#xff0c;让任何一台主机之间都可以通信。 二、实验过程 1.拓扑图&#xff1a; 2.步骤&#xff1a; 1.给PC配置ip地址…

传感器技术在构建实时监控系统中有什么作用

在无线传感器技术中&#xff0c;物联网生成的传感器数据通过无线方式传输到网络服务器&#xff0c;工程师可以在其中跟踪参数。远距离无线通信提高了工业 4.0 的成本效率并减少了人力。实时监控系统旨在显示传感器节点周围的快速变化&#xff0c;这需要快速、低延迟的数据传输。…

数据分析与挖掘课程相关资源

这是在gitee上整的关于这门课的一个开源项目。 https://gitee.com/rainpet/python-data-analysis-and-mining-demo 头歌平台。 常见问题&#xff1a; 1、如何确认conda的版本&#xff0c;执行如下命令&#xff1a; conda list anaconda$2、实验室登陆后&#xff0c;无法上网&a…

JAVA开源项目 大学生租房平台 计算机毕业设计

本文项目编号 T 019 &#xff0c;文末自助获取源码 \color{red}{T019&#xff0c;文末自助获取源码} T019&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

浅谈人工智能之基于ollama的常见变量设置

浅谈人工智能之基于ollama的常见变量设置 全局命令设置 现象&#xff1a;无法直接使用命令ollama 问题显示如下&#xff1a; [rootlocalhost LLM]# ollama -bash: ollama: command not found 解决方法一&#xff1a; 第一步&#xff1a;输入如下命令&#xff1a; [rootloca…

Android Studio偶尔打开Flutter项目没有智能提示的解决方案

Flutter支持多种IDE来编程&#xff0c;我曾使用过Android Studio和VSC两款软件&#xff0c;但因为长期使用Android Studio的原因&#xff0c;使用起来会比VSC顺手&#xff0c;然后就发现偶尔AS加载Flutter项目会无法使用智能提示&#xff0c;也没有代码高亮等 问题出现的原因&…

力扣面试150 三角形最小路径和 DFS 记忆化搜索 DP 滚动数组优化DP

Problem: 120. 三角形最小路径和 &#x1f469;‍&#x1f3eb; 甜姐题解 Code class Solution {// 朴素DP// public int minimumTotal(List<List<Integer>> triangle) {// int n triangle.size();// int[][] dp new int[n1][n1];// for(int i n-1; i > 0…

公积金基数两万,养了征信三个月之后,结果怎么样了?

近期&#xff0c;有幸与一位颇具代表性的信贷经历者&#xff0c;进行了深入的交流。她的故事&#xff0c;尤其是对那些在信贷领域迷茫徘徊的朋友来说&#xff0c;无疑是一盏警示灯&#xff0c;提醒我们如何在金融海洋中稳健航行。 黄女士的信贷迷航 黄女士&#xff0c;一位拥有…

SpringMvc 之处理器方法参数解析器(HandlerMethodArgumentResolver)

概述 HandlerMethodArgumentResolver 是 Spring MVC 框架中的一个关键组件&#xff0c;用于解析控制器&#xff08;Controller&#xff09;方法的参数。在 Spring MVC 中&#xff0c;当一个请求到达时&#xff0c;DispatcherServlet 会负责找到对应的处理器&#xff08;即控制器…

9月9日星期一今日早报简报微语报早读

9月9日星期一&#xff0c;农历八月初七&#xff0c;早报微语早读。 1、庆祝第40个教师节&#xff0c;全国585个单位、1790人受表彰&#xff1b; 2、中国残奥军团94金76银50铜收官&#xff1a;连续6届残奥会金牌和奖牌榜第一&#xff1b; 3、三部门&#xff1a;拟允许在京津沪…

1688电商运营到底怎么做竞品分析(超细节)

你得学会看同行数据&#xff0c;因为同行是蕞好的老师。你把同行分析透&#xff0c;把市场分析透以后&#xff0c;你才能真正的做好这个类目。我们就来详细的讲一下具体该怎么去分析同行&#xff0c;以及要看竞品的哪些数据。 一、分析市场 就是先看一下你的这个产品&#xf…

【go-zero】api与rpc使用k8s服务发现和部署

【go-zero】api与rpc使用k8s服务发现和部署 k8s安装 参考 debian12极简快速安装k8s 1、代码准备 参考上一篇【go-zero】api与rpc使用etcd服务发现 代码搬过来&#xff0c;因为要用到k8s环境换到linux了 &#xff0c;做一下修改 rpc 修改一下rpc的logic文件&#xff0c;增…

运放双电源供电和单电源供电的区别

运放是一种常见的电路元器件&#xff0c;广泛应用于模拟电路中。它可以使用不同的电源电压进行供电&#xff0c;其中最常见的是双电源供电和单电源供电。 下面将详细介绍它们之间的区别。 1.双电源供电 双电源供电意味着运放有两个电源引脚&#xff1a;正极和负极。正极一般连…