部署和上线项目踩坑

最新推荐文章于 2024-06-20 22:57:46 发布
最新推荐文章于 2024-06-20 22:57:46 发布
阅读量1k 收藏 4
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46110710/article/details/126161608
版权

多环境

本地开发：localhost

多环境：指同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上。

为什么需要？

  1. 每个环境互不影响
  2. 区分不同的阶段：开发 / 测试 / 生产(线上的配置高一点)
  3. 对项目进行优化：
    1. 本地日志级别
    2. 精简依赖，节省项目体积（lombok在编译项目时候就把get，set生成了，线上不需要这个插件）
    3. 项目的环境 / 参数可以调整，比如 JVM 参数

针对不同环境做不同的事情。

多环境分类：

  1. 本地环境（自己的电脑）localhost
  2. 开发环境（远程开发）大家连同一台机器，为了大家开发方便
  3. 测试环境（测试）开发 / 测试 / 产品，单元测试 / 性能测试 / 功能测试 / 系统集成测试，独立的数据库、独立的服务器
  4. 预发布环境（体验服）：和正式环境一致，正式数据库，更严谨，查出更多问题
  5. 正式环境（线上，公开对外访问的项目）：尽量不要改动，保证上线前的代码是 “完美” 运行
  6. 沙箱环境（实验环境）：为了做实验（测试单个功能）

前端多环境

前端请求的地址是localhost:8000

在请求一个网页资源的时候，首先把这些网站的文件，拿到自己的浏览器里，之后，如果说这个网页还需要依赖什么文件，我们都是从自己的电脑上发出的请求，所以这个localhost，其实请求的是我们自己的电脑。

请求地址

  • 开发环境：localhost:8000

  • 线上环境：http://usercenterp.jinxs.icu/

startFront(env) {
    if(env === 'prod') {
        // 不输出注释 
        // 项目优化
        // 修改请求地址
    } else {
        // 保持本地开发逻辑
    }
}

用了 umi 框架，build 时会自动传入 NODE_ENV == production 参数，start NODE_ENV 参数为 development

  • 启动方式

    • 开发环境：npm run start（本地启动，监听端口、自动更新）
    • 线上环境：npm run build（项目构建打包），可以使用 serve 工具启动（npm i -g serve）

  • 项目的配置

    不同的项目（框架）都有不同的配置文件，umi 的配置文件是 config，可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档：https://umijs.org/zh-CN/docs/deployment

    • 开发环境：config.dev.ts
    • 生产环境：config.prod.ts
    • 公共配置：config.ts 不带后缀
     npm i -g serve

    cd到dist目录执行serve

    输入此命令，发现执行成功

    npm list -g --depth 0

    把npm的本地仓库添加到环境变量

    然后进入到dist目录执行serve

    image-20220804161154213

    相当于在本地给你启动了一个外部服务器，可以在本地把咱们的这个网页文件放到这个服务器上，并且给你启动起来，让你能够访问。

    build+serve就可以在浏览器运行出现的alert是production

    访问3000端口

    image-20220730132820219

    静态化，其实就是做了一件什么事情?它是根据页面的路由，把每个路由都给你生成一个index.html，都给你生成一个静态文件

后端多环境实战

SpringBoot 项目，通过 application.yml 添加不同的后缀来区分配置文件

可以在启动项目时传入环境变量：

java -jar .\user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

主要是改：

  • 依赖的环境地址

    • 数据库地址

    • 缓存地址

    • 消息队列地址

    • 项目端口号

  • 服务器配置

package打包

cd target目录

运行jar包并且传入参数

java -jar .\user_center-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

image-20220731224657585

执行的是prod的配置文件

原始部署

前端

需要 web 服务器：nginx 、apache、tomcat

安装 nginx 服务器：

  1. 用系统自带的软件包管理器快速安装，比如 centos 的 yum

  2. 自己到官网安装（参考文章）

    curl -o nginx-1.21.6.tar.gz http://nginx.org/download/nginx-1.21.6.tar.gz

tar -zxvf nginx-1.21.6.tar.gz

