Linux Basic Education for Front-end Engineer

This article is published in NIJIBOX Advent Calendar 2019.


Why i wrote this article

At the company I used to work for, I touched server-side languages and DB for about two years. It's been exactly one year since I joined the current company and changed jobs to the front end. I've learned a lot over the past year, but I've noticed one thing. that is, " Even front-end engineers have a lot of opportunities to touch Linux. "

I don't think it's fatal to not know the details of Linux in front-end development. That doesn't mean "** I don't know Linux". I use it without knowing it **. I think Linux is such a field for front-end engineers. However, it's a little different to take the time to explain Linux to a junior front-end engineer who came in with no experience as an engineer ... **.

In such a case, I would like to write an article that can be handed over to juniors, saying "** If you look at this article, it's okay for the time being **".

When Linux knowledge is useful

--When creating and operating a development environment (almost this) --operation of macOS

When you have to operate and investigate the development environment prepared for a large-scale service, you can't do anything without knowledge of Linux. You should have the opportunity to take great care of personal development such as docker and VirtualBox. Strictly speaking, macOS is based on Unix knowledge, but more on that later.

What is Linux

One of the operating systems, like Windows and mac

--Currently, it is widely used mainly as an OS for servers. -** Because it is OSS (open source software), it is free, and anyone can freely obtain, modify, and redistribute it **

The predecessor of Linux was Unix

--Unix is a very simple and easy-to-use OS developed in the United States in 1969. ――It became a popular OS because it was easy to use and free, but after that it started to charge a license fee. -** macOS is based on Unix **, so you can operate the terminal with almost Unix commands **

Linux born there

――Since the easy-to-use Unix became troublesome such as licensing, Finnish student Linus Torvalds created an original OS like ** Unix, which is Linux ** (Linus × Unix) --The Linux code was distributed free of charge, so it quickly became a popular OS. --Now, Amazon Linux and Android, which are often used for various AWS services, also use Linux-based OS.

Linux for both CentOS and Ubuntu

What is a Linux distribution?

――The CentOS that you often take care of at work is exactly" ** one of the Linux distributions ** ". --The Linux created by Linus is called the Linux kernel to be exact. --The Linux distribution is based on the Linux kernel and is a collection of libraries for immediate use. ――Various companies and organizations are developing and distributing it for a fee or free of charge.

3 strains

Linux distributions are broadly divided into three lines.

-** Red Hat system ** --A distribution that follows the flow of Red Hat Linux developed by Red Hat. --Famous for paid Red Hat Enterprise Linux (commonly known as RHEL) for enterprises, and free Cent OS and Fedora

