利用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-server
Docker 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 multiverse
deb https://mirrors.aliyun.com/ubuntu/ noble main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ noble main restricted universe multiverse
deb https://mirrors.aliyun.com/ubuntu/ noble-security main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ noble-security main restricted universe multiverse
deb 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 multiverse
deb 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 -v
npm -v
有版本号输出即可
由此就安装完成了,并且搭建了一个自己本地的开发环境,以后只需要将镜像打包,可以随意迁移至其他系统
镜像源更换
vim验证
zsh安装(顺序,安装ohmyzsh之前必须先安装zsh)
ohmyzsh安装
zsh插件安装
注意plugins和最后面的环境追加。
如此按照流程配置完成后,即可享用vscode开发了。
效果如下:
其他的环境和系统亮点,就需要你自己慢慢探索了,比如系统备份到百度网盘等,同步百度网盘系统资源到系统等~~~
注意:不要轻易升级code-server,因为sudo安装的环境都在server内,升级后需要从头再来一遍~~~
利用FnOS搭建虚拟云桌面,并搭建前端开发环境(一)
创作不易,查了好多文档,才形成最终版!转载请注明出处!