serverless-components · zongUMR · Jul 3, 2020 · Jul 9, 2020 · Jul 13, 2020 · Jul 13, 2020
diff --git a/docs/configure.md b/docs/configure.md
@@ -5,7 +5,7 @@
 ```yml
 # serverless.yml
 
-component: tencent-website
+component: website
 name: websitedemo
 org: test
 app: websiteApp

diff --git a/package.json b/package.json
@@ -1,17 +1,18 @@
 {
   "name": "@serverless/website",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "./src/serverless.js",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "test": "npm run lint && npm run prettier",
+    "int-test": "jest ./tests/integration.test.js --testEnvironment node",
+    "test": "npm run lint && npm run prettier && npm run int-test",
     "commitlint": "commitlint -f HEAD@{15}",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "lint:fix": "eslint --fix --ext .js,.ts,.tsx .",
-    "prettier": "prettier --check **/*.{css,html,js,json,md,yaml,yml}",
-    "prettier:fix": "prettier --write **/*.{css,html,js,json,md,yaml,yml}",
+    "prettier": "prettier --check '**/*.{css,html,js,json,md,yaml,yml}'",
+    "prettier:fix": "prettier --write '**/*.{css,html,js,json,md,yaml,yml}'",
     "release": "semantic-release",
     "release-local": "node -r dotenv/config node_modules/semantic-release/bin/semantic-release --no-ci --dry-run",
     "check-dependencies": "npx npm-check --skip-unused --update"
@@ -44,13 +45,15 @@
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/npm": "^7.0.4",
     "@semantic-release/release-notes-generator": "^9.0.1",
+    "@serverless/platform-client-china": "^1.0.19",
     "babel-eslint": "^10.1.0",
     "dotenv": "^8.2.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-prettier": "^3.1.2",
     "husky": "^4.2.3",
+    "jest": "^25.0.1",
     "lint-staged": "^10.0.8",
     "prettier": "^1.19.1",
     "semantic-release": "^17.0.4"

diff --git a/serverless.component.yml b/serverless.component.yml
@@ -1,10 +1,11 @@
 name: website
-version: 0.0.8
+version: 0.0.9
 author: Tencent Cloud, Inc.
 org: Tencent Cloud, Inc.
 description: Deploys Tencent Website.
 keywords: tencent, serverless, website
-repo: https://github.com/serverless-components/tencent-website/tree/v2
-readme: https://github.com/serverless-components/tencent-website/tree/v2/README.md
+repo: https://github.com/serverless-components/tencent-website
+readme: https://github.com/serverless-components/tencent-website/tree/master/README.md
 license: MIT
 main: ./src
+webDeployable: true
diff --git a/src/config.js b/src/config.js
@@ -2,6 +2,8 @@ const CONFIGS = {
   templateUrl:
     'https://serverless-templates-1300862921.cos.ap-beijing.myqcloud.com/website-demo.zip',
   region: 'ap-guangzhou',
+  compName: 'website',
+  compFullname: 'Website',
   indexPage: 'index.html',
   errorPage: 'error.html',
   protocol: 'http',

diff --git a/src/package.json b/src/package.json
@@ -1,12 +1,7 @@
 {
-  "name": "@serverless/website",
-  "main": "./serverless.js",
-  "publishConfig": {
-    "access": "public"
-  },
   "dependencies": {
     "download": "^8.0.0",
-    "tencent-component-toolkit": "^1.11.4",
+    "tencent-component-toolkit": "^1.12.10",
     "type": "^2.0.0"
   }
 }
diff --git a/src/serverless.js b/src/serverless.js
@@ -73,7 +73,7 @@ class ServerlessComponent extends Component {
   }
 
   async deploy(inputs) {
-    console.log(`Deploying Tencent Website ...`)
+    console.log(`Deploying Tencent ${CONFIGS.compFullname}`)
 
     const credentials = this.getCredentials()
 
@@ -85,26 +85,21 @@ class ServerlessComponent extends Component {
     const output = {
       region
     }
+    this.state = {
+      region,
+      website: websiteInputs
+    }
 
     if (websiteInputs.useDefault) {
       output.templateUrl = CONFIGS.templateUrl
     }
 
     inputs.srcOriginal = inputs.srcOriginal || {}
 
-    // 创建cos对象
     const cos = new Cos(credentials, region)
-
-    console.log(`Deploying Website ...`)
-
-    // 部署网站
     const websiteUrl = await cos.website(websiteInputs)
 
     output.website = this.getDefaultProtocol(websiteInputs.protocol) + '://' + websiteUrl
-    this.state = {
-      region,
-      website: websiteInputs
-    }
 
     const cosOriginAdd = `${websiteInputs.bucket}.cos-website.${websiteInputs.region}.myqcloud.com`
     if (inputs.hosts && inputs.hosts.length > 0) {
@@ -115,30 +110,29 @@ class ServerlessComponent extends Component {
         originPullProtocol: websiteInputs.protocol
       })
 
-      output.cdnDomains = deployCdnRes.cdnResult
       this.state.cdn = deployCdnRes.outputs
+      output.cdnDomains = deployCdnRes.cdnResult
     }
 
     await this.save()
-    console.log(`Deployed Tencent Website.`)
+    console.log(`Deployed Tencent ${CONFIGS.compFullname} success`)
 
     return output
   }
 
   // eslint-disable-next-line
   async remove(inputs = {}) {
-    console.log(`Removing Webiste ...`)
+    console.log(`Removing ${CONFIGS.compFullname}`)
 
     const credentials = this.getCredentials()
 
     // 默认值
     const { region } = this.state
-    const stateCdn = this.state.cdn
 
-    // 创建cos对象
     const cos = new Cos(credentials, region)
     await cos.remove(this.state.website)
 
+    const stateCdn = this.state.cdn
     if (stateCdn) {
       const cdn = new Cdn(credentials, region)
       for (let i = 0; i < stateCdn.length; i++) {
@@ -150,7 +144,7 @@ class ServerlessComponent extends Component {
     }
 
     this.state = {}
-    console.log(`Removed Website`)
+    console.log(`Removed ${CONFIGS.compFullname}`)
   }
 }
 

diff --git a/src/utils.js b/src/utils.js
@@ -53,6 +53,8 @@ const prepareInputs = async (instance, inputs) => {
   }
   console.log(`Files unzipped into ${sourceDirectory}...`)
 
+  const region = inputs.region || CONFIGS.region
+
   return {
     useDefault: !code.src,
     code: {
@@ -62,9 +64,9 @@ const prepareInputs = async (instance, inputs) => {
       envPath: path.join(sourceDirectory, envPath)
     },
     env: inputs.env,
-    bucket: `${inputs.bucketName}-${appId}`,
-    region: inputs.region || CONFIGS.region,
-    protocol: inputs.protocol || CONFIGS.protocolc,
+    bucket: `${inputs.bucketName || `sls-website-${region}-${generateId()}`}-${appId}`,
+    region: region,
+    protocol: inputs.protocol || CONFIGS.protocol,
     cors: inputs.cors
   }
 }

diff --git a/templates/react-starter/index.html b/templates/react-starter/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" type="text/css" href="./src/app.css" />
+    <link rel="shortcut icon" href="./src/images/favicon.ico" />
+    <title>Serverless Website</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./src/index.js"></script>
+  </body>
+</html>
diff --git a/templates/react-starter/package.json b/templates/react-starter/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "description": "",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^16.5.2",
+    "react-chartjs-2": "^2.7.6",
+    "react-dom": "^16.5.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/runtime": "^7.6.3",
+    "babel-preset-nano-react-app": "^0.1.0",
+    "cssnano": "^4.1.10",
+    "parcel-bundler": "^1.11.0",
+    "parcel-plugin-clean-dist": "0.0.6"
+  },
+  "babel": {
+    "presets": [
+      "nano-react-app"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-transform-react-jsx",
+        {
+          "pragmaFrag": "React.Fragment"
+        }
+      ]
+    ]
+  }
+}
diff --git a/templates/react-starter/readme.md b/templates/react-starter/readme.md
@@ -0,0 +1,72 @@
+# React starter
+
+## 操作场景
+
+该模板可以快速部署一个基于React的页面
+
+## 操作步骤
+
+### 安装
+
+通过 npm 全局安装 [serverless cli](https://github.com/serverless/serverless)：
+
+```bash
+$ npm install -g serverless
+```
+
+如果之前您已经安装过 Serverless Framework，可以通过下列命令升级到最新版：
+
+```bash
+$ npm update -g serverless
+```
+
+### 配置
+
+1. 新建一个本地文件夹，使用 `sls init` 命令，下载相关 template：
+
+```bash
+$ serverless init -t vue-starter
+```
+
+2. 在项目模板中新建 `.env`，并在其中配置对应的腾
+   讯云 SecretId 和 SecretKey 信息：
+
+```text
+# .env
+TENCENT_SECRET_ID=123
+TENCENT_SECRET_KEY=123
+```
+
+> 说明:
+>
+> 1. 如果没有腾讯云账号，请先[注册新账号](https://cloud.tencent.com/register)。
+> 2. 如果已有腾讯云账号，可以在
+>    [API 密钥管理](https://console.cloud.tencent.com/cam/capi)  中获
+>    取**SecretId**和**SecretKey**。
+
+### 部署
+
+配置完成后，进入含有 .env 文件的根目录下，通过以下命令进行部署，创建一个新的云开
+发环境，将后台代码部署到 SCF 云函数平台，并通过 website 组件部署静态网站：
+
+```bash
+$ sls deploy --all
+```
+
+> 注意:
+>
+> 1. 由于 sls 运行角色限制，需要用户登
+>    录[访问管理角色页面](https://console.cloud.tencent.com/cam/role)，手动为
+>    **SLS_QcsRole** 添加 **TCBFullAccess** 的策略，否则无法正常运行
+> 2. 目前 TCB 端仅支持每月最多创建销毁 4 次环境，请谨慎创建，若超过 4 次部署将会
+>    报错
+
+访问命令行输出的 website url，即可查看您的 Serverless 站点。
+
+### 移除
+
+可通过以下命令移除项目：
+
+```bash
+$ sls remove --all
+```
diff --git a/templates/react-starter/serverless.yml b/templates/react-starter/serverless.yml
@@ -0,0 +1,16 @@
+name: react-starter
+component: website
+org: "Tencent Cloud, Inc."
+description: Deploys a serverless React website on Tencent Cloud
+keywords: tencent cloud, serverless, website, frontend, vue
+repo: https://github.com/serverless-components/tencent-website/tree/v2/templates/react-starter
+readme: https://github.com/serverless-components/v2/blob/new-templates/templates/react-starter/README.md
+license: MIT
+
+src:
+  src: ./
+  exclude:
+    - .env
+    - '.git/**'
+    - '**/node_modules'
+    - '**/package-lock.json'
diff --git a/templates/react-starter/src/App.js b/templates/react-starter/src/App.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import imageHero from './images/hero.png';
+
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.state.loading = false;
+    this.state.votes = 0;
+    this.saveVote = this.saveVote.bind(this);
+  }
+
+  /**
+   * Component Did Mount
+   */
+
+  async componentDidMount() {}
+
+  /**
+   * Save Vote
+   */
+
+  async saveVote() {
+    this.setState({ votes: this.state.votes + 1 });
+  }
+
+  /**
+   * Render
+   */
+
+  render() {
+    return (
+      <div className="container">
+        <div className="hero">
+          <img src={imageHero} />
+        </div>
+
+        <div className="tagline">
+          a website built on serverless components via the serverless framework
+        </div>
+
+        <div className="buttonContainer">
+          <div
+            className={`button`}
+            onClick={() => {
+              this.saveVote();
+            }}
+          >
+            <div className={`buttonInner`}>
+              <div className={`buttonLeft`}>ß</div>
+              <div className="buttonRight">{this.state.votes}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}