포트폴리오용 서버를 만들어보자 (오렌지파이) - 1

ㅁ Model
ㅁ OS 설치
ㅁ 초기 세팅
ㅁ 인터넷 연결
ㅁ 업데이트, 웹서버 설치
- 개발 버전 확인
ㅁ 개발 환경
ㅁ 사전 작업

오랜만에 쓰는 블로그 글이다. 틈틈이 작성을 해야지

포트폴리오를 작성하면서 이런 것까지 써서 페이지 수를 늘리는 게 좋지 않다고 생각이 들기도 하고 만들 페이지들을 직접 들어가게 하고 싶은 욕심이 생겨 집에서 서버를 만들어 마지막엔 어디서든 접속이 가능하게 하는 것이 나의 목표다

우선 나에게 오렌지파이라고 작은 PC하나가 있는데 성능도 괜찮아서 이걸로 서버를 만들 생각이다.

ㅁ Model

모델 : Orange Pi 3 LTS

자세한 성능은 링크로 첨부

http://www.orangepi.org/orange-pi-3-LTS.html

마음에 드는 버전을 선택해서 설치를 하자

참고로 Jammy는 안정된 버전을 의미하고 server / desktop 차이는 아래와 같다.

나는 성능과 리눅스를 다루고 싶어 그래픽 이 없는 서버 버전을 다운로드하였다.

ㅁ OS 설치

SD카드에 OS를 설치하기 위해 하나 다운로드를 하자 이건 운영체제 설치를 쉽게 도와주는 프로그램이다.

https://etcher.balena.io/#download-etcher

balenaEtcher - Flash OS images to SD cards & USB drives

A cross-platform tool to flash OS images onto SD cards and USB drives safely and easily. Free and open source for makers around the world.

etcher.balena.io

PC와 연결한 SD카드에 다운로드한 7z압축파일을 해제해서 os를 설치해 주자

다운로드하였던 img파일을 선택해서 설치를 눌러주면 된다. 참고로 압축을 풀면 img.sha파일이라고 있는데 해시값이 들어있는 파일이다 img파일이 정상적인 파일인지 판단하는 거니 그냥 내버려 두면 된다.

이제 SD카드에 설치를 완료했고 오렌지파이에 넣고 부팅을 해주면 된다. 아마 3-5분 정도는 기다려야 켜진다.

ㅁ 초기 세팅

처음에 로그인하라는 문구가 뜨면 아이디와 비밀번호를 입력해서 인증을 해주자

ID : root

PW : orangepi

만약 포트폴리오로써 계속 사용할 거라면 비밀번호는 반드시 바꾸자 나는 추후에 바꿀 생각

root@orangepi3-lts:~#

이렇게 접속을 완료하면 완료. 나중에 root계정을 사용하지 않고 권한을 인가받은 다른 계정을 사용해 주자 실무에서도 그렇게 사용하고 있기도 하고 모든 권한을 주는 건 보안상 좋지도 않으니까

ㅁ 인터넷 연결

내 모델은 와이파이를 지원해서 이걸 이용해서 인터넷을 연결할 생각이다.

명령어를 실행해서 내 와이파이 모듈이 실행되고 있는지 확인하자

root@orangepi3-lts:~# nmcli device

명령어를 실행하면 아래와 같이 보인다.

DEVICE  TYPE      STATE      CONNECTION
eth0    ethernet  unavailable  --
wlan0   wifi      disconnected --

wlan0이라고 하는 와이파이가 나온다면 일단 와이파이 모듈이 인식이 된 거다. 만약 안 보인다면 이렇게 해보자

[💡프로젝트 문제해결] - 오렌지파이 이슈 와이파이 연결이 안 될 때

다시 원래 이야기로 돌아와서 아래 명령어로 네트워크 목록이 주르륵 나온다.

네트워크 이름(SSID) 탭에 나의 와이파이 이름을 찾아보자

찾았다면 아래처럼 해보자 와이파이 이름, 비밀번호를 입력하자

# 와이파이 목록
root@orangepi3-lts:~# nmcli device wifi list

# 와이파이 연결
nmcli device wifi connect "MyWiFi" password "12345678"

# 정상적으로 연결되었다면 이렇게 나온다
Device 'wlan0' successfully activated with 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.

참고로 집에는 공유기가 있고 와이파이도 2G랑 5G 와이파이가 나뉘는 경우가 있기에 둘의 차이를 말해보자면

2g : 멀어도 안정적
5g : 가까워야 빠름

특징에 맞춰 잘 사용하자 나는 서버니까 안정적인 게 우선이라 2g로 연결할 생각이다.

연결을 했으니 동작하는지 테스트를 해보자 응답이 돌아오면 동작이 잘 되고 있다는 거다

root@orangepi3-lts:~# ping naver.com

와이파이를 할당 고정 시켜주는 작업을 한다면 작업에 편의성도 올라가기 때문에 해주면 좋다.

[💡프로젝트 문제해결] - 오렌지파이 이슈 와이파이할당고정

