Web Integrated Development Environment (WebIDE) is an online IDE provided by Alibaba Cloud Function Compute. WebIDE delivers cloud-based development experience that is similar to that of Visual Studio Code (VS Code). This topic describes WebIDE and how to configure WebIDE in the Function Compute console.
Features
WebIDE provides the following features:
Complete code development, deployment, and test capabilities
Consistent terminal and runtime environments between WebIDE and Function Compute.
Common development tools, such as pip, npm, and composer, and various programming languages are provided for different runtime environments. You can use WebIDE to package third-party dependencies without worrying about the differences with online environments.
Serverless Devs is built in WebIDE and is automatically configured based on the logon account. You do not need to run the
s config
command to configure Serverless Devs. The default alias isdefault
.
Code hinting, automatic code completion, and code debugging
WebIDE is optimized for Google Chrome. For the best developing experience, we recommend that you use the latest version of Google Chrome.
Limits
WebIDE supports only Python, Node.js, PHP, and custom runtime environments. For more information, see What runtime environments in Function Compute support WebIDE?. Online editing is not supported for Java, Go, and C# runtime environments. You can upload compiled and packaged ZIP or binary files if you want to use these runtime environments.
WebIDE provides each user with 5 GB of storage. When the storage is full, you will no longer be able to perform write operations. We recommend that you clear your storage at regular intervals.
When you open WebIDE, an instance is automatically enabled. The instance is referred to as "WebIDE-related instance" in this topic. By default, the WebIDE-related instance is equivalent to a container instance whose specifications are 1 vCPU and 1.5 GB memory.
The environment of the WebIDE-related instance is the same as the runtime environment of your function. However, the instance cannot load custom layers and mounted Apsara File Storage NAS (NAS) and Object Storage Service (OSS) resources. Furthermore, the WebIDE-related instance cannot access the virtual private cloud (VPC) configured for the service. If you need to use the preceding features, you can invoke the function after you deploy the code, or you can use dedicated WebIDE.
The dedicated WebIDE is available only in the following regions: China (Hangzhou), China (Shanghai), China (Beijing), China (Zhangjiakou), China (Hohhot), China (Shenzhen), China (Hong Kong), Singapore, Japan (Tokyo), Germany (Frankfurt), and US (Virginia). If you want to use the service in another region, join the DingTalk group 11721331 to contact the technical support.
WebIDE overview
The following figure shows the WebIDE UI in full-screen mode. The WebIDE UI is divided into four areas: the resource manager, the file editor, the function operation area, and the CLI terminal.
① Resource manager: Allows you to view the code structure, including code and dependency files.
② File editor: Allows you to edit code for the function. After you complete your code, you can click the run button in the upper-right corner to debug the code. If you want to test how the code runs in the actual runtime environment of Function Compute, click Deploy Code in area ③.
③ Operation area: Allows you to deploy and test your code. After you click Exit Fullscreen, the operation area is moved to the upper-left corner of the WebIDE UI.
④ CLI terminal: In the top toolbar of the WebIDE UI, choose
to open a CLI terminal. You can debug your code and install third-party dependencies in the CLI terminal.
Prerequisites
A service and a function are created. For more information, see Create a service and Create a function.
Procedure
- Log on to the Function Compute console. In the left-side navigation pane, click Services & Functions.
- In the top navigation bar, select a region. On the Services page, click the desired service.
- On the Functions page, click the name of the desired function. On the Function Details page that appears, click the Code tab.
Optional: On the Code tab of the function details page, click Configure WebIDE in the upper-right corner. In the Configure WebIDE panel, select the type of WebIDE that you want to use.
You can select Serverless or Dedicated.
Serverless
You can select Disable Dedicated WebIDE to ensure that Serverless WebIDE is automatically selected every time you open WebIDE.
Dedicated
If you want the WebIDE-related instance to be able to load custom layers and mounted NAS and OSS resources, and access the VPC configured for the service, select Dedicated WebIDE and configure the following settings:
Instance Specifications
Execution Timeout Period
If you use dedicated WebIDE, Function Compute can reuse or automatically create a VPC, a vSwitch, and a general-purpose NAS file system based on the VPC of the region where your function resides. For information about billing of the automatically created resources, see Billing of General-purpose NAS file systems.
On the WebIDE UI, write function code, install third-party dependencies, and then perform tests based on your business requirements.
For more information about areas on the WebIDE UI, see WebIDE overview.
If you use dedicated WebIDE, make sure that your function can run as expected. Otherwise, WebIDE may fail to open.
FAQ
WebIDE throws an exception when loading. How do I fix this?
Refresh the function details page or reset the WebIDE environment to resolve the issue. For more information about how to reset a WebIDE environment, see How do I reset the environment variables, runtime environment, and layers of WebIDE?
What is dedicated WebIDE?
Dedicated WebIDE is essentially a function that is deployed under your account in Function Compute. The name of the service to which the function belongs starts with _webide-server-
.
If you use dedicated WebIDE, the WebIDE-related instance can load custom layers and mounted NAS and OSS resources, and allows you to access the VPC configured for your service. This provides a consistent environment between the WebIDE terminal and online Function Compute runtime, which facilitates coding and debugging. You can also configure custom instance specifications. For example, you can increase the CPU and memory specifications to improve the performance of WebIDE.
When you use dedicated WebIDE, the essential function runs under your account and you are charged for the following items:
Invocation fees for the function in Function Compute and resource usage. For more information, see Billing overview.
Fees that are generated by the NAS file system. For more information, see Billing of General-purpose NAS file systems.
My function can run as expected in the WebIDE terminal, but fails to run when I use Test Function. Why does this happen?
WebIDE helps you test code, build projects, and install dependencies in an efficient manner. However, the WebIDE environment is not the actual execution environment of Function Compute. In serverless WebIDE, you cannot directly test custom layers or access NAS or OSS resources. You also cannot access other resources over VPC.
To avoid this issue, you can use dedicated WebIDE. Alternatively, you can click Deploy, and then click Test Function to test the function.
How do I reset the environment variables, runtime environment, and layers of WebIDE?
When you refresh the function details page or the WebIDE UI, the latest configurations, such as environment variables, layers, and runtime of the online function are updated to the WebIDE-related instance. You can view the latest function environment variables and other information by running env
in the WebIDE terminal.
How long is the data of serverless WebIDE retained?
By default, the data of serverless WebIDE is retained for 48 hours. If you do not open the function WebIDE in 48 hours, the data is deleted.
In addition, if the online code is modified in the console or by using an SDK tool, the code checksum
of the function is changed and the content of WebIDE is automatically updated to the latest version when you refresh or reopen WebIDE.
What runtime environments in Function Compute support WebIDE?
This section describes the runtime environments that support WebIDE.
Python
Python 3.10, Python 3.9, Python 3.6, and Python 2.7
Node.js
Node.js 16, Node.js 14, Node.js 12, Node.js 10, and Node.js 8
PHP
PHP 7.2
Custom Runtime
Custom Runtime (Debian 9) and Custom Runtime (Debian10)
Can I debug code in WebIDE?
Yes, you can debug code in WebIDE. You can use the built-in VS Code debugging plug-ins for different runtime environments in WebIDE. If you use a programming language that is not commonly used in a custom runtime, you can install the VS Code plug-in for that programming language.
For example, if your function runs Python 3.9, you must add specific code to run the handler. The content of the red box in the following figure shows the sample code.
When I modify function code, git displays code differences. Is this because function code is hosted by WebIDE?
No, function code is not hosted by WebIDE. When you open WebIDE, git init
is automatically initialized the first time you open a function code package to display the differences between the code and the online code. After you click Deploy, commit
is automatically generated to make the code in the WebIDE terminal and online environments identical. save function with codechecksum xxxx
in the following figure indicates that the function is deployed once. This feature helps improve user experience.
The code of a function is different if I log on to Function Compute with two RAM users of the same Alibaba Cloud. Why is that?
WebIDE Function Compute supports workspace isolation for RAM users that belong to the same Alibaba Cloud account. For example, WebIDE A is used when RAM User A logs on to Function Compute, and WebIDE B is used when RAM User B logs on to Function Compute. The modifications made by each RAM user do not affect the business of the other RAM user. In this case, the code for RAM User A and RAM User B is different.
Both RAM User A and RAM User B can view the differences between the code in their own workspaces and the online function code. For more information, see When I modify function code, git displays code differences. Is this because function code is hosted by WebIDE?.