关于前端:阿里云函数计算-VSCode-使用及部署-Docusaurus

• 代码：https://github.com/ikuokuo/st…

应用简介

产品页开明服务。应用流程，如下：

老手示例，如下：

创立函数

阿里云提供了如下几种形式创立函数：

• 应用控制台创立函数
• 应用 Funcraft 创立函数
• 应用 VSCode 插件创立函数

以下为应用 VSCode 插件创立函数。

前提筹备

装置软件

• Visual Studio Code
• Docker

装置插件

插件：Aliyun Serverless VSCode Extension

VSCode 插件市场搜寻 “aliyun”，装置：

左侧边栏，关上插件，绑定账户：

顺次输出 Account ID, AccessKey ID, AccessKey Secret, Account Alias。

绑定后，“REMOTE RESOURCES” 能够看到该账户的云端服务与函数列表。

本地创立

“LOCAL RESOURCES” 面板 “+” 创立函数：

输出内容：

service name: demo
function name: test
function runtime: nodejs12
function type: NORMAL (Event Trigger)

本地运行

函数名称上 “Local Run” 运行：

函数日志，输入在终端。

近程部署

“LOCAL RESOURCES” 面板 “Deploy” 部署函数：

“REMOTE RESOURCES” 可查看部署的函数。

或者到阿里云函数计算控制台查看：

部署 Docusaurus

环境筹备

装置 Funcraft

Funcraft 是函数计算提供的一种命令行工具，通过该工具，您能够便捷地治理函数计算、API 网关、日志服务等资源。通过一个资源配置文件 template.yml，Funcraft 即可帮助您进行开发、构建、部署操作。

npm 装置：

npm install @alicloud/fun -g

fun 版本：

❯ fun --version
3.6.18

fun 配置：

❯ fun config
? Aliyun Account ID ***********
? Aliyun Access Key ID ***********AmpG
? Aliyun Access Key Secret ***********XZlY
? Default region name cn-shanghai
? The timeout in seconds for each SDK client invoking 60
? The maximum number of retries for each SDK client 3
? Allow to anonymously report usage statistics to improve the tool over time? Ye
s
? Use custom endpoint? No

创立利用

npx @docusaurus/init@next init my-site classic

运行：

cd my-site
yarn start

成果：

部署利用

❯ cd my-site

初始化：

❯ fun init
? Select a template to init http-trigger-nodejs12
? You've created /users/ikuokuo/start-serverless/my-site before. Is it okay to override it? Yes
Start rendering template...
+ /users/ikuokuo/start-serverless/my-site
+ /users/ikuokuo/start-serverless/my-site/.funignore
+ /users/ikuokuo/start-serverless/my-site/index.js
+ /users/ikuokuo/start-serverless/my-site/template.yml
finish rendering template.

删除 index.js。

rm index.js

批改 template.yml：

ROSTemplateFormatVersion: '2015-09-01'
Transform: 'Aliyun::Serverless-2018-04-03'
Resources:
  my-site:
    Type: 'Aliyun::Serverless::Service'
    Properties:
      Description: 'helloworld'
    my-site:
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: index.handler
        Runtime: custom
        CodeUri: './'
        MemorySize: 1024
        InstanceConcurrency: 5
        Timeout: 120
      Events:
        httpTrigger:
          Type: HTTP
          Properties:
            AuthType: ANONYMOUS
            Methods: ['GET', 'POST', 'PUT']
  Domain:
    Type: Aliyun::Serverless::CustomDomain
    Properties:
      DomainName: Auto
      Protocol: HTTP
      RouteConfig:
        Routes:
          "/*":
            ServiceName: my-site
            FunctionName: my-site

创立 bootstrap：

❯ cat <<EOF >bootstrap
#!/usr/bin/env bash
export PORT=9000
npm run serve -- --port \$PORT
# yarn serve --port \$PORT
EOF
❯ chmod a+x bootstrap

Something is already running on port: https://github.com/facebook/d…
Check npx docusaurus --version >= 2.0.0-alpha.66 !

编译：

yarn build

<!–
fun local start
–>

部署：

<!–
❯ fun deploy -y
current folder is not a fun project.
could not detect your project framework, please contact us on https://github.com/alibaba/fu…
–>

❯ fun deploy
using template: template.yml
using region: cn-shanghai
using accountId: ***********
using accessKeyId: ***********AmpG
using timeout: 60

Collecting your services information, in order to caculate devlopment changes...

Resources Changes(Beta version! Only FC resources changes will be displayed):

┌─────────────┬──────────────────────────────┬────────┬─────────────────────┐
│ Resource    │ ResourceType                 │ Action │ Property            │
├─────────────┼──────────────────────────────┼────────┼─────────────────────┤
│ my-site     │ Aliyun::Serverless::Service  │ Add    │ Description         │
├─────────────┼──────────────────────────────┼────────┼─────────────────────┤
│             │                              │        │ Handler             │
│             │                              │        ├─────────────────────┤
│             │                              │        │ Runtime             │
│             │                              │        ├─────────────────────┤
│             │                              │        │ CodeUri             │
│ my-site     │ Aliyun::Serverless::Function │ Add    ├─────────────────────┤
│             │                              │        │ MemorySize          │
│             │                              │        ├─────────────────────┤
│             │                              │        │ InstanceConcurrency │
│             │                              │        ├─────────────────────┤
│             │                              │        │ Timeout             │
├─────────────┼──────────────────────────────┼────────┼─────────────────────┤
│             │                              │        │ AuthType            │
│ httpTrigger │ HTTP                         │ Add    ├─────────────────────┤
│             │                              │        │ Methods             │
└─────────────┴──────────────────────────────┴────────┴─────────────────────┘

? Please confirm to continue. Yes
Waiting for service my-site to be deployed...
        Waiting for function my-site to be deployed...
                Waiting for packaging function my-site code...
                The function my-site has been packaged. A total of 29625 files were compressed and the final size was 37.05 MB
                Waiting for HTTP trigger httpTrigger to be deployed...
                triggerName: httpTrigger
                methods: ['GET', 'POST', 'PUT']
                trigger httpTrigger deploy success
        function my-site deploy success
service my-site deploy success

Detect 'DomainName:Auto' of custom domain 'Domain'
Request a new temporary domain ...
The assigned temporary domain is http://33146085-1117460590419785.test.functioncompute.com，expired at 2020-10-18 23:59:03, limited by 1000 per day.
Waiting for custom domain Domain to be deployed...
custom domain Domain deploy success

拜访 http://33146085-1117460590419…:

结语

欢送关注 GoCoding 公众号，分享日常 Coding 中实用的小技巧、小常识！