Serverless Component 的全栈解决方案 - 多端部署进阶

2023-11-23 04:03:11

前言

在上一篇文章基于 Serverless Component 的全栈解决方案中，我们介绍了如何借助 Serverless Component 快速搭建 Restful API 后端服务和 Vue.js + Parcel 的前端开发架构。在本篇文章中，我们将继续探讨基于 Serverless Component 的全栈解决方案，重点介绍如何进行多端部署，包括腾讯云 COS 静态网站托管和 CDN 加速，以及如何解决跨域问题，帮助您构建更加完善的全栈应用。

部署后端服务

在上一篇文章中，我们已经将后端服务部署到了腾讯云 Serverless 云函数上。在本篇文章中，我们将继续使用腾讯云 Serverless 云函数来部署后端服务，具体步骤如下：

打开腾讯云 Serverless 云函数控制台，点击“创建函数”。
选择“从模板创建”，搜索“Serverless Component”，选择“Serverless Component 快速搭建 Restful API 后端服务”模板。
填写函数名称、地域、内存大小等信息，然后点击“创建”。
等待函数创建成功后，点击“部署”，选择“触发器”，选择“HTTP”，然后点击“部署”。

部署前端应用

在本篇文章中，我们将使用腾讯云 COS 静态网站托管来部署前端应用，具体步骤如下：

打开腾讯云 COS 控制台，点击“创建存储桶”。
填写存储桶名称、地域等信息，然后点击“创建”。
等待存储桶创建成功后，点击“静态网站托管”，选择“启用”，然后填写“首页文档”和“错误文档”，然后点击“保存”。
将前端应用文件上传到存储桶中。
访问存储桶的域名，即可访问前端应用。

解决跨域问题

当后端服务和前端应用部署在不同的域名下时，就会出现跨域问题。要解决跨域问题，可以借助 CORS 来实现。

在腾讯云 Serverless 云函数中，可以通过在函数代码中添加 CORS 相关代码来实现跨域。具体步骤如下：

在函数代码中，引入 cors 库。
在函数的入口函数中，添加 CORS 相关代码。

package main

import (
	"github.com/tencentyun/scf-go-sdk/pkg/apigateway"
	"github.com/tencentyun/scf-go-sdk/pkg/apigateway/requests"
	"net/http"
)

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		// 设置 CORS 相关头部
		w.Header().Set("Access-Control-Allow-Origin", "*")
		w.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization")
		w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")

		// 处理请求
		// ...
	})
}