虛擬機一站式部署Claude Code 可視化UI界面

前言

最近，強大的 AI 編碼助手 Claude Code 在開發者社區中迅速走紅，憑借其出色的代碼生成和理解能力贏得了廣泛贊譽。然而，其純粹基于命令行的交互方式，對于許多習慣了圖形化界面的開發者，尤其是新手而言，無疑設置了一道不低的門檻。繁瑣的命令記憶、不夠直觀的操作流程，使得不少用戶難以充分發揮其強大的潛力。

為了解決這一痛點，藍耘適時推出了配套的可視化工具?lanyuncodingui。它巧妙地為命令行的 Claude Code 套上了一層現代化的圖形用戶界面 (GUI)，將復雜的操作簡化為直觀的點擊和輸入。本文將作為一份詳盡的指南，不僅會帶您完成 Claude Code 的基礎安裝與配置，更核心的是，將引導您部署并使用?lanyuncodingui，讓您徹底告別冰冷的終端，在友好的可視化環境中，輕松駕馭 Claude Code 的強大功能，享受真正高效、愉悅的 AI 輔助編程新體驗。

安裝Node.js以及npm

Node.js我們要求的版本是20.19.4甚至更高
我們先進行系統包的更新操作

sudo apt update
sudo apt upgrade

Node.js 官方提供了 NodeSource 倉庫，里面有各個版本的 Node.js 包。為了安裝特定版本的 Node.js 20.x，可以先添加 NodeSource 倉庫

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

執行以下命令來安裝 Node.js 20.19.4 版本：

sudo apt install -y nodejs=20.19.4-1nodesource1

我們這里出現了如下報錯

這是由于 系統中已安裝的 libnode-dev 包與 Node.js 20.19.4 沖突。
我們需要卸載沖突的舊版本 Node 相關包（包括 libnode-dev）：

sudo apt remove libnode-dev nodejs -y

重新安裝 Node.js 20.19.4：

sudo apt install -y nodejs=20.19.4-1nodesource1

然后輸入下方命令進行驗證安裝

node -v
npm -v

安裝claude code

進行claude code的安裝
輸入下方命令

bash -c "$(curl -fsSL https://raw.githubusercontent.com/LanyunAI-labs/lanyun-cc/main/install.sh)"

出現了下方報錯，顯示連接拒絕了

我們這里輸入命令是沒有問題的，所以我們這個虛擬機肯定是可以進行互聯網的訪問操作的

ping baidu.com

問題可能出在 DNS 配置 或 GitHub 服務器的訪問限制 上。

但是這個還是挺麻煩的，索性我直接將需要配置的環境變量的文件里面的內容獲取下來了，這個文件其實就是配置一些環境變量的

