{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2020-06-04-sf-express-component-translate","result":{"data":{"currentBlog":{"id":"a3ca49f4-36aa-582e-b85a-f280e69ef07f","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/202064/1591262740524-%E6%96%87%E6%9C%AC%E7%BF%BB%E8%AF%91.jpg","authors":["Tina"],"categories":["best-practice"],"date":"2020-06-04T00:00:00.000Z","title":"使用 Serverless Framework Express 组件快速创建文本翻译工具","description":"通过 Express Component 实现一款文本翻译工具","authorslink":null,"translators":null,"translatorslink":null,"tags":["Serverless","文本翻译"],"keywords":"Serverless,scf,Serverless Framework","outdated":null},"wordCount":{"words":187,"sentences":43,"paragraphs":43},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-06-04-sf-express-component-translate.md","fields":{"slug":"/best-practice/2020-06-04-sf-express-component-translate/","keywords":["serverless","spa","无服务器","云函数","serverless","Serverless","tencent","github","次数","errors"]},"html":"<p>通过 Serverless Framework 的 Express Component 实现了一款文本翻译工具。该工具基于腾讯云 TMT 机器翻译工具，支持多种语言的互相翻译。点击查看 <a href=\"https://service-q8qqunpf-1251971143.bj.apigw.tencentcs.com/release/\">Demo</a> 部署效果。</p>\n<p><img src=\"https://img.serverlesscloud.cn/202064/1591261309167-1590600134946-Screen-Recording-2020-05-28-at-1.13.28-AM.gif\"></p>\n<p>如何使用 Serverless Framework 的 Express Component 快速创建文本翻译工具呢？跟着下面的步骤一起来试试吧！</p>\n<h2 id=\"1-安装\"><a href=\"#1-%E5%AE%89%E8%A3%85\" aria-label=\"1 安装 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. 安装</h2>\n<p>通过 npm 安装最新版本的 Serverless Framework</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ npm install -g serverless</code></pre></div>\n<h2 id=\"2-创建\"><a href=\"#2-%E5%88%9B%E5%BB%BA\" aria-label=\"2 创建 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. 创建</h2>\n<p>创建并进入一个全新目录：</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ mkdir express-trans &amp;&amp; cd express-trans</code></pre></div>\n<p>通过如下命令和模板链接，快速创建该应用：</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ serverless create --template-url https://github.com/tinafangkunding/serverless-translate\n$ cd serverless-translate</code></pre></div>\n<p>进入 <code class=\"language-text\">src</code> 目录，执行如下命令，安装对应依赖</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">cd src &amp;&amp; npm install</code></pre></div>\n<h2 id=\"3-配置\"><a href=\"#3-%E9%85%8D%E7%BD%AE\" aria-label=\"3 配置 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3. 配置</h2>\n<p>修改模板中的 <code class=\"language-text\">.env.example</code> 为 <code class=\"language-text\">.env</code>，并在 API 密钥管理中获取并配置腾讯云的 <code class=\"language-text\">SecretId</code> 和 <code class=\"language-text\">SecretKey</code> 秘钥信息。</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"># .env\nTENCENT_SECRET_ID=123\nTENCENT_SECRET_KEY=123</code></pre></div>\n<p>您可以 登陆 <code class=\"language-text\">https://cloud.tencent.com/login</code> 或注册 <code class=\"language-text\">https://cloud.tencent.com/register</code> 腾讯云账号。</p>\n<h2 id=\"4-部署\"><a href=\"#4-%E9%83%A8%E7%BD%B2\" aria-label=\"4 部署 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4. 部署</h2>\n<p>在 <code class=\"language-text\">serverless.yml</code> 文件下的目录中运行如下命令部署应用</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ serverless deploy</code></pre></div>\n<p>部署完毕后，你可以在命令行的输出中查看到该应用的 URL 地址，访问地址即可查看部署结果。支持的翻译语言类型参考 <a href=\"https://cloud.tencent.com/document/api/551/15619\">接口文档</a>。</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">Please scan QR code login from wechat. \nWait login...\nLogin successful for TencentCloud. \n\nserverless ⚡ framework\nAction: &quot;deploy&quot; - Stage: &quot;dev&quot; - App: &quot;appDemo&quot; - Instance: &quot;TranslateDemo&quot;\n\nregion: ap-beijing\napigw: \n  serviceId:   service-xxxxx\n  subDomain:   service-xxxxx-1250000000.bj.apigw.tencentcs.com\n  environment: release\n  url:         https://service-xxxxx-1250000000.bj.apigw.tencentcs.com/release/\nscf: \n  functionName: express_component_xxxx\n  runtime:      Nodejs10.15\n  namespace:    default\n\n10s › TranslateDemo › Success</code></pre></div>\n<blockquote>\n<p>例如：<a href=\"https://service-q8qqunpf-1251971143.bj.apigw.tencentcs.com/release/\">https://service-q8qqunpf-1251971143.bj.apigw.tencentcs.com/release/</a> 输入 <code class=\"language-text\">serverless</code> 并且将其翻译为 <code class=\"language-text\">zh</code> 简体中文，输入语言是自动监测的。\n翻译结果：无服务器</p>\n</blockquote>\n<h2 id=\"5-监控\"><a href=\"#5-%E7%9B%91%E6%8E%A7\" aria-label=\"5 监控 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5. 监控</h2>\n<p>在 Serverless Dashboard 中查看应用级别的监控信息。当前支持展示如下监控指标：</p>\n<ul>\n<li>函数触发次数/错误次数：function invocations &#x26; errors</li>\n<li>函数延迟：function latency</li>\n<li>API 请求次数/错误次数：api requests &#x26; errors</li>\n<li>API 请求延迟：api latency</li>\n<li>API 5xx 错误次数：api 5xx errors</li>\n<li>API 4xx 错误次数：api 4xx errors</li>\n<li>API 错误次数统计：api errors</li>\n<li>不同路径下 API 的请求方法、请求次数和平均延迟统计：api path requests</li>\n</ul>\n<h2 id=\"6-移除\"><a href=\"#6-%E7%A7%BB%E9%99%A4\" aria-label=\"6 移除 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>6. 移除</h2>\n<p>在 <code class=\"language-text\">serverless.yml</code> 文件所在的目录下，通过以下命令移除部署的 Express 服务。移除后该组件会对应删除云上部署时所创建的所有相关资源。</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ serverless remove</code></pre></div>\n<p><strong>架构说明</strong></p>\n<p>本示例将在腾讯云账户中使用到如下 Serverless 服务：</p>\n<ul>\n<li>API 网关 - API 网关将会接收外部请求并且转发到 SCF 云函数中。</li>\n<li>SCF 云函数 - 云函数用于承载 Express.js 应用。</li>\n<li>CAM 访问控制 - 该组件会创建默认 CAM 角色用于授权访问关联资源。</li>\n<li>COS 对象存储 - 为确保上传速度和质量，云函数压缩并上传代码时，会默认将代码包存储在特定命名的 COS 桶中。</li>\n<li>TMT 机器翻译 - 调用机器翻译的 SDK 实现翻译能力，提供免费额度。</li>\n</ul>\n<blockquote>\n<p>参考资料：</p>\n<ul>\n<li><a href=\"https://github.com/serverless-components/tencent-express/blob/v2/docs/configure.md\">Serverless Express Component 全量配置</a></li>\n<li><a href=\"https://github.com/serverless-components/tencent-express/blob/v2/docs/configure.md\">机器翻译接口文档</a></li>\n</ul>\n</blockquote>\n<p>本 demo 改自 <a href=\"https://github.com/yugasun/tencent-serverless-demo/tree/master/dict\">tencent-serverless-demo</a>，感谢原作者 yugasun 。</p>\n<hr>\n<div id='scf-deploy-iframe-or-md'></div>\n<hr>\n<blockquote>\n<p><strong>传送门：</strong></p>\n<ul>\n<li>GitHub: <a href=\"https://github.com/serverless/serverless/blob/master/README_CN.md\">github.com/serverless</a></li>\n<li>官网：<a href=\"https://serverless.com/\">serverless.com</a></li>\n</ul>\n</blockquote>\n<p>欢迎访问：<a href=\"https://serverlesscloud.cn/\">Serverless 中文网</a>，您可以在 <a href=\"https://serverlesscloud.cn/best-practice\">最佳实践</a> 里体验更多关于 Serverless 应用的开发！</p>","tableOfContents":"<ul>\n<li><a href=\"/best-practice/2020-06-04-sf-express-component-translate/#1-%E5%AE%89%E8%A3%85\">1. 安装</a></li>\n<li><a href=\"/best-practice/2020-06-04-sf-express-component-translate/#2-%E5%88%9B%E5%BB%BA\">2. 创建</a></li>\n<li><a href=\"/best-practice/2020-06-04-sf-express-component-translate/#3-%E9%85%8D%E7%BD%AE\">3. 配置</a></li>\n<li><a href=\"/best-practice/2020-06-04-sf-express-component-translate/#4-%E9%83%A8%E7%BD%B2\">4. 部署</a></li>\n<li><a href=\"/best-practice/2020-06-04-sf-express-component-translate/#5-%E7%9B%91%E6%8E%A7\">5. 监控</a></li>\n<li><a href=\"/best-practice/2020-06-04-sf-express-component-translate/#6-%E7%A7%BB%E9%99%A4\">6. 移除</a></li>\n</ul>"},"previousBlog":{"id":"016de612-6f8f-5a7b-8b8a-bce228dca8cd","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/202069/1591692109083-%E6%A0%BC%E6%9E%97.png","authors":["陈新宇"],"categories":["best-practice"],"date":"2020-06-09T00:00:00.000Z","title":"Serverless 技术在格灵深瞳的落地实践","description":"使用腾讯云 Serverless 技术加速了格灵深瞳产品迭代，在验证原型方面效率和服务稳定性上提升了不少","authorslink":null,"translators":null,"translatorslink":null,"tags":["云函数","客户案例"],"keywords":"Serverless,scf,Serverless Framework","outdated":null},"wordCount":{"words":167,"sentences":22,"paragraphs":22},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-06-09-serverless-interview.md","fields":{"slug":"/best-practice/2020-06-09-serverless-interview/","keywords":["serverless","云函数","云原生","Serverless","方案","技术","serverless","服务","场景","运维","需求"]}},"nextBlog":{"id":"a8cfef63-eb3c-52e1-b744-9fa185998898","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/202063/1591174404685-%E4%BA%91%E5%87%BD%E6%95%B0%E6%97%A5%E5%BF%97%E6%A3%80%E7%B4%A2.jpg","authors":["李婷"],"categories":["best-practice"],"date":"2020-06-03T00:00:00.000Z","title":"腾讯云云函数 SCF 日志检索最佳实践","description":"借助云函数监控日志快速发现并定位问题","authorslink":null,"translators":null,"translatorslink":null,"tags":["云函数","日志检索"],"keywords":"Serverless,scf,Serverless Framework","outdated":null},"wordCount":{"words":129,"sentences":36,"paragraphs":36},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-06-03-scf-log-retrieval.md","fields":{"slug":"/best-practice/2020-06-03-scf-log-retrieval/","keywords":["python","serverless","云函数","日志","检索","关键词","serverlesscloud","函数","请求","RequestId"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"a3ca49f4-36aa-582e-b85a-f280e69ef07f","previousBlogId":"016de612-6f8f-5a7b-8b8a-bce228dca8cd","nextBlogId":"a8cfef63-eb3c-52e1-b744-9fa185998898"}}}