前端入坑Linux指因(上)

简介: 前端入坑Linux指因(上)

最近想开一个新坑,每日学习一条Linux命令。有兴趣的大家可以一起来学撒。推荐大家购买自己的一台小的服务器,这样每次学习能看到效果也是十分有成就感滴!


免密登录(11/19)



1.先用ssh登录自己的服务器


image.png

但是笔者之前已经配置过免密登录了,但是我又重置了服务器密码。所以就报了这个错误。 根据提示,我们把本地的.ssh文件夹下的know_hosts里面相关的信息删除就好了。

image.png

欧克,我们现在正常登录上去了。接下来可以配置免密登录了。

image.png


2.配置免密登录


配置免密登录我们需要修改几个配置文件,在我们的本地中修改ssh下面的config文件


vim ~/.ssh/config

修改config文件


Host 自己起的别名 
    HostName ip地址
    User 用户名
    Port 端口号

我们再来ssh登录一下。说明我们配置成功了,但是还没有免密登录。

image.png


接下来就是配置免密登录了,就可以不用输入密码了!!!


方式一:将本地的Public-key复制到服务器里面。


cat ~/.ssh/id_rsa.pub

在vim编辑器里面,我们可以使用ctrl + insshift + ins实现复制粘贴。如果本地没有 ~/.ssh/id_rsa.pub,可以使用ssh-keygen生成一个。

image.png

进入服务器,编辑authorized_keys文件,把公钥全部复制进去即可。


vim ~/.ssh/authorized_keys

现在,我们直接ssh登录我们自己起的别名就可以了

image.png


方式二 ssh-copy-id


ssh-copy-id [服务器别名]

这个命令就可以直接将本地的公钥上传到你的服务器里面,是不是很方便。


方式三


cat ~/.ssh/id_rsa.pub | ssh user@ip "cat >> ~/.ssh/authorized_keys"

附上链接:gist.github.com/nickbayley/…

小白也还没有看懂,就不解释了。

欧克,今天的任务到此就结束啦。


ssh隧道(11/20)



ssh -NL


当我们在宿主机(个人的 mac、windows 等笔记本)本地进行开发时,只需要在浏览器打开 localhost,便可以愉快地进行开发。

当我们在远程服务器中对某一 web 服务进行开发并测试时,我们很难在宿主机本地进行调试。


我们无法在宿主机中访问服务器中的服务。但,此时可借助于 ssh 隧道,将服务器端口号映射到宿主机本地,则可以愉快地将服务器作为开发环境了。

将远程服务器的端口号可在本地进行访问。

以下命令将远程服务器中的 localhost:5000 映射到本地的 5000 端口,在浏览器中可直接输入 localhost:5000 进行开发调试。


# 在远程服务器开启一个 5000 端口号的服务,此时需要 node 环境
root$ npx serve . -p 5000

image.png


在我们本地上面,进行如下操作


# 将远程服务器的 5000 端口供本地使用,此时窗口会被占用
# -N: 用以端口转发
# -L: 将服务器中 localhost:5000 映射到本地 5000 端口
local$ ssh -NL 5000:localhost:5000 root(服务器别名)
# 此时需要另开一个窗口,用以执行命令
local$ curl localhost:5000

笔者用的是腾讯云的轻量应用服务器,是没有安全组的,然后我开放了5000这个端口。按理来说安全组放开就可以了,而且这是通过 ssh 隧道连接的,其实不放开 5000 端口号也是没问题的。


但是这里好像直接寄了

image.png

emm我这个端口应该是启动启来的,是没有问题的

image.png

换了一个端口尝试还是一样的问题,哎还没有找到解决的方案?

哎!终于知道了,5000:localhost:5000是连在一起的,中间没有空格符,我太难了

欧克,现在我们可以在本地调试我们服务器上的端口了,在浏览器中输入localhost:5000。但是我这里是拒绝访问。这又是啥问题呢?

image.png

哎,折腾了一会发现其实是没有问题的。这里特别感谢山月老师掘金账号帮我远程调调试。其实有些时候我们再复现一遍问题,或许问题自然而然就会解决了。

其实刚刚之所以会拒绝访问,是因为我的那个窗口挂掉了。所以直接访问不起了!

我们再来重新试一遍

image.png

image.png

成功!

image.png

后面我们可以用tmux将这个窗口挂起,就不会出现这种问题了。


ssh -NR


上述我们是在本地访问服务器端口,现在我们配置一下服务器访问本地的端口

我们在将本地的5000端口映射到远程服务器的5000端口


npx serve . -p 5000
ssh -NR 5000:localhost:5000 root

image.png

image.png

服务器


curl localhost:5000

image.png大功告成!!!


rsync(11/21)



快速高效,支持断点续传、按需复制的文件拷贝工具,并支持远程服务器拷贝

强烈建议在本地也使用rsync替换cp进行文件拷贝。

如果是windows电脑的话,需要配置一下rsync这个指令


