This article is published in NIJIBOX Advent Calendar 2019.
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 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
Strictly speaking, macOS is based on Unix knowledge, but more on that later.
--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 **
--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 **
――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.
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.
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
-** Debian system **
--Distribution derived from
Debian GNU Linux
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
――It's a little difficult for beginners
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 /Users/username/Desktop
ls Meaning of list segments. Displays directory and file information.
$ pwd /Users/username/Documents/my-app/ $ ls README.md 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 README.md 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 README.md 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.
$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 dir1 $ cd dir1/ $ ls dir2 $ cd .. $ cp -r dir1/ dir1_copy/ $ ls dir1 dir1_copy $ cd dir1_copy/ $ ls dir2
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
Meaning of concatnate. Concatenate and display the file contents.
$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 2c2 < <p>This is first document.</p> --- > <p>This is second document.</p>
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 (abridgement) $ chmod 777 index.html $ ls -l total 16 -rwxrwxrwx 1 username staff 54 12 15 14:02 index.html (abridgement)
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.
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.
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! !! !! !!
[^ 1]: See DistroWatch Page Hit Ranking. From the data of the last year.