개발을 위한 우분투 개발환경을 처음부터 구축하려면, 무엇보다 먼저 패키지 설치 속도 개선을 위한 APT 미러 설정을 선행하고, 그 다음 필요한 패키지들을 차례로 설치해야 한다. 이 문서는 Node.js 기반 프론트엔드 개발을 위한 우분투 초기 세팅을 순서대로 정리하였다.
0. APT 서버를 Kakao 미러로 변경하기
패키지를 설치하기 전에, 먼저 APT 서버 주소를 Kakao 미러(mirror.kakao.com)로 변경하여 속도 문제나 에러를 예방하자.
먼저 vim과 sudo를 깔아주자.
apt install vim sudo
/etc/apt/sources.list.d/ubuntu.sources
파일 열기
sudo vi /etc/apt/sources.list.d/ubuntu.sources
아래에서 URI의 archive.ubuntu.com을 mirror.kakao.com로 바꿔주고 저장 후 나온다.
## before
Types: deb
URIs: http://archive.ubuntu.com/ubuntu/
Suites: noble noble-updates noble-backports
Components: main universe restricted multiverse
Signed-By: /usr/share/keyrings/ubuntu-archive-keyring.gpg
## after
Types: deb
URIs: http://mirror.kakao.com/ubuntu/
Suites: noble noble-updates noble-backports
Components: main universe restricted multiverse
Signed-By: /usr/share/keyrings/ubuntu-archive-keyring.gpg
APT 패키지 목록 업데이트
주소를 바꾼 후에는 새 주소로 패키지 목록을 받아와야 한다.
apt update
이제 미러 설정이 완료되었으므로, 본격적으로 개발 환경을 세팅한다.
1. 시스템 업데이트
sudo apt update && sudo apt upgrade -y
2. 기본 빌드 도구 및 유틸리티
sudo apt install -y build-essential curl file git wget tar
build-essential
:gcc
,make
,g++
등 컴파일 도구 모음curl
: 파일 다운로드 및 API 호출 시 사용file
: 파일 종류 분석용git
: 버전관리 툴wget
: 웹에서 파일 다운로드할 때 쓰는 CLI 도구 (없으면 VSCode 설치 안됨)tar
: .tar.gz, .tgz 같은 압축 파일 해제 (없으면 VSCode 설치 안됨)
3. Node.js 및 npm 설치
sudo apt-get install nodejs
sudo apt-get install npm
제대로 설치되었는지 확인
📢 node v20.x 이상을 사용하고 싶다면 직접 설치하자!
curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && apt install -y nodejs
4. 자주 사용하는 글로벌 패키지 설치
npm install -g serve typescript eslint prettier
serve
: 정적 파일 서버typescript
: 타입스크립트 컴파일러eslint
,prettier
: 코드 품질 관리
5. 편의성 도구
sudo apt install -y zsh htop unzip
zsh
: 쉘 환경htop
: 시스템 리소스 모니터링unzip
: 압축 해제
6. 기타 개발 유틸리티
sudo apt install -y net-tools tmux tree
net-tools
:ifconfig
,netstat
등 네트워크 확인용tmux
: 터미널 세션 분할 및 멀티플렉서tree
: 디렉토리 구조를 트리로 출력
🏁 마무리
이러한 설정이 완료되면 React, Vue, Next.js 등 다양한 프론트엔드 프레임워크를 손쉽게 설치하고 활용할 수 있다.
Node.js 기반의 개발을 위해 반드시 필요한 패키지들이므로, 처음 우분투를 설치한 직후 바로 적용해두는 것이 좋다.
다음 파일은 상위의 설정들을 Dockerfile에 모두 담아놓은 이미지이다.
FROM ubuntu:latest
# 1. APT Kakao 미러 설정
RUN sed -i 's|http://archive.ubuntu.com/ubuntu/|http://mirror.kakao.com/ubuntu/|g' /etc/apt/sources.list.d/ubuntu.sources
# 2. 기본 패키지 설치
RUN apt update && apt upgrade -y && \
apt install -y \
vim sudo build-essential curl file git wget tar \
nodejs npm \
zsh htop unzip \
net-tools tmux tree
# 3. npm 글로벌 패키지
RUN npm install -g serve typescript eslint prettier
# 4. 포트 오픈
EXPOSE 3000
'WIL > 웹 개발' 카테고리의 다른 글
Next.js + TypeScript + App Router 환경에서 tsconfig 타입 꼬임 (0) | 2025.03.27 |
---|---|
Windows에서 Docker로 Ubuntu 서버 만들기 1 (0) | 2025.03.11 |
프로토타입과 클래스 (0) | 2024.12.11 |
WAI-ARIA: Role과 Aria-Label이란? (1) | 2024.11.19 |
Spring 애플리케이션 배포 시 GitHub Actions 환경 변수 설정법 (1) | 2024.11.04 |