{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2021-01-18-scf-web-ide","result":{"data":{"currentBlog":{"id":"5a0d8924-f9d0-509b-89e8-d6774ef61461","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/9bf5d90a2ac1a5483256795d6db370c6.jpg","authors":["Dora"],"categories":["best-practice"],"date":"2021-01-18T00:00:00.000Z","title":"全云端开发体验！腾讯云发布 Serverless 云函数 Web IDE","description":"随时随地编写代码，拥有和本地 IDE 一样的流畅编辑体验！","authorslink":null,"translators":null,"translatorslink":null,"tags":["Serverless","WebIDE"],"keywords":null,"outdated":null},"wordCount":{"words":265,"sentences":43,"paragraphs":43},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2021-01-18-scf-web-ide.md","fields":{"slug":"/best-practice/2021-01-18-scf-web-ide/","keywords":["serverless","云函数","函数","Serverless","部署","测试","在线","Web","模版"]},"html":"<p>Serverless 云函数 SCF 在线编辑器没有终端？本地开发常用工具不能安装和使用？无法查看大文件？ Serverless Web IDE 的发布将为您解决以上所有问题。</p>\n<p>Serverless Web IDE 是腾讯云 Serverless 和 CODING 深度合作推出的在线 IDE，基于 CODING 团队自主研发的在线集成开发环境 Cloud Studio，能够帮助开发者随时随地打开浏览器即可编写代码、拥有和本地 IDE 一样的流畅编辑体验，且无需繁杂的配置工作。</p>\n<p>登录云函数 SCF 控制台查看函数代码立即体验：<a href=\"https://console.cloud.tencent.com/scf/list?rid=5&#x26;ns=default\">https://console.cloud.tencent.com/scf/list?rid=5&#x26;ns=default</a></p>\n<h2 id=\"功能优势\"><a href=\"#%E5%8A%9F%E8%83%BD%E4%BC%98%E5%8A%BF\" aria-label=\"功能优势 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>功能优势</h2>\n<ul>\n<li><strong>IDE 中闭环函数操作</strong>：在 Serverless Web IDE 中，您可以完成函数从开发、部署到测试的全流程操作，获得在线开发的沉浸式体验；</li>\n<li><strong>终端能力</strong>：Serverless Web IDE 提供了和本地开发体验一致的终端能力，并且预置了常用的 pip，npm，Git 等开发工具和 SCF 已经支持的编程语言开发环境；</li>\n<li><strong>扩展能力</strong>：预置了常用的 VS Code 扩展，如 Python、ESLint、Prettier 等，在线开发也可获得智能提示、代码自动补全等能力；</li>\n<li><strong>有状态</strong>：Serverless Web IDE 为每个用户提供一个工作空间，工作空间相互隔离，在工作空间中进行的操作为您保留。如果在编辑过程中误操作退出了编辑器也无需担心，下次使用 IDE 可以继续进行上次未完成的工作；如果在 IDE 中进行了自定义配置，在不同时间、不同函数的在线开发中也同样可以获得一致的 IDE 使用体验</li>\n</ul>\n<p><img src=\"https://main.qcloudimg.com/raw/0f4cbb6f9787189731e883faeb2bd2d6.jpg\"></p>\n<blockquote>\n<p><strong>注意：</strong></p>\n<ul>\n<li>我们会为您保留 Serverless Web IDE 中的个性化配置以及代码状态，为了确保函数修改生效，请及时将修改部署到云端。</li>\n<li>建议使用最新版本的 Google Chrome 浏览器以获得最佳的 IDE 使用体验。</li>\n</ul>\n</blockquote>\n<h2 id=\"快速体验\"><a href=\"#%E5%BF%AB%E9%80%9F%E4%BD%93%E9%AA%8C\" aria-label=\"快速体验 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>快速体验</h2>\n<p>在 Serverless Web IDE 中修改、部署和测试一个函数的使用流程如下：</p>\n<p><strong>在线开发</strong></p>\n<p>登录云函数 SCF 控制台，新建一个函数或打开一个已有函数，本文以一个名为 Serverless-Web-IDE 的函数为例：</p>\n<p><img src=\"https://main.qcloudimg.com/raw/ad6396370ae22a9b5bdc79f56b197769.png\"></p>\n<p>在【函数代码】页签即可体验 Serverless Web IDE</p>\n<p><img src=\"https://main.qcloudimg.com/raw/587bee73fd3f1fccb7bb85c81c2e4927.png\"></p>\n<p><strong>函数部署：</strong></p>\n<p>开发完成后，可点击 IDE 右上角的【部署】按钮将函数部署到云端。Serverless Web IDE 提供手动部署和自动部署两种函数部署方式，支持在线安装依赖。</p>\n<p><strong>1. 手动部署</strong>：手动部署模式下，您可以通过点击 IDE 右上角【部署】按钮触发函数部署到云端。</p>\n<p><strong>2. 自动部署</strong>：自动部署模式下，保存（ctrl+s 或 command+s）即可触发函数部署到云端。</p>\n<p><strong>在线安装依赖</strong>：目前只支持 Node.js 运行环境，在线安装依赖开启后，在函数部署时会根据 package.json 中的配置自动安装依赖，详情可参考<strong>在线依赖安装</strong>:<code class=\"language-text\">https://cloud.tencent.com/document/product/583/37920</code>。</p>\n<p>切换部署方式和启用在线依赖安装可通过点击 IDE 右上角操作区箭头的下拉列表中的【自动部署】和【自动安装依赖】进行切换，【自动部署：关闭】则代表手动部署模式。</p>\n<p><img src=\"https://main.qcloudimg.com/raw/e3dedac5c8a263867af702f3bc553f81.png\"></p>\n<blockquote>\n<p><strong>注意：</strong></p>\n<ul>\n<li>函数的根目录为 /src，部署操作默认将 /src 目录下的文件打包上传，请将需要部署到云端的文件放在 /src 目录下</li>\n<li>自动部署模式下保存即触发函数部署到云端，不建议在有流量的函数上开启。</li>\n</ul>\n</blockquote>\n<p><strong>函数测试</strong></p>\n<p>您可以点击 IDE 右上角操作区【测试】按钮触发函数运行，并在输出中查看函数运行结果。</p>\n<p><strong>1. 选择测试模版</strong>：点击 IDE 操作区的【测试模版】选择函数测试触发事件；</p>\n<p><strong>2. 新增测试模版</strong>：如果现有的测试模版不能满足您的测试需求，可以在测试模版下拉列表中选择【新增测试模版】自定义测试事件，新增测试事件将以 JSON 文件的格式存储在函数根目录 /src 下的 <code class=\"language-text\">scf\\_test\\_event</code> 文件夹中，跟随函数一起部署到云端，已经创建好的测试模版会自动检测并添加到 IDE 测试模版列表中，无需重复添加。</p>\n<p><img src=\"https://main.qcloudimg.com/raw/bc764b668bb23c1d9931a4c8c03ead41.png\"></p>\n<p><strong>查看日志</strong></p>\n<p>您可以在输出中查看函数测试结果，包括返回数据 Response、日志 Output 和函数执行摘要 Summary。</p>\n<p><img src=\"https://main.qcloudimg.com/raw/88b65aecadd3fcda79fca3d0544a34ca.png\"></p>\n<p><strong>更多操作</strong></p>\n<p>在资源管理器函数文件上单击右键展开的列表中，包含了函数相关的全部操作。除部署、测试、新增测试模版等操作外，还提供了：</p>\n<ul>\n<li><strong>生成 serverless.yml</strong>：将函数当前的配置写入配置文件 serverless.yml，可以使用 Serverless Framework 命令行工具进行二次开发；</li>\n<li><strong>丢弃当前修改</strong>：重新拉取云端已经部署的函数覆盖当前工作区。</li>\n</ul>\n<p>腾讯云 Serverless 提供完整的在线开发、在线调试全生命周期能力：<a href=\"https://serverlesscloud.cn/best-practice/2021-01-06-remote-debugging\">《再见，本地环境！腾讯云全球首发：Serverless 在线远程调试》</a></p>\n<p>使用过程中遇到的任何问题都可以反馈至 <a href=\"https://wj.qq.com/s2/7781179/60f4\">这里</a></p>\n<hr>\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/2021-01-18-scf-web-ide/#%E5%8A%9F%E8%83%BD%E4%BC%98%E5%8A%BF\">功能优势</a></li>\n<li><a href=\"/best-practice/2021-01-18-scf-web-ide/#%E5%BF%AB%E9%80%9F%E4%BD%93%E9%AA%8C\">快速体验</a></li>\n</ul>"},"previousBlog":{"id":"1bfe523c-4175-5d7a-8dd8-a7a1f229d458","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/2547283cf5d9ade937c1d81a75fa8948.png","authors":["吴宜展"],"categories":["best-practice"],"date":"2021-01-19T00:00:00.000Z","title":"成为技术影响力大牛？CODING Pages 快速搭建个人专属博客","description":"博客教程有很多，这一篇又有什么特别？—— 特别简单","authorslink":null,"translators":null,"translatorslink":null,"tags":["Serverless","CODING"],"keywords":null,"outdated":null},"wordCount":{"words":142,"sentences":28,"paragraphs":28},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2021-01-19-coding-pages.md","fields":{"slug":"/best-practice/2021-01-19-coding-pages/","keywords":["serverless","网站","静态","部署"]}},"nextBlog":{"id":"246a3099-2bf9-54f8-9182-0156347330e7","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/2e90a9a7efa86ed3e180d4628ba5fbea.jpg","authors":["Barrie"],"categories":["best-practice"],"date":"2021-01-14T00:00:00.000Z","title":"输入几行代码，轻松迁移 SpringBoot 应用上云","description":"快来体验一下吧！","authorslink":null,"translators":null,"translatorslink":null,"tags":["Serverless","SpringBoot"],"keywords":null,"outdated":null},"wordCount":{"words":289,"sentences":42,"paragraphs":42},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2021-01-14-serverless-springboot.md","fields":{"slug":"/best-practice/2021-01-14-serverless-springboot/","keywords":["go","java","serverless","ssr","云函数","应用","部署","Serverless","创建","控制台","tencent"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"5a0d8924-f9d0-509b-89e8-d6774ef61461","previousBlogId":"1bfe523c-4175-5d7a-8dd8-a7a1f229d458","nextBlogId":"246a3099-2bf9-54f8-9182-0156347330e7"}}}