当前位置：首页 > news >正文

利用FnOS搭建虚拟云桌面，并搭建前端开发环境（二）

news 2025/7/7 11:01:30

利用FnOS搭建虚拟云桌面，并搭建前端开发环境二

- 一、docker镜像
- 二、环境配置
- 三、核心环境配置流程文档

利用FnOS搭建虚拟云桌面，并搭建前端开发环境（一）

上一章安装了飞牛FnOS系统，界面如下，这一张配置前端开发基础环境，亲测可用。
在这里插入图片描述

一、docker镜像

确定自己的网络没有问题，即可加载出来docker镜像列表，第一次加载可能会很慢，除非网络好。
在这里插入图片描述
镜像搜索下载，选择合适的镜像即可，一下是我自己安装的镜像

二、环境配置

注意：默认数据都是保存在系统镜像里的，后续可以提取到一个统一的环境文件夹下。
1.redis
傻瓜式集成，安装后直接启动就可以。
通过桌面ip+redis端口就可访问
在这里插入图片描述
2.mysql
傻瓜式集成，安装后直接启动就可以。
通过桌面ip+mysql端口就可访问

3.nginx
傻瓜式集成，安装后直接启动就可以。
在这里插入图片描述
因为nginx的默认80端口被系统占用，所以此处我更改为了8080，可自行调整。

通过桌面ip+nginx端口就可访问
在这里插入图片描述
4.code-server（网页版的vscode）
效果：可以当真实的vscode使用，可开发
这个也是最难的一个，最容易出错的一个。
如果配置好了，没有太大问题，但是它如果默认安装了，则有个致命bug，就是他的文件都在server内部，如果修改了【容器详情】的任意配置再启动，就会自动格式化，为了解决这个问题，需要将核心配置映射到自己的数据磁盘上。
在这里插入图片描述
5.运行镜像之前，一定要配置好运行环境
一定要将文件映射到系统数据盘上，否则修改配置会重置，数据会丢失！！！

三、核心环境配置流程文档

注意：这些命令都是在code-server的终端中执行的！！！

