云IDE產(chǎn)品介紹
云IDE使用教程
免費(fèi)使用地址：點(diǎn)擊【云IDE】，即可開始創(chuàng)建工作空間啦~
CSDN最新產(chǎn)品【云IDE】來啦！【云IDE】將為各位技術(shù)er一鍵秒級構(gòu)建云開發(fā)環(huán)境，提升開發(fā)效率！為持續(xù)提升產(chǎn)品體驗(yàn)，現(xiàn)CSDN特開展產(chǎn)品評測有獎話題征文活動，誠邀各位技術(shù)er免費(fèi)試用【云IDE】，撰寫使用體驗(yàn)，參與即可獲得【話題達(dá)人】勛章+CSDN電子書月卡（站內(nèi)千本電子書免費(fèi)看），更有機(jī)會獲得CSDN官方會員卡+周邊大獎！
前言
在云IDE產(chǎn)生之前有許多一些比較難解決的問題，例如：因?yàn)橐咔樵蚍庠诩?，而對于自己常用的IDE開發(fā)環(huán)境是在公司的電腦上，那么此時(shí)就需要需要自己在本地手動配置一個適合自己開發(fā)的IDE開發(fā)環(huán)境；又剛好手頭需要進(jìn)行開發(fā)某個功能或者修改某個bug，此時(shí)只有一臺能夠聯(lián)網(wǎng)的電腦，就會有需要手動搭建開發(fā)環(huán)境的繁瑣問題。
對于上述描述的部分問題來說，云IDE簡直就是我們的福音，只要你的電腦能夠連上網(wǎng)，登錄上云IDE，那么就會直接使用之前配置好的IDE環(huán)境，無需再進(jìn)行準(zhǔn)備，即開即用。
在CSDN的云IDE推出之前也有一些云IDE，如騰訊的云端IDE等，這里我來介紹一下CSDN的云IDE產(chǎn)品的功能特點(diǎn)，其預(yù)置了Python，Java、Node.js等環(huán)境，并配有ALL IN ONE的配置選項(xiàng)，勾選即可默認(rèn)使用。能夠支持實(shí)時(shí)預(yù)覽，支持一鍵進(jìn)行導(dǎo)入、拉取開源平臺的倉庫，能夠快速進(jìn)行功能開發(fā)，并且所有寫的代碼能夠?qū)崟r(shí)保存到云端，提高了開發(fā)效率。
現(xiàn)在就跟著我來看看CSDN云IDE的基本使用吧。
一、認(rèn)識云IDE
1.1、CSDN.開發(fā)云
點(diǎn)擊 CSDN-開發(fā)云鏈接 即可進(jìn)入CSDN的開發(fā)云網(wǎng)站，初始額度有10000核/時(shí)：
1.2、秘鑰管理
點(diǎn)擊開發(fā)云主界面中的秘鑰管理，即可進(jìn)入到秘鑰頁面，添加好秘鑰之后我們即可使用云IDE來進(jìn)行推拉代碼：
添加步驟
步驟一：點(diǎn)擊生成SSH秘鑰
步驟二：進(jìn)入到Gitee賬號，添加ssh秘鑰
添加成功后如下，就可以看到SSH公鑰，并且你的郵箱也會收到添加公鑰鏈接：
添加完成之后，我們之后開發(fā)可直接在云端進(jìn)行，提交代碼與拉取代碼都可以在云端操作！
二、實(shí)戰(zhàn)-使用云IDE
2.1、初步實(shí)戰(zhàn)springboot-demo（clone默認(rèn)模板代碼）
2.1.1、新建工作空間
填寫你的空間名稱、代碼來源（①拉取項(xiàng)目：填寫倉庫地址。②空：創(chuàng)建一個空項(xiàng)目。③默認(rèn)模板代碼：springboot.demo），接著點(diǎn)擊確定創(chuàng)建即可：
這里我們來選擇一個默認(rèn)模板代碼來創(chuàng)建：
2.1.2、啟動springboot-demo項(xiàng)目
點(diǎn)擊啟動按鈕，就會跳轉(zhuǎn)到云IDE界面，并且自動執(zhí)行命令并啟動springboot-demo項(xiàng)目：
- 第一個欄目就是內(nèi)置的一個瀏覽器。
其啟動的命令是：
cd /ide/workspace/springboot-demo && set port=8080 && export PORT=8080 && mvn spring-boot:run
我們也可以自由的在云IDE里進(jìn)行代碼編輯以及安裝一些vscode插件，就跟本地使用IDE一樣，下面的插件就是目前云IDE自帶安裝的：
2.1.3、編寫一個helloworld接口
@GetMapping("/hello")
@ResponseBody
public String hello() {
return "hello world!";
}
接著我們底部窗口輸入ctrl+c來進(jìn)行停止項(xiàng)目：
重新啟動有兩種方式如下：
# 指定端口啟動
# mvn compile
cd /ide/workspace/springboot-demo && set port=8080 && export PORT=8080 && mvn spring-boot:run
在相應(yīng)的網(wǎng)址后面加上/hello即可訪問我們剛剛編寫的接口了：
ps：該網(wǎng)址外網(wǎng)也可以直接訪問，這樣我們平時(shí)自己開發(fā)的時(shí)候想要給其他人展示就無需使用一些內(nèi)網(wǎng)穿透之類的，效果還是很不錯滴。
2.2、運(yùn)行前端工程項(xiàng)目
2.2.1、初步嘗試—實(shí)現(xiàn)helloworld
步驟一：新建工程空間
- 空間名稱：隨意設(shè)置，我們這里設(shè)置為test-html。
- 預(yù)制環(huán)境：All In One（這里需要node、npm，所以勾選），
- 代碼來源：空
點(diǎn)擊確定創(chuàng)建即可創(chuàng)建一個空的工程文件。
步驟二：啟動我們剛剛創(chuàng)建的工作空間
此時(shí)我們進(jìn)入到工作空間，由于我們之前勾選的代碼來源是空的，所以這里是空文件夾，我們右擊左邊的管理器來打開終端窗口：
步驟三：初始化并啟動server服務(wù)
①初始化package.json文件：
# 不停回車即可，若是需要自定義的話輸入相應(yīng)的內(nèi)容回車
npm init
編輯package.json文件添加live-server的依賴：
{
"name": "workspace",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "live-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"live-server": "^1.2.2"
},
"author": "",
"license": "ISC"
}
②安裝live-server依賴
在命令行窗口中進(jìn)行安裝
# 設(shè)置一下npm的淘寶鏡像下載源
npm config set registry https://registry.npm.taobao.org
# 安裝我們package.json中添加的依賴
npm install
安裝成功的效果如下：
③添加index.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello world!
</body>
</html>
④執(zhí)行npm命令啟動服務(wù)
npm run dev
至此我們的前端工程就已經(jīng)啟動起來，并且可供外網(wǎng)進(jìn)行訪問，快去復(fù)制下你們自己的鏈接去瀏覽器上訪問一下把：
- 我們實(shí)際上就可以把前端網(wǎng)頁頁面直接放在當(dāng)前目錄即可！
確實(shí)是可以在自己的瀏覽器訪問啦：
注：這個網(wǎng)絡(luò)地址接口是有用戶鑒權(quán)的，鏈接別人是訪問不了的！
2.2.2、實(shí)現(xiàn)云IDE打開工作空間時(shí)自動啟動服務(wù)（配置preview.yml）
我們接著2.2.1中來進(jìn)行，我們在當(dāng)前目錄下新建preview.yml：
# preview.yml
autoOpen: false # 打開工作空間時(shí)是否自動開啟所有應(yīng)用的預(yù)覽
apps:
- port: 8080 # 應(yīng)用的端口
run: npm run dev # 應(yīng)用的啟動命npm i &&
command: # 使用此命令啟動服務(wù)，且不執(zhí)行run
root: ./ # 應(yīng)用的啟動目錄
name: love # 應(yīng)用名稱
description: 我的第一個 App。 # 應(yīng)用描述
autoOpen: true # 打開工作空間時(shí)是否自動開啟預(yù)覽（優(yōu)先級高于根級 autoOpen
主要是要修改其中的port端口，要與我們之前的服務(wù)端口對上！
OK，現(xiàn)在我們來測試一下，在剛剛的控制臺界面ctrl+c關(guān)閉服務(wù)，再訪問下確實(shí)不行：
接著我們刷新下當(dāng)前的頁面：
可以看到效果了，云IDE會自動啟動一個窗口并執(zhí)行一段命令，其中命令的參數(shù)包含我們剛才在preview.yml中配置的信息，命令如下：
cd ./ && set port=8080 && export PORT=8080 && npm run dev --port=8080
實(shí)際上就是跟我們剛剛手動輸入的命令一致，這里的操作就是讓我們更加簡化了一步而已。
2.2.3、搭配live-server指定訪問的root目錄（指定dist目錄）
需求：實(shí)際上我們在真實(shí)進(jìn)行前端項(xiàng)目開發(fā)時(shí)，會打包到一個dist目錄，那么我們?nèi)绾沃付ㄔ揹ist目錄是我們當(dāng)前對外訪問的root目錄呢？
解決思路：通過去設(shè)置live-server的初始params參數(shù)，指定root目錄，即可達(dá)到該效果。
- 之前嘗試使用通過live-server追加命令參數(shù)，發(fā)現(xiàn)并沒有這個參數(shù)可選。
實(shí)現(xiàn)步驟：
①新建node的腳本文件：index.js
var liveServer = require("live-server");
var params = {
port: 8080, //端口號
host: "0.0.0.0", //綁定的主機(jī)地址
root: "./dist", //手動指定root目錄，默認(rèn)是在當(dāng)前目錄
open: false, //是否打開默認(rèn)瀏覽器
};
liveServer.start(params);
②修改package.json
"dev": "node scripts/index.js",
最后就是新建一個dist文件（這里模擬一些vue項(xiàng)目去創(chuàng)建的輸出目錄）以及一個index.html：
- 為了方便標(biāo)識這里是dist目錄下的html，我們就加了222在helloworld后。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello world222!
</body>
</html>
最后我們來進(jìn)行執(zhí)行npm命令來啟動服務(wù)：
npm run dev
三、使用體驗(yàn)
剛開始使用云IDE，第一眼感覺比較酷炫，使用時(shí)發(fā)現(xiàn)可以快速去拉取開源項(xiàng)目以及進(jìn)行開發(fā)調(diào)試，其效果非常貼合開發(fā)者。
體驗(yàn)感好的地方：
1、隨時(shí)隨地可以進(jìn)行登錄云平臺，就有之前熟悉的環(huán)境配置，不再需要自己的電腦隨時(shí)隨地在身邊來進(jìn)行編輯運(yùn)行。
2、使用云IDE開發(fā)的項(xiàng)目，可以直接外網(wǎng)來進(jìn)行查看效果，這一點(diǎn)我是最驚喜的地方！
3、自帶一些常見開發(fā)的初始環(huán)境配置，進(jìn)入云IDE無需怎么配置插件就可以直接進(jìn)行開發(fā)。
建議：
1、因?yàn)槲沂呛蠖碎_發(fā)，平時(shí)主要使用的IDE是IDEA，不太經(jīng)常使用vscode，而且vscode需要自己手動裝很多一些插件才能夠配置java的一些開發(fā)環(huán)境，要是云上有我們熟悉的集成開發(fā)環(huán)境就非常棒了！
2、結(jié)合云生態(tài)，提供更多的集成服務(wù)，能夠和高校合作給學(xué)生一系列的環(huán)境平臺，無需進(jìn)行手動重復(fù)環(huán)境配置，我覺得會很受歡迎。
大家也可以去嘗試體驗(yàn)一波，很是很不錯的！
??創(chuàng)作不易，如有錯誤請指正，感謝觀看！記得點(diǎn)贊哦！??
參考資料
[1]. CSDN云IDE初體驗(yàn) - 有些驚艷
[2]. 【產(chǎn)品新體驗(yàn)】- CSDN云IDE初體驗(yàn)文章來源：http://www.zghlxwxcb.cn/news/detail-781116.html
[3]. 云Cloud官方視頻、使用文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-781116.html
到了這里，關(guān)于【產(chǎn)品新體驗(yàn)】CSDN. 云IDE體驗(yàn)與功能使用教程（保姆級教程）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
