本地VSCode基于华为开发者空间云开发环境完成小程序开发-优快云博客

一、概述

1. 案例介绍

本案例选择VS Code作为开发工具，通过创建开发者空间云开发环境，并使用VS Code在本地进行代码编写调试，一键部署到云开发环境，让开发者以更符合自身开发习惯的作业模式体验华为开发者空间云开发环境。

2. 适用对象

企业
个人开发者
高校学生

3. 案例时间

本案例总时长预计60分钟。

4. 案例流程

说明：

登录开发者空间云开发环境；
本地下载cli文件；
建立隧道连接云开发环境；
通过VS Code完成代码编写调试发布。

5. 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）	时长（分钟）
华为开发者空间 - 云开发环境	鲲鹏通用计算增强型 kc1 \| 2vCPUs \| 4G \| HCE	免费	60

二、环境配置

1. cli方式创建云开发环境

登录华为开发者空间，参考案例《华为开发者空间-云开发环境（虚机）CLI工具远程连接操作指导》完成“二. Web端创建和管理云开发环境”、“三. PC端创建和管理云开发环境中的1.开机、2.建立隧道连接”章节完成安装cli工具包、配置本地环境、创建云开发环境、开机、建立隧道连接的功能。

三、本地IDE直连云开发环境完成上传下载

1. 下载VS Code 并安装 Remote-SSH 插件

下载安装VS Code，官网链接 https://code.visualstudio.com/Download 。然后安装Remote-SSH插件，打开VSCode，在左侧点击“extensions”图标，在搜索框中搜索Remote-SSH，点击“install”进行安装。

安装成功之后，在左侧会显示一个远程链接图标。如下图所示：

2. 连接云开发环境

点击远程连接图标，新建远程连接。如下图所示：
在输入框中输入用户名和端口号，并回车。

ssh -i "C:\Users\登录用户\.devenv\.ssh\IdentityFile\2689067ff1b24f87b24fc7581207445e" developer@127.0.0.1:1222

注意：-i后跟的路径为该环境对应的私钥文件路径，需要替换为自己的路径；developer即为创建云开发环境时用户自定义的用户名，默认为developer；端口号即为步骤二环境配置中，连接云开发环境时，建立隧道所设置的本地监听端口号。

选择保存配置文件并连接环境

在右下角选择connect，如下如所示：
下载 VS Code Server
下载VS Code Server。

连接远程开发环境成功，如下图所示：

3. 文件上传下载

VSCode资源管理器-打开远程开发环境的目录。
上传一个文件，我们把本地一个测试文件拖拽到developer目录下，并用命令确认是否上传成功，结果显示如下：
下载文件类似，我们把远程开发环境的文件可以下载到本地，步骤如下：

四、本地IDE直连云开发环境完成代码开发

1. 代码开发

下面我们在VS Code上做一个代码运行，新建一个test文件夹，在test文件下建个Go文件夹，并建一个main.go的文件。

将如下代码拷贝到main.go中:

package main
import (
   "fmt"
   "io"
   "log"
   "net/http"
   "os"
   "time"
)
func main() {
   // 注册处理函数到根路径 "/"
   http.HandleFunc("/", handler)
   // 获取端口参数，默认使用8080
   port := ":8080"
   if len(os.Args) > 1 {
    port = ":" + os.Args[1]
   }
   // 启动 HTTP 服务器，监听指定端口
   fmt.Printf("Starting server on http://localhost%s\n", port)
   err := http.ListenAndServe(port, nil)
   if err != nil {
    log.Println(err)
   }
}
// 处理 HTTP 请求
func handler(w http.ResponseWriter, r *http.Request) {
   // 设置响应头内容类型为纯文本
   w.Header().Set("Content-Type", "text/plain")
   // 处理 GET 请求
   if r.Method == "GET" {
    fmt.Fprintf(w, "Hello, client! time: %v", time.Now().Format("2006-01-02 15:04:05"))
    return
   }
   // 处理 POST 请求
   if r.Method == "POST" {
    body, err := io.ReadAll(r.Body)
    if err != nil {
        http.Error(w, "Failed to read request body", http.StatusInternalServerError)
        return
    }
    defer r.Body.Close()
    // 回显客户端发送的内容
    fmt.Fprintf(w, "Received: %s", body)
    return
   }
   // 如果不是 GET 或 POST 请求，返回 405 Method Not Allowed
   http.Error(w, "Method Not Allowed", http.StatusMethodNotAllowed)
}

代码展示如下：

2. 项目编译

打开远程终端。
使用命令进入到代码路径。

cd test/go

编译代码，依次执行如下命令：

go mod init http
go mod tidy
go build
ls
./http

3. 远程访问

在浏览器通过本地端口访问：

这样我们就可以在本地开发代码，直接编译并运行在远程开发环境上了！

4. 关闭cli连接

本案例中，使用华为云《华为开发者空间-云开发环境（虚机）CLI工具远程连接操作指导》的“四. PC端创建和管理云开发环境中的4.关闭、5.删除”章节完成云开发环境的关闭和删除的功能。

5. 反馈改进建议

如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖评论区反馈即可，我们会及时响应处理，谢谢！