一、概述

1. 案例介绍

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

2. 适用对象

  • 企业
  • 个人开发者
  • 高校学生

3. 案例时间

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

4. 案例流程

华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间

说明:

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

5. 资源总览

本案例预计花费0元。

资源名称

规格

单价(元)

时长(分钟)

华为开发者空间 - 云开发环境

鲲鹏通用计算增强型 kc1 | 2vCPUs | 4G | HCE

免费

60

最新案例动态,请查阅 《本地VSCode基于华为开发者空间云开发环境完成小程序开发》。小伙伴快来领取华为开发者空间,进入云开发环境服务器版实操吧!


二、环境配置

1. 开发者空间配置

面向广大开发者群体,华为开发者空间提供一个随时访问的“开发平台”、丰富的“预配置工具集合”和灵活使用的“场景化资源池”,开发者开箱即用,快速体验华为根技术和资源。

开发者可以登录华为云账号后可以直接进入华为开发者空间开发平台界面,点击云开发环境即可进入云开发环境页面。

华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_02

:初次进入云开发环境需签署协议,勾选协议后,点击【进入】。

云开发环境如下图所示:

华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_VS Code_03

2. PC端通过cli工具连接云开发环境

本案例中,使用华为云《开发者空间云开发环境使用指导》的“三. PC端环境配置”、“四. 本地PC端操作云开发环境中的1.开机、2.建立隧道连接”章节完成cli工具安装、环境配置、创建云开发环境、开机、建立隧道连接的功能。

华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_04

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

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

1. 下载安装VS Code,官网链接 https://code.visualstudio.com/Download(官网会自动检测操作系统,显示 “Download for Windows” 按钮(稳定版 Stable))。

安装VS Code比较简单,在此不做赘述。安装完成打开如下图所示:

华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_05

2.安装Remote-SSH插件,打开VSCode,在左侧点击“extensions”图标,在搜索框中搜索Remote-SSH,点击“install”进行安装。

华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_06

  • 安装成功之后,在左侧会显示一个远程链接图标。如下图所示:
  • 华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_07

    2. 连接云开发环境

    1.点击远程连接图标,新建远程连接。如下图所示:

    华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_VS Code_08

    2.在输入框中输入用户名和端口号,并回车。

    ssh developer@127.0.0.1:1222

    华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_09

    注意:developer即为创建远程开发环境时,默认的用户名,若是用户自定义了用户名,此处应改为自定义的用户名。端口号即为步骤二环境配置中,连接云开发环境时,建立隧道所设置的本地监听端口号。

    1. 点击Config文件

      华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_10

      在右下角选择connect,如下如所示:

      华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_11

      选择Linux,如下图所示:

      华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_12

      启动远程连接:

      华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_13

    4.下载 VS Code Server

  • 按照提示要求输入创建云开发环境时所设置的密码,并回车,密码输入正确后,右下角会自动下载VS Code Server,大概需要40秒左右,请耐心等待。
  • 华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_14

  • 下载VS Code Server。
  • 华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_15

  • 连接远程开发环境成功,如下图所示:
  • 华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_16

    3. 文件上传下载

    1. 打开远程开发环境的目录。

      华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_17

    2. 上传一个文件,我们把本地一个测试文件拖拽到developer目录下,并用命令确认是否上传成功,结果显示如下:

      华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_18

    3. 下载文件类似,我们把远程开发环境的文件可以下载到本地,步骤如下:

      华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_19

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

    1. 代码开发

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

    华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_20

    华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_21

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

    package main
    import ("fmt""io""log""net/http""os""time"
    )func main() {// 注册处理函数到根路径 "/"http.HandleFunc("/", handler)// 获取端口参数,默认使用8080port := ":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 Allowedhttp.Error(w, "Method Not Allowed", http.StatusMethodNotAllowed)
    }

    代码展示如下:

    华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_22

    2. 项目编译

    1. 打开远程终端。

      华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_23

    2. 使用命令进入到代码路径。
    cd test/go

    华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_华为开发者空间_24

    编译代码,依次执行如下命令:

    go mod init httpgo mod tidygo buildls./http

    华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_GO_25

    3. 远程访问

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

    华为开发者空间-云开发环境,实现本地VSCode远程开发小程序_VS Code_26

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

    4. 关闭cli连接

    本案例中,使用华为云《开发者空间云开发环境使用指导》的“四. 本地PC端操作云开发环境中的4.关机、5.删除”章节完成云开发环境的关闭和删除的功能。