cd nginx-1.21.6

   37  2022-04-17 23:30:09 yum install pcre pcre-devel -y
   39  2022-04-17 23:30:59 yum install openssl openssl-devel -y
   41  2022-04-17 23:31:57 ./configure --with-http_ssl_module --with-http_v2_module --with-stream
   42  2022-04-17 23:32:13 make
   43  2022-04-17 23:32:54 make install
   48  2022-04-17 23:33:40 ls /usr/local/nginx/sbin/nginx
   vim /etc/profile
  在最后一行添加：export PATH=$PATH:/usr/local/nginx/sbin	
  
  nginx
  
  netstat -ntlp 查看启动情况

    注意 nginx 权限

    后端

    java、maven

    安装：

    yum install -y java-1.8.0-openjdk*

curl -o apache-maven-3.8.5-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.8.5/binaries/apache-maven-3.8.5-bin.tar.gz

    解压

     tar -zxvf apache-maven-3.8.5-bin.tar.gz

    报错

image-20220801104824864

原来的这个网页打不开了

https://dlcdn.apache.org/maven/maven-3/3.8.5/binaries/apache-maven-3.8.5-bin.tar.gz

换成这个网页

curl -o apache-maven-3.0.5-bin.tar.gz https://dlcdn.apache.org/maven/binaries/apache-maven-3.0.5-bin.tar.gz

又报错了

image-20220801105540980

curl -o apache-maven-3.0.5-bin.tar.gz https://dlcdn.apache.org/maven/binaries/apache-maven-3.0.5-bin.tar.gz

重试一遍

成功，然后解压

 tar -zxvf apache-maven-3.0.5-bin.tar.gz

image-20220801110043262

配置环境变量

pwd查看当前路径

编辑etc下的profile文件，shift+g跳到最后一行，按o加一行

image-20220801230646942

刷新一下

 source /etc/profile

到/root目录输入mvn -v

配置成功

image-20220801230831844

安装git

yum install git

打包构建，跳过测试

mvn package -DskipTests

执行

java -jar user_center-0.0.1-SNAPSHOT.jar --spring.profiles,active=prod

//执行后如果显示没有权限;给这个文件添加可执行权限
chmod a+x user_center-0.0.1-SNAPSHOT.jar
//再ls就会发现user_center-0.0.1-SNAPSHOT.jar变成绿色了

当然这么用的话，这个窗口就不能做任何事了,被这个命令占满了,按ctrl+c中断它
让它在后台运行

[root@VM-8-2-centos user_center_backend]# nohup java -jar user_center-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
[1] 29378

输入jbs，发现正在运行

image-20220802103015839

输入netstat -ntlp

image-20220802103111432

jps查看运行的java程序

image-20220802103142234

宝塔 Linux 部署

Linux 运维面板

官方安装教程：https://www.bt.cn/new/download.html

方便管理服务器、方便安装软件

前端托管

前端腾讯云 web 应用托管（比容器化更傻瓜式，不需要自己写构建应用的命令，就能启动前端项目）

https://console.cloud.tencent.com/webify/new

  • 小缺点：需要将代码放到代码托管平台上
  • 优势：不用写命令、代码更新时自动构建

Docker 部署

docker 是容器，可以将项目的环境（比如 java、nginx）和项目的代码一起打包成镜像，所有同学都能下载镜像，更容易分发和移植。

再启动项目时，不需要敲一大堆命令，而是直接下载镜像、启动镜像就可以了。

docker 可以理解为软件安装包。

Docker 安装：https://www.docker.com/get-started/ 或者宝塔安装

Dockerfile 用于指定构建 Docker 镜像的方法

特别好用的一个镜像maven:3.5-jdk-8-alpine

FROM maven:3.5-jdk-8-alpine as builder

# Copy local code to the container image.
WORKDIR /app
COPY pom.xml .
COPY src ./src

# Build a release artifact.
RUN mvn package -DskipTests

# Run the web service on container startup.
CMD ["java","-jar","/app/target/user_center-0.0.1-SNAPSHOT.jar","--spring.profiles.active=prod"]

Dockerfile 一般情况下不需要完全从 0 自己写，建议去 github、gitee 等托管平台参考同类项目（比如 springboot）

