WSL2에서 웹 개발 환경의 구축 노트(zsh, node, docker 등)

개시하다

인터넷 개발에 대해 말하자면 UNIX 단말기에서 사용하는 Mac는 매우 편리하지만 올해 WSL2가 마침내 정식으로 발표되었다.이렇게 되면 마침내 Windows에서 올바른 웹 개발 환경을 구축할 수 있어서 매우 기쁘다.
뿐만 아니라 WSL2, 윈도 테미널, VS 코드와 같은 편의도구도 꾸준히 출시되고 있고, 맥보다 환경이 편리해지자 윈도로 본격적으로 갈아타기로 했다.
기록 환경 구축.

WSL2 및 Ubuntu 설치

공식 문서처럼.
https://docs.microsoft.com/ja-jp/windows/wsl/install-win10
디스토가 Ubuntu를 선택했어요.

Windows Terminal

마이크로소프트가 순수하다.매우 사용하기 쉽고 업데이트에도 정력이 있어 앞으로도 기대된다.
Microsoft Store에서 Windows Terminal 설치
https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab
설정파일은 JSON 재밌네.
이 근처에서 좋아하는 배색 방안을 찾아라.
https://windowsterminalthemes.dev/
좋아하는 글씨체도 넣으세요.
저는 개인적으로 DejaVu Sans Mono를 좋아합니다.대체로 파워라인 에디션이 들어가 있습니다.
https://github.com/powerline/fonts/tree/master/DejaVuSansMono

패키지 업데이트

먼저 Ubuntu 패키지를 업데이트합니다.

sudo apt update
sudo apt upgrade

zsh와prezto의 가져오기

기본값은 bash이기 때문에 zsh로 변경합니다.
예전에는 오마이즈쉬를 썼는데 맞춤형이 너무 많아서 익숙하지 않은 것 같아서 요즘은 프리즈토라는 프레임을 사용하고 있어요.
https://github.com/sorin-ionescu/prezto
한 마디로 하면 최근의 단말기가 추구하는 현대적 기능은 기본적으로 모두 실현할 수 있기 때문에 추천합니다.

sudo apt install zsh
zsh # 設定ファイルはこのあとpreztoで作るので(q)でそのまま何もしない

# preztoをインストール
git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

# preztoのセットアップ
setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done

# デフォルトシェルをzshに変更
chsh -s /bin/zsh

# ターミナルを再起動

prezoto 구성

주제와 모듈을 주로 설정합니다.

메시지

prezoto의 장점은 prompt -p 주제를 미리 볼 수 있고 좋아하는 것을 찾을 수 있다는 것이다.

해당prompt <テーマ名>.다만, 나는 개인적으로 묵인하는 것을 좋아한다.

모듈

편집~/.zpreztorc평론은 상당히 이해하기 쉬우니 좋아하는 항목을 편집하면 된다.
특히 중요한 것은 모듈의 탑재에 좋아하는 모듈을 넣는 것이다.
일람과 기능이 모두 여기에 쓰여 있다.
https://github.com/sorin-ionescu/prezto/tree/master/modules
나는 다음과 같은 느낌을 가지고 있다.

# Set the Prezto modules to load (browse modules).
# The order matters.
zstyle ':prezto:load' pmodule \
  'environment' \
  'terminal' \
  'editor' \
  'history' \
  'directory' \
  'spectrum' \
  'utility' \
  'completion' \
  'prompt' \
  'archive' \ # 圧縮ファイル操作
  'autosuggestions' \ # コマンド入力補完
  'git' \ # Git操作
  'syntax-highlighting' # コマンド入力シンタックスハイライト

다른 모듈의 구성도 아래쪽에 있으므로 원하는 방식으로 편집할 수 있습니다.

# Auto set the tab and window titles.
zstyle ':prezto:module:terminal' auto-title 'yes'

터미널의 탭 이름을 자동으로 설정하기 때문에 여러 개의 탭을 열 때 편리하다.

Node.js

앱으로 넣으면 버전이 낡고 버전 관리가 번거로워 n로 설치할 수 있기 때문이다.
https://github.com/tj/n
다만 설치n는 npm가 필요하기 때문에 당분간 앱으로 넣는다.

# とりあえずaptでnodeをインストール
sudo apt install nodejs npm

# n をグローバルにインストール
sudo npm install -g n

# LTSバージョンをインストール
sudo n lts

# aptで入れたnodeを削除
sudo apt purge nodejs npm

조금 번거롭지만 n 사용하기 편하므로 추천합니다.

Docker

일반적으로 설치 프로그램을 내려놓고 설치한다.
https://www.docker.com/
설정에서 "General&Usethe WSL2 based engine"이 열려 있는지 확인합니다.
Settings>Resources>WSL Integration에서 Ubuntu를 활성화합니다.
상세한 상황은 여기에 모두 쓰여 있다.
https://docs.docker.com/docker-for-windows/wsl/
마지막으로, sudo가 없어도 docker 명령을 실행할 수 있는 권한을 추가했습니다.

sudo usermod -aG docker $USER

Docker를 사용할 수 있습니다.

간단하다~

VS Code - Remote WSL

VScode-Remote WSL은 매우 편리합니다.
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl code .로 전화하면 현재 디렉토리가 VS 코드로 열립니다.

그리고 Docker로 개발하면 돼요.
참 편한 사회네요.

Windows 폴더 색상 수정

Ubuntu에서 볼 때/mnt/c Windows 폴더가 마운트됩니다.

폴더 이름을 그대로 두면 보기 어려우니 수정해 주세요.
LS_출력 COLORS 설정

dircolors -p > ~/.dircolors

이거 OTHER.WRITABLE 이 항목이 바로 그것이기 때문에 "34; 42"에서 "01; 34"까지 편집합니다.

OTHER_WRITABLE 01;34 # dir that is other-writable (o+w) and not sticky

마지막으로 .zshrc에 다음과 같은 내용을 추가하고 터미널을 다시 시작합니다.

eval $(dircolors -b ~/.dircolors)

그러나 WSL의 Windows 파일 시스템은 매우 느리므로 개발 프로젝트를 설정하지 않도록 주의하십시오.

끝맺다

마침 라이젠과 지포스 등 신형 하드웨어가 인기리에 방영 중이어서 그 은혜를 받아들이지 못하는 맥에게는 아무래도 힘이 부족하다는 느낌이 들었다.
그리고 글꼴 렌더링은 맥의 아름다움 정도의 이유지만, 그것도 윈에 히라진오를 넣고 4K 모니터로 축소해 리티나처럼 활용하면 문제가 되지 않는다.글꼴 렌더링이 아닌 것 같은데 글꼴에 문제가 있는 것 같습니다.
M.2SSD는 속도가 빠르고 메모리도 취향에 따라 누적할 수 있어서 드디어 웹 하우스도 강력한 기계로 개발할 수 있어서 기쁩니다...당분간 맥은 iOS 앱만 사용하는 빌딩입니다.