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

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

利用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内,升级后需要从头再来一遍~~~

利用FnOS搭建虚拟云桌面,并搭建前端开发环境(一)

创作不易,查了好多文档,才形成最终版!转载请注明出处!

相关文章:

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

利用FnOS搭建虚拟云桌面,并搭建前端开发环境 二 一、docker镜像二、环境配置三、核心环境配置流程文档 利用FnOS搭建虚拟云桌面,并搭建前端开发环境(一) 上一章安装了飞牛FnOS系统,界面如下,这一张配置前端…...

【Python】Qwen-VL-7B box

VLLM-Qwen2-VL-7B-Instruct import cv2# 读取图像 image_path haibaoA.png # 替换为图像的路径 image cv2.imread(image_path)# 定义框的坐标 (x1, y1) 是左上角,(x2, y2) 是右下角 x1, y1 200, 550 # 左上角坐标 x2, y2 799, 750 # 右下角坐标 h, w image.…...

echarts按需引入解决项目大小问题

背景: 按需加载缩减项目大小,提升项目性能和可用性 实现: 创建echarts.js main.js进行配置 页面中引用 效果 全量导入 按需加载:...

天气预报echarts

如上图&#xff0c;可以切换温度&#xff0c;降水量&#xff0c;风力风向和空气质量 <template><el-radio-group v-model"selectedData" change"updateChart"><el-radio-button label"temperature">温度</el-radio-butto…...

Kafka-初识

一、Kafka是什么&#xff1f; Kafka是一个高度可扩展、弹性、容错和安全的分布式流处理平台&#xff0c;由服务器和客户端组成&#xff0c;通过高性能TCP网络协议进行通信。它可以像消息队列一样生产和消费数据。可以部署在裸机硬件、虚拟机和容器上&#xff0c;也可以部署在本…...

Redis的主要的特性和优势 ?

Redis 的主要特性 内存存储&#xff1a;Redis 将数据存储在内存中&#xff0c;这使得读写操作非常快速。它还支持将数据持久化到磁盘&#xff0c;以防止数据丢失。 丰富的数据结构&#xff1a;Redis 不仅支持简单的字符串键值对&#xff0c;还支持更复杂的数据结构&#xff0c…...

yolov5-7.0模型DNN加载函数及参数详解(重要)

yolov5-7.0模型DNN加载函数及参数详解&#xff08;重要&#xff09; 引言yolov5&#xff08;v7.0&#xff09;1&#xff0c;yolov5.h(加载对应模型里面的相关参数要更改)2&#xff0c;main主程序&#xff08;1&#xff09;加载网络&#xff08;2&#xff09;检测推理&#xff0…...

StringEntity 用于将字符串内容作为 HTTP 请求实体(请求体)

StringEntity 类是 Apache HttpClient 库中的一个类&#xff0c;它用于将字符串内容作为 HTTP 请求实体&#xff08;请求体&#xff09;。这个类非常适合用于发送 JSON、XML 或其他需要以字符串形式发送的数据。以下是 StringEntity 类的一些常用方法和代码案例&#xff1a; …...

校园系统校园小程序 论坛校园圈系统失物招领、闲置二手、跑腿外卖等校园圈子系统应该具备有哪些功能

针对校园系统、校园小程序、论坛校园圈系统以及失物招领、闲置二手、跑腿外卖等具体功能&#xff0c;一个综合性的校园圈子系统应该具备以下主要功能&#xff1a; 前后端源码查看 一、基础功能 用户注册与登录 提供用户注册和登录功能&#xff0c;支持学生身份验证、手机号验…...

[AWS云]kafka调用和创建

背景:因为因为公司的项目需要使用AWS的kafka&#xff0c;但是在创建和使用过程中都遇到了一些报错和麻烦&#xff0c;毕竟老外的东西&#xff0c;和阿里云、华为使用起来还是不一样。 一、创建&#xff08;创建的配置过程就略了&#xff0c;就是配置一下可用区、型号&#xff0…...