远程复制


拷贝数据,习惯使用 -lahzv 结合命令。

如果需要拷贝至远程服务器,则以远程服务器名开头即可。


# 将本地的 react 拷贝到 shanyue 服务器的 ~/Documents 目录
# -l:--links,拷贝符号链接
# -a:--archive,归档模式
# -h:--human-readable,可读化格式进行输出
# -z:--compress,压缩传输
# -v:--verbose,详细输出
# chenyyy: 我的远程服务器
$ rsync -lahzv ~/Documents/react shanyue:/home/shanyue/Documents

image.png另一边可以接受到

image.png


归档模式(11/22)


rsync 归档模式最大的好处是可以拷贝元属性,如 ctime/mtime/mode 等等,这对于静态资源服务器相当有用!!!


什么是属性和原属性?

资源具有属性。每个属性都具有名称、类型和值;它们可能还具有与其相关联的其他元属性(例如:值、大小或有效性指示)。


# 查看其 data.txt 信息
$ ls -lah | grep data.txt
-rw-r--r--  1 root root    0 Nov 21 04:53 data.txt
# data.txt 使用 rsync 拷贝
$ rsync -lahz data.txt  data1.txt
# data.txt 使用 cp 拷贝
$ cp data.txt  data2.txt
# 观察可知
# rsync 修改时间/mode 与源文件保持一致
# cp 修改时间为当前最新时间,mode 也不一致
-rw-r--r--  1 root root    0 Nov 21 04:53 data.txt
-rw-r--r--  1 cwl  cwl     0 Nov 21 04:53 data1.txt
-rw-r--r--  1 cwl  cwl     0 Nov 21 23:24 data2.txt


拷贝目录


拷贝目录,则需要看原目录是否以 / 结尾。

  • 不以 / 结尾,代表将该目录连同目录名一起进行拷贝
  • 以 / 结尾,代表将该目录下所有内容进行拷贝


# 这两个效果一样的
rsync -lahz program/ program1
rsync -lahz program/ program2/

image.png


rsync -lahz program  program5
rsync -lahz program  program6/

image.pngimage.png

是否拷贝目录,主要是看原目录是否以/结尾


思考题:

1.在使用 rsync 传输前端项目时,如何忽略 node_modules 目录


rsync --exclude node_modules

2.如何在nodejs中实现cp命令

3.为何说保留复制文件时的元属性,对静态资源服务器有益

第一次传输

image.png

我尝试了 rsync 重复复制同一个文件到服务器, 发现只有第一次是实际上传的, 后续几次都是只有简单的一些信息,数据传输量不大。这一块的传输优化, 是不是就是基于文件的元属性,比如 ctime mtime 这些来的呢? 以及是像昨天晚上说的 etag 这种文件新鲜度计算的方式么?(留个疑问)


目录和切换操作(11/23)



cd

cdchange directory,切换当前工作目录。

除指定目录外,还有以下特殊目录。

  • .: 当前工作目录。
  • ..: 父级工作目录。
  • /: 根目录。
  • ~: home 目录,即当前的用户目录,同时也可用环境变量 $HOME 表示。

另外,cd - 为进入上一次的工作目录,如同 git checout - 切回上次的分支一样。


pwd


pwdprint working directory,打印当前工作目录。


ls


ls,列出某个工作目录的内容。

ls 单指令不会列出以 . 开头的文件,比如 .git、 .babelrc、.eslintrc 均不会默认显示。

而使用 -a,将会把所有文件列出。

在日常中,常使用 ls -lah 列出工作目录内容。

-l: 使用长列表格式

-a: 列出所有文件,包括以 . 开头的文件

-h: 以可读的形式表示文件体积,比如 100M

image.png

tree


tree,以树状图的形式列出文件。


# -a列出所有文件
# 显示指定层级
tree -L n

image.png

使用 tree/exa 列出目录树时,如何忽略 .gitignore 中文件内容


tree -I "node_modules"

image.png


用户相关(11/24日)



whoami


# 打印当前的用户名
whoami

id

打印当前用户 ID 及用户组 ID。

在 Linux 中 root 用户为 0,第一个用户 id 默认为 1000

image.png

# -u: --user,打印 userId
# -n: --name,``打印 userId 所对应的用户名
$ id -un

image.png


who


打印出当前有哪些用户在登录状态。


# -u: 打印出登录用户的 IDLE/PID。
# -H: 打印标头,显示标题栏信息
$ who -uH

image.pngtime表示登录的时间,IDLE表示活跃的时间,.表示当前正在活跃


w


一个比 who -uH 更好用的,可查看有几人登录的工具。

image.png


last


打印出该服务器的历史登录用户。


# 打印最近10批
last -n 10

image.png


作业


  1. 如何打印某一天的服务器上有多少个登录用户


last -s 2022-7-13 -t 2022-7-14
  1. 如何打印你自己服务器的user id 及user name


id / whoami


chmod/chown(11/25)



chown