#!/bin/bashset -einstall_nodejs() {local platform=$(uname -s)case "$platform" inLinux|Darwin)echo "🚀 Installing Node.js on Unix/Linux/macOS..."echo "📥 Downloading and installing nvm..."curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bashecho "🔄 Loading nvm environment..."\. "$HOME/.nvm/nvm.sh"echo "📦 Downloading and installing Node.js v22..."nvm install 22echo -n "? Node.js installation completed! Version: "node -v # Should print "v22.17.0".echo -n "? Current nvm version: "nvm current # Should print "v22.17.0".echo -n "? npm version: "npm -v # Should print "10.9.2".;;*)echo "Unsupported platform: $platform"exit 1;;esac
}# Check if Node.js is already installed and version is >= 18
if command -v node >/dev/null 2>&1; thencurrent_version=$(node -v | sed 's/v//')major_version=$(echo $current_version | cut -d. -f1)if [ "$major_version" -ge 18 ]; thenecho "Node.js is already installed: v$current_version"elseecho "Node.js v$current_version is installed but version < 18. Upgrading..."install_nodejsfi
elseecho "Node.js not found. Installing..."install_nodejs
fi# Check if Claude Code is already installed
if command -v claude >/dev/null 2>&1; thenecho "Claude Code is already installed: $(claude --version)"
elseecho "Claude Code not found. Installing..."npm install -g @anthropic-ai/claude-code
fi# Configure Claude Code to skip onboarding
echo "Configuring Claude Code to skip onboarding..."
node --eval 'const homeDir = os.homedir(); const filePath = path.join(homeDir, ".claude.json");if (fs.existsSync(filePath)) {const content = JSON.parse(fs.readFileSync(filePath, "utf-8"));fs.writeFileSync(filePath,JSON.stringify({ ...content, hasCompletedOnboarding: true }, 2), "utf-8");} else {fs.writeFileSync(filePath,JSON.stringify({ hasCompletedOnboarding: true }), "utf-8");}'# Prompt user for API key
echo "🔑 Please enter your lanyun API key:"
echo "🔑 請輸入您的藍耘 API 密鑰："
echo "   You can get your API key from: https://maas.lanyun.net/"
echo "   您可以從這里獲取 API 密鑰：https://maas.lanyun.net/"
echo "   Note: The input is hidden for security. Please paste your API key directly."
echo "   注意：為了安全起見，輸入內容將被隱藏。請直接粘貼您的 API 密鑰。"
echo ""
read -s api_key
echo ""if [ -z "$api_key" ]; thenecho "??  API key cannot be empty. Please run the script again."exit 1
fi# Prompt user for model (optional, default is k2)
echo ""
echo "🤖 Please enter the Claude model to use (press Enter for default 'k2'):"
echo "🤖 請輸入要使用的 Claude 模型（按回車使用默認值 'k2'）："
echo ""
read model
echo ""# Set default model if not provided
if [ -z "$model" ]; thenmodel="k2"echo "??  Using default model: k2"
fi# Detect current shell and determine rc file
current_shell=$(basename "$SHELL")
case "$current_shell" inbash)rc_file="$HOME/.bashrc";;zsh)rc_file="$HOME/.zshrc";;fish)rc_file="$HOME/.config/fish/config.fish";;*)rc_file="$HOME/.profile";;
esac# Add environment variables to rc file
echo ""
echo "📝 Adding environment variables to $rc_file..."# Check if ALL three variables exist
has_base_url=$(grep -c "ANTHROPIC_BASE_URL" "$rc_file" 2>/dev/null || echo 0)
has_api_key=$(grep -c "ANTHROPIC_API_KEY" "$rc_file" 2>/dev/null || echo 0)
has_model=$(grep -c "ANTHROPIC_MODEL" "$rc_file" 2>/dev/null || echo 0)if [ "$has_base_url" -gt 0 ] && [ "$has_api_key" -gt 0 ] && [ "$has_model" -gt 0 ]; thenecho "??  Environment variables already exist in $rc_file. Updating with new values..."# Remove old entries (compatible with both macOS and Linux)if [[ "$OSTYPE" == "darwin"* ]]; thensed -i.bak '/ANTHROPIC_BASE_URL/d' "$rc_file"sed -i.bak '/ANTHROPIC_API_KEY/d' "$rc_file"sed -i.bak '/ANTHROPIC_MODEL/d' "$rc_file"rm -f "$rc_file.bak"elsesed -i '/ANTHROPIC_BASE_URL/d' "$rc_file"sed -i '/ANTHROPIC_API_KEY/d' "$rc_file"sed -i '/ANTHROPIC_MODEL/d' "$rc_file"fi
fi# Add/update entries
echo "" >> "$rc_file"
echo "# Claude Code environment variables" >> "$rc_file"
echo "export ANTHROPIC_BASE_URL=https://maas-api.lanyun.net/anthropic-k2/" >> "$rc_file"
echo "export ANTHROPIC_API_KEY=$api_key" >> "$rc_file"
echo "export ANTHROPIC_MODEL=$model" >> "$rc_file"
echo "? Environment variables added/updated in $rc_file"echo ""
echo "🎉 Installation completed successfully!"
echo "🎉 安裝成功完成！"
echo ""
echo "??  IMPORTANT: Run this command to activate Claude Code:"
echo "??  重要：運行以下命令激活 Claude Code："
echo ""
echo "   source $rc_file"
echo ""
echo "🚀 After that, you can use: claude"
echo "🚀 之后即可使用：claude"