1.安装code-server【linuxserver/code-server】Code-server → https://coder.com/【自定义虚拟机推荐】GitHub → https://github.com/linuxserver/docker-code-serverDocker Hub → https://hub.docker.com/r/linuxserver/code-server【FnOS推荐】环境变量（-e）
env	说明
TZ=Europe/London	设置时区，在国内的话可以使用 Asia/Shanghai
PASSWORD=password	Web界面的密码，如果不设置则不会启用认证，password自定义
SUDO_PASSWORD=password	如果设置了该项，则在服务器的终端上用该密码使用sudo，password自定义
PROXY_DOMAIN=code-server.my.domain	反向代理相关的设置，可不配置# 注意 以上环境变量，我就配置了如下两个
PASSWORD 是vscode页面锁屏密码，可设一层保护
SUDO_PASSWORD 是server的sudo命令需要输入的密码（最好配置一下，否则执行sudo命令的时候不知道密码，无密码也不行）往后的配置建议先修改镜像源，否则过慢
因为fnos没有vim，所以先使用nano
nano 是一个在 Linux 系统中广泛使用的文本编辑器，以其简单易用而受到初学者的欢迎。以下是 nano 编辑器的一些常用命令和操作：
启动 nano 编辑器：
打开现有文件：nano 文件名
创建新文件：如果指定的文件不存在，nano 会自动创建一个新的空白文件。
保存文件：
按下 Ctrl + O，然后按 Enter 键保存当前编辑的文件。
退出 nano 编辑器：
按下 Ctrl + X 退出 nano。如果文件有未保存的修改，nano 会提示您是否要保存更改。
光标移动：
使用方向键上下左右移动光标。
Ctrl + A 移动到行首。
Ctrl + E 移动到行尾。
文本编辑：
Backspace 删除光标前的字符。
Delete 删除光标后的字符。
Ctrl + K 剪切当前行。
Ctrl + U 粘贴最近剪切的内容。
文本搜索：
Ctrl + W 向前搜索字符串。
Alt + W 向后搜索字符串。
撤销和重做：
Alt + U 撤销上一步操作。
Alt + E 重做上一步撤销的操作。
帮助：
Ctrl + G 显示帮助文档。
语法高亮：
Alt + Y 语法高亮。
显示行数：
在打开文件时加上参数 -c，例如 nano -c 文件名.txt，nano 会显示行数。
或者在编辑文件时使用快捷键 Ctrl+C 来显示当前光标所在的行数和列数。
若要总是显示行号，可以编辑 nano 的配置文件，在终端中输入 nano ~/.nanorc，键入 set constantshow，然后保存并退出。2.下载过慢-更改镜像源（后续就可vim编辑了）
nano /etc/apt/sources.list-------------------完整如下-start------------------
# deb http://archive.ubuntu.com/ubuntu/ noble main restricted
# deb-src http://archive.ubuntu.com/ubuntu/ noble main restricted
# deb http://archive.ubuntu.com/ubuntu/ noble-updates main restricted
# deb-src http://archive.ubuntu.com/ubuntu/ noble-updates main restricted
# deb http://archive.ubuntu.com/ubuntu/ noble universe multiverse
# deb-src http://archive.ubuntu.com/ubuntu/ noble universe multiverse
# deb http://archive.ubuntu.com/ubuntu/ noble-updates universe multiverse
# deb-src http://archive.ubuntu.com/ubuntu/ noble-updates universe multiverse
# deb http://archive.ubuntu.com/ubuntu/ noble-security main restricted
# deb-src http://archive.ubuntu.com/ubuntu/ noble-security main restricted
# deb http://archive.ubuntu.com/ubuntu/ noble-security universe multiverse
# deb-src http://archive.ubuntu.com/ubuntu/ noble-security universe multiversedeb https://mirrors.aliyun.com/ubuntu/ noble main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ noble main restricted universe multiversedeb https://mirrors.aliyun.com/ubuntu/ noble-security main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ noble-security main restricted universe multiversedeb https://mirrors.aliyun.com/ubuntu/ noble-updates main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ noble-updates main restricted universe multiverse# deb https://mirrors.aliyun.com/ubuntu/ noble-proposed main restricted universe multiverse
# deb-src https://mirrors.aliyun.com/ubuntu/ noble-proposed main restricted universe multiversedeb https://mirrors.aliyun.com/ubuntu/ noble-backports main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ noble-backports main restricted universe multiverse
-------------------完整如下-end--------------------3.安装vim
sudo apt-get update
sudo apt-get install vim
一路y即可输入which vim
如果有打印出vim的路径，则已安装成功4.安装zsh
sudo apt-get install zsh一路y即可安装ohmyzsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
或者
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 【推荐】将zsh设置为默认
cat /etc/shells执行
chsh -s /bin/zsh
输入密码即可默认主题为
robbyrussell配置zsh插件【下载插件】
cd .oh-my-zsh/custom/plugins进入到插件目录后，直接克隆即可
git clone https://github.com/zsh-users/zsh-autosuggestions.git
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git修改~/.zshrc追加插件【z extract默认已经有了】
plugins=(git zsh-autosuggestions zsh-syntax-highlighting z extract)自动提示插件 zsh-autosuggestions
代码高亮插件 zsh-syntax-highlighting从此输入命令有了历史提示5.node环境安装
nvm安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash找到.bashrc和~/.zshrc追加如下内容（注意：如果只追加.bashrc，则zsh下不生效）
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
设置镜像-追加
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/安装node
nvm install 20.18.0设置npm镜像
npm config set registry https://registry.npmmirror.com/环境验证
node -vnpm -v
有版本号输出即可由此就安装完成了，并且搭建了一个自己本地的开发环境，以后只需要将镜像打包，可以随意迁移至其他系统

镜像源更换
在这里插入图片描述
vim验证

zsh安装（顺序，安装ohmyzsh之前必须先安装zsh）

ohmyzsh安装

zsh插件安装

注意plugins和最后面的环境追加。
如此按照流程配置完成后，即可享用vscode开发了。
效果如下：

其他的环境和系统亮点，就需要你自己慢慢探索了，比如系统备份到百度网盘等，同步百度网盘系统资源到系统等~~~

注意：不要轻易升级code-server，因为sudo安装的环境都在server内，升级后需要从头再来一遍~~~