ㅁ 업데이트, 웹서버 설치

이제 패치랑 설치를 해보자

이미 깔려있는 패키지들은 최신 버전이 아닐 수 있기에 업데이트를 해주고 서버에 필요한 것들을 설치해 주자

apt update && apt upgrade -y

# 웹서버 설치 (설치되면 자동으로 실행된다)
apt install nginx -y

# 아이피 주소 확인 whan0이라고 써있는 곳에 아이피가 써있다
ip a
# 아이피 주소 확인하고 아이피 주소를 입력해서 웰컴이 뜨면 ok
http://192.168.x.x

그리고 /var/www/html/ 이곳에 html 기본파일이 있어서 아이피로 접속했을 때 웰컴이 뜬 거니까

편집하려면 이렇게 작성하면 된다.

nano /var/www/html/index.html

샘플이 필요하면 복사해서 사용하자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내 첫 오렌지파이 웹페이지!</title>
</head>
<body>
    <h1>안녕! 오렌지파이에서 만든 내 웹페이지야!</h1>
    <p>이거 나오면 성공이다!</p>
</body>
</html>

아마 처음에 NginX를 설치하면 한글이 작성 안될 수 있다. 어차피 리눅스에서는 직접 한글로 수정하진 않으니 윈도우나 맥환경에서 작업을 하고 서버에 파일을 넘겨주자

그러면 같은 와이파이에 연결된 기기들끼리는 아이피주소로 접속이 가능

- 개발 버전 확인

apt로 설치했다면 최신 버전이 아닐 수 있다. 그러면 NVM으로 최신버전을 설치해 주자

# NVM 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

# 설치 반영
source ~/.bashrc

# 최신 안정 버전 설치
nvm install --lts

# 현재 터미널에서 이 버전 사용 설정
nvm use --lts

# 그리고 버전 확인하면 설정이 바뀐다
node -v

ㅁ 개발 환경

OS	Ubuntu 22.04.5 LTS (ARM, Orange Pi 3 LTS)
WEB Server	NginX
DB	MariaDB 10.x
BE	Node.js 22.14.0 (Express 미정)
FE	Vue.js 3.x
Container	Docker (k3s 예정)
Version Control	Git
Deployment	직접 배포 → Docker → k3s 예정
Process Manager	PM2
AuotMation	Jenkins ( GitHub Actions 예정)
Monitoring	Netdata (Grafana + Prometheus 예정 )

아직 버전은 설치하지 않아서 이 정도만 작성했다. 얼추 개발 환경을 세팅했다면 다음 작업으로 들어가자

ㅁ 사전 작업

리눅스로만 작업하면 리눅스 명령이나 작업하기 수월해지겠지만 그래도 개발자처럼 보이고 싶기도 하고 편하게 작성하고 싶어서 VS Code에서 Extentions에서 remote ssh를 설치해서 VS Code에서 작업하자

F1 -> Remote-SSH : Open SSH Configuration File.. -> Host는 오렌지파이를 써서 오렌지 파이라고 작성함

-> HostName 192.168.x -> User xxx 이건 오렌지파이에서 OS 설치할 때 사용했던 계정 아이디이다.

저장하고 나서 Remote- SSH : Connetions To Host.. 를 해주면 비밀번호를 입력하라고 한다. 그리고 운영체제를 선택하고 나면 연결을 해준다 1-2분 정도 소요되며 끝이 나면 오픈 폴더를 선택해서 내가 만들 프로젝트 폴더를 열거나 root폴더에 들어가 주면 된다.

사전 작업을 하고 나서 다음 날 이어서 진행하려 했는데 서버에 설치된 노드 버전이 12.x로 전날 버전과 달라졌다. 만약 같은 문제가 있다면 링크로 확인해서 해결하자

[💡프로젝트 문제해결] - 오렌지파이 이슈 부팅시노드버전 낮음

그리고 지금 방식은 VSCode로 서버를 실행한 거라 링크에서 생길만한 문제를 해결하자

[💡프로젝트 문제해결] - 오렌지파이 이슈 PM2 설치

1편은 여기까지이고 다음 글은 FE 작업을 할 예정

'🖥️프로젝트' 카테고리의 다른 글

더모아(TheMore) - Team Project (0)	2024.04.01
Mini Game Project - Team Project (0)	2024.03.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

포트폴리오용 서버를 만들어보자 (오렌지파이) - 1

ㅁ Model

ㅁ OS 설치

ㅁ 초기 세팅

ㅁ 인터넷 연결

ㅁ 업데이트, 웹서버 설치

- 개발 버전 확인

ㅁ 개발 환경

ㅁ 사전 작업

'🖥️프로젝트' 카테고리의 다른 글

ㅁ Model

ㅁ OS 설치

ㅁ 초기 세팅

ㅁ 인터넷 연결

ㅁ 업데이트, 웹서버 설치

- 개발 버전 확인

ㅁ 개발 환경

ㅁ 사전 작업

'🖥️프로젝트' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역