文档中心>云函数>实践教程>Serverless Cloud Framework>部署 Vue + Express + PostgreSQL 全栈网站

部署 Vue + Express + PostgreSQL 全栈网站

最近更新时间:2024-03-07 18:32:21

我的收藏

操作场景

该模板可以快速部署一个基于 Vue + Express + PostgreSQL 的全栈 Serverless 应用。主要包含以下组件:
Serverless RESTful API:通过云函数API 网关构建的 Express 框架实现 RESTful API。
Serverless 静态网站:前端通过托管 Vue.js 静态页面到 COS 对象存储中。
PostgreSQL Serverless:通过创建 PostgreSQL DB 为全栈网站提供数据库服务。
VPC:通过创建 VPC子网,提供 SCF 云函数和数据库的网络打通和使用。

前提条件

已安装 Node.js2020年9月1日起,Serverless 组件不再支持 Node.js10.0 以下版本,请注意升级
账号已经配置 QcloudPostgreSQLFullAccess 策略,配置方法请参见 账号和权限配置

操作步骤

安装

通过 npm 全局安装 Serverless Cloud Framework,详情请参见 安装 Serverless Cloud Framework

配置

1. 新建一个本地文件夹,使用 scf init 命令,下载相关 template。
scf init fullstack
2. 在项目根目录下新建 .env 文件,并在其中配置对应的腾讯云 SecretId、SecretKey、地域和可用区信息。
# .env
TENCENT_SECRET_ID=xxx // 您账号的 SecretId
TENCENT_SECRET_KEY=xxx // 您账号的 SecretKey

# 地域可用区配置
REGION=ap-guangzhou //资源部署区,该项目中指云函数与静态页面部署区
ZONE=ap-guangzhou-2 //资源部署可用区 ,该项目中指 DB 部署所在的可用区
说明:
如果没有腾讯云账号,请先 注册新账号
如果已有腾讯云账号,请保证您的账号已经授权了 AdministratorAccess 权限。您可以在 API 密钥管理 中获取 SecretId 和 SecretKey。
ZONE 目前只支持 ap-beijing-3 、ap-guangzhou-2、ap-shanghai-2。
3. 在 fullstack 目录下执行以下命令,安装所需依赖:
npm run bootstrap

部署

1. 执行 scf deploy --all 命令进行部署。返回信息如下所示:
$ scf deploy --all

serverless-cloud-framework

serverlessVpc:
region: ap-guangzhou
zone: ap-guangzhou-2
vpcId: vpc-xxx
vpcName: serverless
subnetId: subnet-xxx
subnetName: serverless

fullstackDB:
region: ap-guangzhou
zone: ap-guangzhou-2
vpcConfig:
subnetId: subnet-100000
vpcId: vpc-1000000
dBInstanceName: fullstackDB
dBInstanceId: postgres-100000
private:
connectionString: postgresql://tencentdb_100000xxxxxxxxxxxxx@172.16.250.15:5432/tencentdb_1000000
host: 172.16.250.15
port: 5432
user: tencentdb_100000
password: xxxxxxxx
dbname: tencentdb_100000

fullstack-api:
region: ap-guangzhou
apigw:
serviceId: service-100000
subDomain: service-100000-123456789.gz.apigw.tencentcs.com
environment: release
url: https://service-100000-123456789.gz.apigw.tencentcs.com/release/
scf:
functionName: fullstack-api
runtime: Nodejs10.15
namespace: default

fullstack-frontend:
website: https://fullstack-serverless-db-123456789.cos-website.ap-guangzhou.myqcloud.com

50s › tencent-fullstack › Success

部署成功后,您可以使用浏览器访问项目产生的 website 链接,即可看到生成的网站。
说明:
本项目云函数因 VPC,导致无法直接访问外网,如需访问外网请参见 云函数网络配置
2. 执行 scf remove --all命令,可移除项目。返回信息如下所示:
注意:
在 serverless.yml 文件所在的目录下,通过以下命令移除部署的静态网站 Website 服务。移除该应用时,只删除云函数相关的配置、代码。关联的其他云资源(如 COS、CLS 等),平台均不会关联删除,您可以前往对应产品控制台删除,避免不必要的计费。
$ scf remove --all

serverless-cloud-framework

38s › tencent-fullstack › Success