一：搭建一套免费的serverless网站

缺乏、安全感 2022-12-21 13:54 247阅读 0赞

因为公司需求，需要快速搭建一个公司内部能够访问的资源查看管理的 PC网站，因为没有服务器，没有后端开发，又要快速上线使用，那么 serverless 就成了我的首选方案，下面从零开始搭建。

### 步骤一. 准备工作 ###

**1. 开通云开发环境：**

登录腾讯云，开通云开发，获取一个月免费使用，后续选择按量付费，因为公司内部使用的人数不会很多，所以选择按量付费，基本不用花钱。一个月免费的试用期限也非常方便试试水，

*  注册腾讯云账号，并完成实名认证
 *  进入[云开发控制台][Link 1]，授权开通云开发
 *  点击进入控制台[创建按量计费环境][Link 2]（温馨提示，无资源消耗时，按量计费不产生任何费用）

**2.下载安装云开发命令行工具**

**第 1 步：确保安装了 Node.js 和 npm**  
如果本机没有安装 Node.js , 建议从[ **Node.js 官网**][Node.js]下载二进制文件直接安装，建议选择版本为 LTS。

**第 2 步：安装 cloudbase/cli**  
现在，可以使用 npm 来安装 cloudbase/cli 了，通过 win +r 打开搜索工具，输入 cmd 打开命令行终端，输入如下命令：

cli 1.0.3 的版本一键部署的命令会有跨域的报错，修复时间未知，建议代码 build 打包构建好之后手动上传文件夹进行部署

npm i -g @cloudbase/cli

**第 3 步：测试安装是否成功**  
如果安装过程没有错误提示，一般就是安装成功了。下面，我们可以继续输入命令：

cloudbase -v

如果看到输出版本号，说明已经安装成功。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

**3. 登录云开发**

在命令行输入命令

cloudbase login

在打开的浏览器页面内完成登录腾讯云控制台进行授权

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1][]

在登录完成后，在云开发授权页面点击授权。

## ##

### 步骤二. 初始化应用示例 ###

在你想创建项目的目录的命令行执行，创建项目

tcb new vue-app vue

### 步骤三. 一键部署 ###

进入到项目目录，在命令行执行

tcb framework deploy

## 开发命令及配置 ##

所有命令不要用 cnpm ，就用 npm ，否则会报错。

### 本地开发 ###

安装依赖：

npm install

本地预览：

npm run dev

代码打包：

npm run build

### 上线部署 ###

npm run deploy

### Lint ###

npm run lint

### CloudBase Framework 相关开发配置 ###

查看 [CloudBase Framework 配置][CloudBase Framework].

### Vue 相关开发配置 ###

查看 [Configuration Reference][].

。。[云函数API文档地址][API]

。。[GitHub项目地址][GitHub]

[Link 1]: https://console.cloud.tencent.com/tcb?tdl_anchor=github&tdl_site=0
[Link 2]: https://console.cloud.tencent.com/tcb/env/index?action=CreateEnv&tdl_anchor=github&tdl_site=0
[Node.js]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: /images/20221120/c3972b12209c4bb187864f393a272362.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1]: /images/20221120/d115f5f05ae0465d81ec9c4ca3db3495.png
[CloudBase Framework]: https://github.com/TencentCloudBase/cloudbase-framework
[Configuration Reference]: https://cli.vuejs.org/config/
[API]: https://docs.cloudbase.net/api-reference/server/node-sdk/database/database.html
[GitHub]: https://github.com/TencentCloudBase/cloudbase-templates/tree/master/vue