我們在虛擬機上創建一個文件叫做install.sh，將上面的內容保存進去
然后保存退出即可

然后我們輸入命令進行文件的執行

./install.sh

這時候告訴我權限不夠，真的醉了

我們輸入命令給這個文件加上權限

chmod +x install.sh

然后我們再輸入上面的命令進行執行就ok了，這個時候我們就成功了

我們需要進行api-key環境變量的綁定操作，來到藍耘Maas平臺創建你的api

輸入完你的api-key然后我們就到了選擇模型的地方了，我們直接回車選擇默認的kimi k2模型即可

然后我們需要輸入命令激活claude code

source /root/.bashrc

然后再輸入claude開始進行使用，這里他會詢問我們的api是否選擇這個，我們選擇Yes然后回車即可

然后他這里詢問我們的是否相信這個文件夾
我們直接回車選擇相信，

然后就可以開始我們的愉快的使用了

這里我們可以通過命令行進行簡單的對話操作

安裝lanyuncodingui界面

但是終歸是命令行操作的，肯定沒有可視化界面那么舒服的，所以我們這里使用到了藍耘的lanyuncodingui可視化界面了

輸入命令

npm install -g lanyuncodingui@latest

安裝好如下：

只要你按照上述的步驟一個個來的話，肯定是不會出錯的
然后我們再輸入命令進行ui界面的啟動

lanyuncodingui

這里告訴我們的地址是在

http://0.0.0.0:3804

我們來到火狐打開這個網址

然后這里是讓我們進行賬戶的創建的，我們輸入我們的用戶名然后再重復輸入兩遍密碼，點擊下方的Create Account即可

然后我們就進入到了界面了

左側可以看到我們的項目文件夾，我們也是可以選擇點擊上方的文件夾打開按鈕打開我們其他路徑下的項目文件夾
我們在這里選擇默認的文件夾可以進行問題的敘述

我們這里也是可以不用回到虛擬機的終端界面，我們這里可以打開一個內置的終端進行命令的進行，也是很方便的

還有一個文件可視化大屏顯示當前虛擬機中的所有文件

并且雙擊就能查看文件內容了，增刪查改也是比原生的Linux方便多了
在左下角的setting中我們也是可以進行相關設置的，比如說進行模型的切換，api-key的更改，就不用去終端中輸入復雜的命令進行環境變量的更改了

并且這里我們也可以進行MCP的鏈接

還可以進行一系列規則的設置操作
說真的，這個claude code真的是做項目的絕絕子啊，非常的好用

本文以一篇詳盡的圖文教程，完整記錄了在虛擬機環境中從零開始部署藍耘?Claude Code?及其可視化界面?lanyuncodingui?的全過程。我們不僅成功解決了在安裝過程中遇到的具體技術難題，如 Node.js 的版本沖突、因網絡限制導致的安裝腳本拉取失敗，以及文件執行權限不足等常見障礙，還展示了如何通過手動創建本地腳本的變通方法，巧妙地繞過環境限制。

并且8月藍耘還在舉辦 MaaS 特價/折扣資源包和周周搶免費無門檻代金券活動

大量的token都在送，感興趣的趕緊來吧
https://console.lanyun.net/#/register?promoterCode=5663b8b127

總結

整個部署流程的核心亮點在于，我們成功地將一個純粹的命令行 AI 工具，升級為了一個功能全面、操作直觀的可視化集成開發環境。通過安裝和啟動?lanyuncodingui，開發者可以徹底擺脫對繁瑣命令的記憶和依賴。無論是進行文件管理、執行終端命令，還是修改 API 密鑰和切換模型等核心配置，一切都可以在友好的圖形界面中輕松完成。

總而言之，這套“虛擬機 + 藍耘Claude Code + lanyuncodingui”的組合方案，不僅驗證了 Claude Code 的強大能力，更重要的是提供了一套行之有效的方法，極大地降低了其使用門檻。它為開發者，尤其是初學者，打造了一個一站式的 AI 輔助編程工作站，是提升開發效率、優化編程體驗的絕佳利器。

https://console.lanyun.net/#/register?promoterCode=5663b8b127