chown,change owner。更改文件的所属用户及组。

通过 ls 命令,第三第四列便是文件所属用户及用户组。

image.png更改权限到ubuntu组

image.png


chmod


chmod,change mode。更改文件的读写权限。

mode 指 linux 中对某个文件的访问权限。

通过 stat 可获取某个文件的 mode。


# -c:--format
# %a:获得数字的 mode
$ stat -c %a ubun.txt
644
$ stat -c %A ubun.txt
-rw-r--r--

在了解 mode 之前,我们先看一下文件的权限。

  • r: 可读,二进制为 100,也就是 4
  • w: 可写,二进制为 010,也就是 2
  • x: 可执行,二进制为 001,也就是 1

而 linux 为多用户系统,我们可对用户进行以下分类。

  • user。文件当前用户
  • group。文件当前用户所属组
  • other。其它用户

再回到刚才的 644 所代表的的释义


# rw-:当前用户可写可读,110`,即十进制 6
# r--:当前用户组可读,10`0,即十进制 4
# r--:其它用户可读,10`0,即十进制 4
# 所以加起来就是 644`
-rw-r--r--


另外也可以以可读化形式添加权限,如下所示:


# u: user
# g: group
# o: other
# a: all
# +-=: 增加减少复制
# perms: 权限
$  chmod [ugoa...][[+-=][perms...]...]
# 为 yarn.lock 文件的用户所有者添加可读权限
$ chmod u+r yarn.lock
# 为所有用户添加 yarn.lock 的可读权限
$ chmod a+r yarn.lock
# 为所有用户删除 yarn.lock 的可读权限
$ chmod a-r yarn.lock

当我们新建了一个文件时,他默认的 mode 是多少


普通用户:664
root用户:644
664 = -rw-rw-r--
644 =  -rw-r--r--


目录
打赏
0
0
0
0
3
分享
相关文章
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
1301 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
Linux 技术架构:前端、后端与数据库的完美融合
【8月更文挑战第25天】本文深入剖析了Linux操作系统的技术架构,重点介绍了前端、后端及数据库三大核心组成部分。Linux前端技术不仅涵盖了图形用户界面(GUI),包括GNOME、KDE等桌面环境,还涉及HTML、CSS、JavaScript等Web前端技术及其相关框架。后端技术则聚焦于Python、Java等多种编程语言、Apache和Nginx等Web服务器以及MySQL、PostgreSQL等数据库管理系统。Linux数据库技术覆盖了关系型和非关系型数据库,如MySQL、MongoDB等,并提供了多种数据库管理工具。
150 0
【Flutter前端技术开发专栏】Flutter在桌面应用(Windows/macOS/Linux)的开发实践
【4月更文挑战第30天】Flutter扩展至桌面应用开发,允许开发者用同一代码库构建Windows、macOS和Linux应用,提高效率并保持平台一致性。创建桌面应用需指定目标平台,如`flutter create -t windows my_desktop_app`。开发中注意UI适配、性能优化、系统交互及测试部署。UI适配利用布局组件和`MediaQuery`,性能优化借助`PerformanceLogging`、`Isolate`和`compute`。
516 0
【Flutter前端技术开发专栏】Flutter在桌面应用(Windows/macOS/Linux)的开发实践
【Linux】Nginx安装使用负载均衡及动静分离(前后端项目部署),前端项目打包
【Linux】Nginx安装使用负载均衡及动静分离(前后端项目部署),前端项目打包
666 0
Nignx及负载均衡&动静分离->nginx简介,nginx搭载负载均衡提供前后分离后台接口数据上,nginx搭载负载均衡提供前后分离后台接口数据下,前端项目打包,前端项目Linux部署
Nignx及负载均衡&动静分离->nginx简介,nginx搭载负载均衡提供前后分离后台接口数据上,nginx搭载负载均衡提供前后分离后台接口数据下,前端项目打包,前端项目Linux部署
99 0
J2EE项目部署与发布(Linux版本)->jdk&tomcat安装,MySQL安装,后端接口部署,linux单体项目前端部署
J2EE项目部署与发布(Linux版本)->jdk&tomcat安装,MySQL安装,后端接口部署,linux单体项目前端部署
119 0
📚必知必会:写给前端同学常用的linux命令大全-3
⭐️65. date - 显示系统日期和时间 显示当前日期和时间。
131 0
|
8天前
|
Linux系统之whereis命令的基本使用
Linux系统之whereis命令的基本使用
50 23
Linux系统之whereis命令的基本使用
深入解析:Linux网络配置工具ifconfig与ip命令的全面对比
虽然 `ifconfig`作为一个经典的网络配置工具,简单易用,但其功能已经不能满足现代网络配置的需求。相比之下,`ip`命令不仅功能全面,而且提供了一致且简洁的语法,适用于各种网络配置场景。因此,在实际使用中,推荐逐步过渡到 `ip`命令,以更好地适应现代网络管理需求。
34 11
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等