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

news2024/10/11 23:39:31

利用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搭建虚拟云桌面,并搭建前端开发环境(一)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2206234.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker安装Minio+SpringBoot上传下载文件

Docker 安装Minio docker pull minio/minio docker images REPOSITORY TAG IMAGE ID CREATED SIZE minio/minio latest 162489e21d26 7 days ago 165MB nginx latest 7f553e8bbc89 7 days ago 192MB # 外挂磁盘存储使用 mkdir -p…

高清实拍类型视频素材网站推荐

大家好,我是一名新媒体创作者,今天想和大家分享一些平时常用的高清实拍类型视频素材资源。作为新媒体人,视频素材的质量直接影响作品的受欢迎程度,因此找到优质的视频素材库非常重要。接下来,我将为大家推荐一些非常优…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-12

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-12 1. Autoregressive Large Language Models are Computationally Universal D Schuurmans, H Dai, F Zanini - arXiv preprint arXiv:2410.03170, 2024 https://arxiv.org/pdf/2410.03170 自回归大型语言模型…

太速科技-628-基于VU3P的双路100G光纤加速计算卡

基于VU3P的双路100G光纤加速计算卡 一、板卡概述 基于Xilinx UltraScale16 nm VU3P芯片方案基础上研发的一款双口100 G FPGA光纤以太网PCI-Express v3.0 x16智能加速计算卡,该智能卡拥有高吞吐量、低延时的网络处理能力以及辅助CPU进行网络功能卸载的能力…

UE5安卓,多指点击时会调出控制台

参考文章: How to turn off "console window" on swipe (my Lemurs keep opening it!) - Platform & Builds / Mobile - Epic Developer Community Forums (unrealengine.com) 准确来说是4只手指同时在屏幕中按下。这个控制台能像编辑器那样&#xf…

浏览器和客户端结合的erp系统,java控制浏览器操作自动登录,socket客户端通信进行表单赋值

java做一个toB的客户端操作系统,客户端和web的结合; 主要是使用java编写客户端代码,采用selenium控制浏览器,主要是用到selenium自动化测试的功能; javaEE 项目调用 selenium使用谷歌控件chromedriver.exe控制浏览器…

小米员工薪资一览表

小米 之前我们写了 京东 和 华为OD,不少同学在后台点名要看小米的职级和薪资。 没问题,在了解小米的薪资分布前,我们要先对小米职级有个初步概念。 小米职级从 13 到 22,共 10 级。 title 大致分为 专员(13~15级&#…

go语言中的template使用

在 Go 语言中,你可以使用 text/template 或 html/template 包来创建和执行模板。以下是一个基本示例,展示如何使用 Go 的模板语法: 1. 导入包 import ("os""text/template" )2. 创建数据结构 定义一个数据结构&#x…

反向指标KDJ?只要做个简单的魔改,就能一直在新高路上!

KDJ又叫随机指标,是一个适用于短线的技术指标,在股票、期货等市场受到广泛使用。在老Q看来,这是一个很有趣的指标。但是如果你按照经典用法来使用的话,它就变成财富毁灭机了! 下边,老Q就一步步从统计原理、…

【阿里云中的大数据组件】技术选型和数仓系统流程设计 --- 阿里云的组件简介

文章目录 一、DataHub二、DataWorks 和 MaxCompute三、RDS四、技术选型和对比1、阿里云技术跟之前的技术对比2、技术选型 五、系统流程设计 一、DataHub 通俗来说这个 DataHub 类似于传统大数据解决方案中 Kafka 的角色,提供了一个数据队列功能 对于离线计算&#x…

ES 全文检索完全匹配高亮查询

我们ES会将数据文字进行拆词操作,并将拆解之后的数据保存到倒排索引当中几十使用文字的一部分也能查询到数据,这种检索方式我们就称之为全文检索,ES的查询结果也会倒排索引中去查询匹配 下面的查询结果中输入的词,就是输入小也可…

PDF文件怎么添加水印?这里有6个方法

PDF文件怎么添加水印?在职场中,随着信息数字化的普及,PDF文件已成为我们日常工作中不可或缺的一部分。然而,如何在这些文件中确保信息的安全性和版权保护,成为了许多企业面临的重要课题。其中,给PDF文件添加…

Android常用组件

目录 1. TextView 控件 常用属性: 1)android:text: 2)android:gravity: 3)android:textSize: 4)android:textColor: 5)android:background: 6)android:padding: 7)android:layout_width 和 andr…

Web集群服务-Nginx

1. web服务 1. WEB服务:网站服务,部署并启动了这个服务,你就可以搭建一个网站 2. WEB中间件: 等同于WEB服务 3. 中间件:范围更加广泛,指的负载均衡之后的服务 4. 数据库中间件:数据库缓存,消息对列 2. 极速上手指南 nginx官网: nginx documentation 2.1 配置yum源 vim /etc/…

spock 并行执行单元测试

继上一篇 使用 mvnd之后 发现 deploy 公共库还是需要十分钟左右、后面发现跳过所有单元测试之后、deploy 只需要 4 分钟。 所以想着从提升单元测试的速度来加快 deploy 。 前前后后最终还是按官方的配置并行执行单元测试 链接1 链接2 看了下打印的日志、依赖的是默认的 Fork…

python环境的配置

VScode的安装 https://code.visualstudio.com/download python环境利用anaconda进行安装 https://www.anaconda.com/download/ 点击第三个 conda create -n python python3.8 #建立环境activate python #激活环境路径示例: D:\Anaconda3\envs 打开vscode 配置…

Java学习第九天

相同包下的类可以直接访问,不同包下的类需要导包才可以使用,导包格式:import 包名.类名 final关键字: 常量: 枚举:一种特殊的类型(反编译之后本质就是实例常量,自己定义的类,创建了几…

aws(学习笔记第五课) AWS的firewall SecurityGroup,代理转发技术

aws(学习笔记第五课) AWS的firewall– SecurityGroup,代理转发技术 学习内容: AWS的firewall– SecurityGroup代理转发技术 1. AWS的filewall– SecurityGroup 控制进入虚拟服务器的网络流量 通常的firewall(防火墙)配置 AWS上使用安全组进行网络流量…

linux安装Go ImageMagick插件

ImageMagick安装 在程序中需要对图片转化时需要使用到gopkg.in/gographics/imagick.v2/imagick库,但是这个库需要在本地安装ImageMagick插件。 有些机器在软件库是有的,可以直接下载安装,没有的话推荐源码安装。 ImageMagick中文站 ImageM…

使离医院最远的村庄到医院的路程最短

给定n个村庄之间的交通图,若村庄i和j之间有道路,则将顶点i和j用边连接,边上的Wij表示这条道路的长度,现在要从这n个村庄中选择一个村庄建一所医院,问这所医院应建在哪个村庄,才能使离医院最远的村庄到医院的…