Dockerfile 编写：

  • FROM 依赖的基础镜像
  • WORKDIR 工作目录
  • COPY 从本机复制文件
  • RUN 执行命令
  • CMD / ENTRYPOINT（附加额外参数）指定运行容器时默认执行的命令

根据 Dockerfile 构建镜像：

# 后端
docker build -t user-center-backend:v0.0.1 .
表示使用当前目录的dockerfile构建镜像

报错

image-20220802211451041

创建镜像的时候指定dockerFile文件

docker build -t user-center-front:v0.0.1 -f dockerfile .

DockerFile

FROM nginx

WORKDIR /usr/share/nginx/html/
USER root

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf

COPY ./dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

nginx,conf

server {
    listen 80;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;

    location / {
        try_files $uri /index.html;
    }
}

构建镜像（前端）

docker build -t user-center-front:v0.0.1 -f /docker/DockerFIle .

Docker 构建优化：减少尺寸、减少构建时间（比如多阶段构建，可以丢弃之前阶段不需要的内容）

docker run 启动：

# 前端
docker run -p 57:80 -v /www/wwwroot/user_center/dockervdirectory/front_center:/usr/share/nginx/html/ -d user-center-front:v0.0.1

# 后端
docker run -p 8080:8080 user-center-backend:v0.0.1

虚拟化

  1. 端口映射：把本机的资源（实际访问地址）和容器内部的资源（应用启动端口）进行关联
  2. 目录映射：把本机的端口和容器应用的端口进行关联

进入容器：

docker exec -it  fee2bbb7c9ee /bin/bash

发现是空的

image-20220803203052626

映射目录出问题了，先不映射了

docker run -p 57:80 -d user-center-front:v0.0.1
docker run -p 3456:8080 -d user-center-cen:v0.0.1

查看进程：

docker ps

查看日志：

docker logs -f [container-id]
//-f跟踪日志输出

杀死容器：

docker kill

强制删除镜像：

docker rmi -f

Docker 平台部署

  1. 云服务商的容器平台（腾讯云、阿里云）
  2. 面向某个领域的容器平台（前端 / 后端微信云托管）要花钱！

容器平台的好处：

  1. 不用输命令来操作，更方便省事
  2. 不用在控制台操作，更傻瓜式、更简单
  3. 大厂运维，比自己运维更省心
  4. 额外的能力，比如监控、告警、其他（存储、负载均衡、自动扩缩容、流水线）

绑定域名

前端项目访问流程：用户输入网址 => 域名解析服务器（把网址解析为 ip 地址 / 交给其他的域名解析服务） => 服务器 =>（防火墙）=> nginx 接收请求，找到对应的文件，返回文件给前端 => 前端加载文件到浏览器中（js、css） => 渲染页面

后端项目访问流程：用户输入网址 => 域名解析服务器 => 服务器 => nginx 接收请求 => 后端项目（比如 8080端口）

nginx 反向代理的作用：替服务器接收请求，转发请求

添加一个dns解析用于后端

image-20220804143546998

每次访问都加个端口不太合适呀

image-20220804143938097

如果不加端口访问的是80端口，nginx，那我们可以用nginx反向代理，当访问配置的域名时，访问需要的端口就可以解决了

nginx反向代理是非常常用的一个方法。可以帮我们统一的管理请求、接收请求，我们只需要去配置访问哪个域名、转发到哪个地址、转发到哪个项目，或者说访问哪个域名、访问哪个目录的文件

宝塔建个站点，配置反向代理

image-20220804144022053

再次访问域名，不加端口，成功

image-20220804144042368

登录前端，尝试下能否跑通，报错

image-20220804144253025

跨域问题

用nginx解决跨域问题，把之前宝塔配置的反向代理给删掉自己写（顺便）

# 跨域配置
location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;反向代理
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

跨域问题解决

浏览器为了用户的安全，仅允许向 同域名、同端口 的服务器发送请求。

如何解决跨域？

最直接的方式：把域名、端口改成相同的

添加跨域头

让服务器告诉浏览器：允许跨域（返回 cross-origin-allow 响应头）

1. 网关支持（Nginx）
# 跨域配置
location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;反向代理
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}
2. 修改后端服务

  1. 配置 @CrossOrigin 注解

  2. 添加 web 全局请求拦截器

    @Configuration
