微信云托管部署springboot和vue保姆级教程

2024-11-27 来源：个人技术集锦

1、微信云托管介绍

是微信团队提供的以云原生为基础的，免运维、高可用服务上云解决方案，无需服务器，1分钟即可部署小程序/公众号服务端。

微信云托管支持目前绝大多数语言/框架项目，开发者可以从服务器平滑迁移；并且微信云托管的自动运维和扩缩容特性，无需开发者关心服务的可用性，专注于业务，极大节省人力和服务资源成本。

同时，微信云托管还集成持续交付部署，DevOps自动化，安全鉴权等众多能力，致力于帮助没有深层运维经验的业务开发者和研发团队，用最低的成本，打造出稳定性高，安全性强的后端服务。

在微信云托管的助力下，项目服务可以达到和专业运维团队支撑一样的效果，同时又极大的节省人力和服务成本。

最重要的，微信云托管与微信生态深度融合，具有免鉴权，云调用，消息推送，微信支付等众多微信优势特性，开发者可以非常轻松和高效的完成互通，并且在安全、可靠性方面有微信团队的专业保障

2、springboot部署

（1）微信云托管创建示例

我这里使用的是gitee仓库直接授权拉去，也可以使用上传代码压缩包，这里的端口需要和你springboot配置文件的端口保持一致，高级设置不用改。

（2）项目根目录创建Dokerfile

我这里用的是war打包，pom文件配置

    <packaging>war</packaging>
    <artifactId>项目名称</artifactId>
    <version>版号</version>

FROM maven:3.8.1-jdk-8-slim as builder

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

# Build a release artifact.
RUN mvn -s settings.xml -f pom.xml package -DskipTests

# Run the web service on container startup.
CMD ["java","-jar","/app/target/项目名称-版号.war","--spring.profiles.active=prod"]

<?xml version="1.0" encoding="UTF-8"?>

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
   
    <pluginGroups>
    </pluginGroups>
    <proxies>
    </proxies>
    <servers>
    </servers>
    <mirrors>
        <mirror>
            <id>tencent</id>
            <name>tencent maven mirror</name>
            <url>https://mirrors.tencent.com/nexus/repository/maven-public/</url>
            <mirrorOf>*</mirrorOf>
        </mirror>
    </mirrors>
    <profiles>
    </profiles>
</settings>

（3）发布

然后提交代码发布就行了，可看到日志，有报错解决报错

3、vue项目部署

（1）项目根目录创建Dokerfile

Dokerfile如下，我这里用的是node 16.20.2版本，这里有个小坑点，如果你的前后端使用的是

cookie的身份认证方式，你需要手动覆盖nginx文件配置，开启cookie的支持。配置放在下面了。

# 使用官方的 Node 镜像作为基础镜像
FROM node:16.20.2 AS builder

# 设置工作目录
WORKDIR /app

# 将项目文件复制到工作目录
COPY . .
# 安装 npm 并安装项目依赖
RUN npm install 

# 构建前端应用
RUN npm run build

# # 使用 Nginx 镜像作为基础镜像
FROM nginx:latest
# 覆盖配置文件
COPY nginx.conf /etc/nginx/nginx.conf

# # 将构建后的静态文件复制到 Nginx 的默认 HTML 目录
COPY --from=builder /app/dist /usr/share/nginx/html


# 容器启动时启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

server {
    listen 80;
    server_name localhost;

    location / {
        # 开启对 Cookie 的支持
        proxy_cookie_path / "/; HTTPOnly; Secure";

        root /usr/share/nginx/html;
        index index.html index.htm;
    }
}

（2）发布