-** Debian system ** --Distribution derived from Debian GNU Linux ――Easy-to-use ʻUbuntu is a very popular OS, and is the 4th most popular Linux distribution in the world (as of December 2019) [^ 1] --Linux Mint`, which is very popular as a desktop OS, is also the 4th most popular Linux distribution in the world (as of December 2019) [^ 1]

-** Slackware system ** --The oldest distribution derived from Slackware ――It's a little difficult for beginners

Commands you want to remember

cd Meaning of change directory. Moves to the specified directory. If you don't know this, you can't go anywhere.

$cd directory name
$ cd /app/src/components/

Move to home directory

$ cd ~

Move to the next higher directory

$ cd ..

By the way, if you press the tab key while entering the directory name, the input completion will be effective.

pwd Meaning of present working directory. It is not an abbreviation for password. It will tell you where you are now. If you get lost, hit it.

When on the desktop

$ pwd

ls Meaning of list segments. Displays directory and file information.

$ pwd
$ ls               package-lock.json       public
node_modules            package.json            src

For this ls command, I would like to remember the following two options.

ls -a Hidden files are also displayed.

$ ls -a
.                       .git                    node_modules            public
..                      .gitignore              package-lock.json       src
.DS_Store                    package.json

ls -l It also displays permissions, number of files, user, size, modification date and time.

$ ls -l
total 1048
-rw-r--r--     1 username  staff    2881  9  7 13:03
drwxr-xr-x  1011 username  staff   32352  9 14 16:41 node_modules
-rw-r--r--     1 username  staff  526882  9 14 16:38 package-lock.json
-rw-r--r--     1 username  staff     702  9 14 16:38 package.json
drwxr-xr-x     9 username  staff     288  9 14 16:38 public
drwxr-xr-x     8 username  staff     256  9 14 16:38 src

If you want to specify multiple options at the same time, write as follows.

$ ls -la

touch Create a new file.

$touch file name
$ touch sample.js


Meaning of make directory. Create a new directory.

$mkdir directory name
$ mkdir actions


Meaning of move. Move the file (directory) / rename the file.

Move files

$File before moving mv/File after moving directory/directory
$ mv index.js src/

File name change

$file name before mv change/File name after changing the directory name/Directory name
$ mv changeBefore.html changeAfter.html

cp Meaning of copy. Duplicate files and directories.

$cp Replication source file name/Directory name Copy destination file name/Directory name
$ cp sample.text sample_copy.text

cp -r This option is used when you want to copy the entire contents of a directory.

$ ls

$ cd dir1/

$ ls

$ cd ..

$ cp -r dir1/ dir1_copy/

$ ls
dir1		dir1_copy

$ cd dir1_copy/

$ ls


Meaning of remove. Delete files and directories.

$rm file name/Directory name
$ rm sample_copy.text

If you want to delete the directory, add the -r option like the cp command.


Meaning of concatnate. Concatenate and display the file contents.

View file

$cat file name
$ cat index.html 
<h1>Hello, world!</h1>

Concatenated display of file contents (Only concatenated on standard output, do not overwrite files directly)

$ cat sample.html 
<p>This is a sample program.</p>

$ cat index.html  sample.html 
<h1>Hello, world!</h1>
<p>This is a sample program.</p>

diff You can compare the two files and see the difference.

$ cat index.html 
<h1>Hello, world!</h1>
<p>This is first document.</p>

$ cat index2.html 
<h1>Hello, world!</h1>
<p>This is second document.</p>

$ diff index.html index2.html 
< <p>This is first document.</p>
> <p>This is second document.</p>

Commands that you may want to know

chmod Meaning of change mode. It's called Chomod. Change file and directory permissions.

$chmod Permission file name you want to change

If you want anyone to be able to read, write and execute

$ ls -l
total 16
-rw-r--r--   1 1 username  staff   54 12 15 14:02 index.html

$ chmod 777 index.html

$ ls -l
total 16
-rwxrwxrwx   1 username  staff   54 12 15 14:02 index.html

The following article is easy to understand about how to read permissions. Linux permission check and change (chmod) (for super beginners)

chown The meaning of change owner. It is often called Choon. Change the owner of a file or directory.

$chown owner filename/Directory name

When changing the owner of a file

$ ls -l
-rwxrwxrwx   1 username  staff   54 12 15 14:02 index.html

$ chown user01 index.html

$ ls -l
-rwxrwxrwx   1 user01  staff   54 12 15 14:02 index.html

Change permissions for each directory

$ chown -R user01 src/

ssh Log in to the remote host with an SSH connection.

$ssh [email protected]
$ ssh [email protected]

vi You can edit the file.

$vi file name
$ vi index.html

The above command will switch to the screen below.

<h1>Hello, world!</h1>
<p>This is first document.</p>
"index.html" 2L, 54C

Please note that it cannot be edited like a normal text editor. Press ʻi on the keyboard to enter insert mode, where you can add or delete characters. Press ʻesc to exit insert mode. Exit without saving with : q, save with: w, save with : wq and exit. There are various key operations for editing with the vi command, but they are omitted here.

in conclusion

I thought that I wouldn't see many articles about what Linux is and the required commands. I intend to pack the minimum that beginners want to remember. Please comment if there is something that "I want you to know this even if you are a beginner or front end". Now I'm not afraid of the black terminal anymore! !! !! !!

Reference URL

[^ 1]: See DistroWatch Page Hit Ranking. From the data of the last year.

Recommended Posts

Linux Basic Education for Front-end Engineer
Linux operation for beginners Basic command summary
[Basic] linux command
Basic LINUX commands
Linux command <Basic 1>
2-2. Input for becoming a WEB engineer (Linux basics)
2-1. Input for becoming a WEB engineer (Linux basics)
FX_tool for Hython Basic02
[For memo] Linux Part 2
Linux basic command memorandum
Basic knowledge about Linux
[Linux] Basic command summary
What is Linux for?
Linux command for self-collection
FX_tool for Hython Basic01
CLI and Linux basic terms
Linux Kernel Build for DE10nano
Linux distribution recommended for beginners
Flutter platform channels for Linux
Linux Command Dictionary (for myself)
Basic commands for file operations
Linux command memorandum [for beginners]
Convenient Linux shortcuts (for beginners)