查看 Excel 应用程序中已打开的 Excel 文件的完整路径

要查看 Excel 应用程序中已打开的 Excel 文件的完整路径&#xff08;全路径&#xff09;&#xff0c;你可以通过以下几种方法获取具体路径&#xff0c;尤其是在 VSTO 应用程序中。 方法1&#xff1a;使用 VSTO Excel 外接程序代码 在 VSTO 外接程序代码中&#xff0c;您可以直接…...

学习 RocketMQ 单机部署、消息发送、消息接收

文章目录 RocketMQ 介绍为什么要使用 MQ &#xff1f;RocketMQ 与其他产品对比vs Kafkavs RabbitMQvs ActiveMQ RocketMQ 重要概念部署 Namesrver、Broker、Dashboard快速入门消息生产者消息消费者 消费模式简单消息1&#xff09;同步发送2&#xff09;异步发送3&#xff09;单…...

【计算机网络】CDN

CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;是一种分布式的服务器网络&#xff0c;旨在通过将内容缓存到多个地理位置的服务器上&#xff0c;加速内容的分发和传递。CDN 的主要目的是减少用户访问网站时的延迟&#xff0c;提升用户体验&…...

数据结构:插入排序

1.插入排序 此排序如打扑克牌一样&#xff1b;每次抓牌&#xff0c;把扑克从前向后扒拉&#xff1b;找到合适的位置插入进去—所以叫插入排序&#xff1b; 时间复杂度&#xff1a;O&#xff08;N^2&#xff09; int arr[10] { 9,8,7,6,5,4,3,2,1,0 };//数据太多就不好写了 …...

Nginx反向代理配置与负载均衡配置

简介&#xff1a;整理自黑马程序员苍穹外卖的第11节 nginx是什么&#xff1f; nginx的好处 nginx反向代理配置方式 nginx负载均衡的配置方式 nginx负责均衡策略...

axios 前端与 Django 后端的 POST 交互

背景 自己在写一些油猴脚本&#xff0c;前端需要用 JS&#xff0c;后端是自己的服务&#xff0c;是用 Python 的 Django 框架完成的。 油猴脚本中需要通过 POST 方法&#xff0c;向后端传一些数据&#xff0c;所以前端我用的是 axios 库&#xff0c;后端需要用 Django 处理 P…...

数据结构常用术语

一. 常见术语 数据相关 英文术语中文术语Data数据Data element数据元素Data item数据项Data structure数据结构Logical structure逻辑结构Data type数据类型 指针与存储 英文术语中文术语Pointer指针Sequential storage structure顺序存储结构Linked storage structure链状…...

Flask 轻松上手:从零开始搭建属于你的Web应用

引言 随着互联网技术的发展&#xff0c;Web应用程序的需求日益增长。对于开发者来说&#xff0c;选择一个合适的框架至关重要。Flask以其简洁的设计、高度的可定制性和对各种扩展的良好支持&#xff0c;成为了很多项目的基础。无论你是初学者还是有经验的开发者&#xff0c;掌…...

[MyBatis-Plus]快速入门

介绍 MyBatis-Plus是MyBatis的好朋友, 与MyBatis配合, 实现开发效率的提高 官网: 特点: 润物细无声: 只做增强不做改变, 引入它不会对现有工程产生影响, 如丝般顺滑效率自上: 只需简单配置, 即可快速进行单表CRUD, 从而节省大量时间功能丰富: 代码生产, 自动分页, 逻辑删除, …...

单例模式和读者写者问题

文章目录 10. 线程安全的单例模式10.1 什么是设计模式10.2 什么是单例模式10.3 单例模式的特点10.4 饿汉方式和懒汉方式10.5 单例模式的线程池 11. STL和智能指针的线程安全 问题11.1 STL中的容器是否是线程安全的?11.2 智能指针是否是线程安全的? 12. 其他常见的各种锁13. 读…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...