public class WebMvcConfg implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }
}

  3. 定义新的 corsFilter Bean，参考：https://www.jianshu.com/p/b02099a435bd

等待救赎的波
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jenkins+docker实现可持续自动化部署springboot项目
congge
04-06 1万+
jenkins+docker实现可持续自动化部署springboot项目
Next.js 网站部署踩坑经历小记及前端站点部署技巧
小陈的博客
06-06 2578
在入职两个月后，我开始了第一个完全由我一个人负责开发的网站项目。这个网站的用途是用于 宣传一个开源社区峰会 以及 沉淀峰会视频内容 ，在峰会进行期间还需要在网站进行 直播 。从网站的开发到部署上线，可谓是踩坑无数，最终实现的网站在这里 apisix-summit.org/由于时间有限，整体网站的架构是基于 vercel 的一个网站脚手架 virtual-event-starter-kit 之上进行开发，因此并不需要从头构建项目。 这个脚手架使用的是 next.js 实现服务端渲染，其中已经预设了很多第三方平
解决Vue CLI3 项目部署到非根目录下刷新空白问题
xys199719的博客
07-20 2156
一、场景 本地正常的vue项目打包成dist文件，部署到测试环境服务器上，页面空白，无报错也无请求； 部署到服务器上第一页有页面，刷新后页面空白或404； 引入css的type被拦截装换为“text/plain”； 二、原因： 打包到服务器后，资源找不到路径，后台没有正确配置，用户在浏览器直接访问直接空白或404 三、思路： 前端部署路径publicPath是否正确; 前端路由模式是否配置正确； 后端配置是否正确； 四、解决方案： 假设打包后的dist文件内容需要部署到非根目录http.x
项目本地运行、打包都没问题，发布线上跳转页面失败
weixin_42605902的博客
11-25 1022
controller中返回字符串路径大小写的问题 文件名是小写，路径中是大写M，在本地运行没有问题也不会报错，用maven install打包也没问题，发布到线上就找不到路径， 改为 return "selfmedia/index" 就好了。 ...
三、用户中心项目笔记----后端多环境实战+原始部署
最新发布
qq_56435346的博客
06-20 682
依赖的环境地址数据库地址缓存地址消息队列地址项目端口号服务器配置。
umi 安装和发布遇到的坑
小姐姐
03-01 812
1、创建umi项目 运行yarn create @umijs/umi-app ，创建失败，显示error Command failed. 解决方案： create-umi-app 创建umi项目 运行yarn create @umijs/umi-app ，创建失败，显示error Command failed._liudunyan1or0的博客-CSDN博客 2、 本地验证 发布之前，可以通过serve做本地验证， yarn global add serve serve ./d...
项目部署上线过程中遇到的问题及解决方式
qq_52771580的博客
03-04 388
打包时报错：Unknown lifecycle phase “.test.skip=true”。保错：Failed to start mysqld.service: Unit not found。2、安装mariadb和mariadb-server。不知道为什么环境变量失效了，执行以下指令使。环境变量立刻生效即可。
当umi.js(umi3)自动化部署遇到的问题
q140948940的博客
02-10 1726
公司新的项目采用了umi3+dva+antd（antdpro-compoent）的技术栈，在开发和配置的时候开箱即用还是很爽的，但在用Jenkins自动化部署的时候，却怎么打包都失败 Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 大致意思就是 堆限制分配附近的无效标记压缩失败 - JavaScript堆内存不足 经过百度发现在打包数量很多的时候node内存可能会不够用
vue本地打包没问题,服务器找不到路径
qq_38402659的博客
06-03 1253
本地开发文件不区分大小写,服务器严格区分大小写
.NET上传电子文件到服务器提示找不到路径
weixin_30466039的博客
04-03 330
　　今天用FileStream做了一个电子文件上传功能，之前一直在本地测试,上传没什么问题！但是一发布到服务器上测试，尼玛问题就来了Could not find a part of the path 'D:\工作目录\日常工作\测试\Manual1.pdf'。路径错误，分析发现是因为程序发布到服务器上，在本地上传就找不到路径了。 　　//创建文件流 FileStream ...
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
12-25
自己尝试在本地搭建了 Django 项目后，想部署到自己云服务器上，经常多次尝试和多次踩坑（捂脸），总结如下： 环境：ubuntu14, django2.0, apache2。 1.首先安装需要的库包，在 ubuntu 下执行如下指令，为了能顺利...
Linux部署django项目最全,linux部署django项目流程（全）
weixin_34338129的博客
05-12 3014
1.python3和python2共存配置流程在下面网址中2.安装依赖包yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gcc make -y3.导出django开发环境清单pip freeze > packet.txt4.在linux环境中...
魔改部署自己专属的合成大西瓜（三：上线篇＜踩坑篇＞）
一个超会写Bug的程序猿的博客
02-20 1370
魔改部署自己专属的合成大西瓜（一：运行篇） 魔改部署自己专属的合成大西瓜（二：魔改篇）
基于宝塔Docker自建Bitwarden密码管理服务
YINUXY'S BLOG
04-04 2691
宝塔安装Docker 进入到宝塔面板的软件商店，搜索docker安装即可。 获取镜像 打开docker管理器，点击获取镜像，输入Bitwarden_rs的官方镜像bitwardenrs/server后点击获取镜像。 创建容器 点击创建容器按钮 填写端口映射中的容器端口：80,服务端口：6666(6666可以自定义) 填写目录映射中的服务器目录：/www/wwwroot/bitwarden.l...
宝塔部署的项目页面无法显示_宝塔面板如何部署nuxt项目
weixin_39820185的博客
12-11 1116
1、先在本地执行npm run build 命令，然后将项目根目录下除了node_modules文件夹，其他都打包上传到服务器web服务下，注意.nuxt是隐藏文件夹。当然其实不build也可以，在服务上执行sudo npm install 后再执行 run build也一样。然后执行npm start 就可以看到项目已经运行在localhost:3000了，这个时候你输入你的域名或ip 的300...
项目已经部署到Linux中，且启动成功，但是却访问不到
热门推荐
CSDNxiaozhi的博客
05-03 1万+
背景 今天新增加了一台新服务器，暂时nginx啥的都未启用，所以就准备先把项目跑上去，通过ip+端口进行访问，能用即可，但部署成功之后，却一直访问不了，在浏览器访问之后，一直在转圈就是不显示，这里有个特点：首先不是一访问就出现找不到页面，其次是，感觉访问得到，但一直在解析，就是不显示页面； 一般出现以上情况，我们可以通过多种方式进行一一排除，排查出原因： 第一种：通过浏览器访问，但不显示，这是最直...
JAVA 解决 SpringBoot 本地读取文件成功，打包后读取文件失败的方法
weixin_30410119的博客
04-25 2331
SpringBoot 的日常开发中，我们会发现当我们使用InputStream input =getClass.getResource(path) 读取文件或者模板时，在 ida 中运行 测试的时候一点问题没有，但是打成 JAR 包部署到服务器上之后，文件的读取的结果将不存在，解压 jar 包发现文件时在里面的，这是怎么一会事呢？ 因为，在 idea 中启动时，项目在操作系统下是一个目录...
Spring Boot Profile(Java学习笔记）
m0_59803718的博客
04-11 260
Spring Boot的Profile相关知识
java项目部署和上线有什么区别
12-08
Java项目部署和上线的区别在于其目标和操作内容。 Java项目部署是指将开发好的Java项目从开发环境转移到生产环境中的过程。具体操作包括将项目的代码、配置文件、静态资源等部署到服务器上，并进行相应的配置，包括数据库连接、服务器端口等。部署的目标是将项目成功运行在服务器上，为后续的上线做准备。 Java项目的上线是指项目在服务器上正式对外提供服务的过程。具体操作包括在已经部署好的项目基础上，启动服务器，确保项目运行正常，并处理一些与上线相关的工作，如域名解析、数据库迁移、缓存预加载等。上线的目标是项目能够稳定运行，满足高并发访问需求，并提供给用户使用。 总的来说，Java项目部署和上线的区别在于部署注重的是将项目转移到生产环境，配置相关的环境和资源，而上线注重的是项目在服务器上的运行和提供服务的过程。两者关系紧密，部署是上线的前提和准备工作，上线则是对部署后项目的验证和实际应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值