우리FISA/강의 🔒

2024.02.23

닉네임생각즁 2024. 2. 23. 17:31

 

리액트 서버 만들기

 

 

 

 

 

프론트는 어떤 식으로 배포해야할까???

 

스프링->패키징 빌드!

 

웹팩,, 모듈 번들러

파일을 모두 묶어서 번들링 -> 빌드하면 됨

 

 

https://github.com/guguttemy/react-test

 

GitHub - guguttemy/react-test

Contribute to guguttemy/react-test development by creating an account on GitHub.

github.com

git clone

 

 

 

 

로컬호스트 : 현재 서버 킨 그 곳에서만 됨

 

SQL 연결할때 hostname을 리눅스 서버로 바꿔도됨 

 

npm run dev -> 개발할때만 씀 이 안에서만 페이지가 나오도록함

 

개발 다 하면 빌드해야하는데

 

 

npm run build!!

-> mvn package처럼 빌드 결과물을 만드는 과정

 

 

 

 

preview -> 결과물을 미리 보겠다!!

npm run preview

 

 

이제 EC2에서 해보기!!!!!!!!!!!!!!!

 

키 있는곳에서 깃 배시 실행

 

 

 

 

react server 인스턴스 연결하고!!

git repository에서 clone

 

node.js 설치

- npm

https://publish.obsidian.md/guguttemy/3.+Cloud/2.+Nginx/6.+Node.js+%EC%84%A4%EC%B9%98

 

6. Node.js 설치 - Service dev - Obsidian Publish

6. Node.js 설치 - Service dev - Powered by Obsidian Publish.

publish.obsidian.md

 

nvm : npm 버전 관리해주는,,,

 

 

 

완료!!

 

 

깃 클론도 함

 

 

clone한 프로젝트 폴더가서 npm install

npm run dev로 실행 후

curl localhost:5173(열린 포트 번호)로 동작하는지 테스트

 

 

-> 백그라운드로 실행한다

 

원래는 실행하고 입력할 수 없지만 &를 붙여서 백그라운드 실행을 해놓으면 엔터친 후 명령어를 입력할 수 있게된다!!

 

npm run dev를 백그라운드로 실행하고 curl localhost:5173를 연다????

curl 요청을 보낸다?

 

제대로 실행됐는지 확인해볼 수 있다

 

실행중인 프로세스 볼 수 있다

 

다른사람들이 실행중인거까지 볼 수 있다

 

 

netstat -tnlp

쳐기

실행중인 포트 볼 수 있다

127.0.0.1 -> 아무데서나 접근되는거 아니고 내 로컬에서만,,?

 

curl

 

 

프로세스 번호가 나온다 (node로 돌아가고 있기때문에 저렇게 하는거)

만약 작동 제대로 안하면 kill -9 3534 이런식으로 종료하면 됨

kill -15 : 정상적으로 종료

kill -9 : 강제 종료

 

 

내 로컬에서는 돌아가는데(ec2안에서) 밖에서는 돌아가냐? 아니다

-> 보안그룹에 인바운드 그룹 규칙 추가

 

5173에 대해선 허용됨

 

프라이빗 : 서버끼리만 내부 통신

퍼블릿 : 외부에서 들어올 숭 ㅣㅆ음

 

 

fg -> 포그라운드로 변환 

포그라운드로 변환하고 종료

 

localhost -> 나만 갈 수 있음

 

sudo vi package.json - 슈퍼유저 권한으로 package.json 파일 수정하겠다

 

i 눌러서 insert mode로 변환

/ preview -> preview위치 찾기 (insert모드 esc하고 하기)

 

 

:wq - 저장하고 종료

 

 

 

 

퍼블릿 주소:5173

 

접근됨

 

 

 

 

--host~~~ 추가해줘야 network로 볼 수 있게 나타남

그냥 vite preview였을떄는 local 주소만 나옴

 

수정 전에는

 

 

 

--------

 

npm run 

dev -> 개발한거 띄우기

build -> 패키징

preview -> 빌드한걸 보여줌

 

-------

 

 

https://vercel.com/

 

Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel

Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

vercel.com

빌드배포 쉽게 할 수 있게 도와줌

 

 

 

---------

 

서버끄면

세션 모든게 날아감

 

서버 켜지면 쉘이 열리는건데(쉘도 하나의 프로세스로 돌아감)

서버꺼지면서 쉘도 꺼지니까,,

 

---------

 

엔진x로 배포해보기

https://publish.obsidian.md/guguttemy/3.+Cloud/2.+Nginx/1.+Nginx

 

1. Nginx - Service dev - Obsidian Publish

1. Nginx - Service dev - Powered by Obsidian Publish.

publish.obsidian.md

 

 

sudo apt-get update

 

sudo apt-get install -y curl gnupg2 ca-certificates lsb-release debian-archive-keyring

 

su -

 

아직 비밀번호가 설정이 안되어있는거

 

sudo passwd root

-> 비밀번호 설정

 

su -

 

 

~# : 관리자계정

whoami : 계정 뭔지 확인

 

ps -ef | grep nginx

현재실행중인 프로세스(다른사람들이 하는거포함) 중 nginx인거를 보여줘라

 

80포트로 웹서버가 하나 켜있어서 html파일을 응답한것

curl localhost:80 인데 80은 생략 가능

 

파란색은 폴더 나머지는 파일

 

 

 

/ : 루트 경로

location / : localhost/ 로 들어갔을때 index 열어줘 없으면 index.html 없으면 그 다음,,

 

 

 

 

nginx -s reload -> 바뀐거 적용해서 다시 리로드

conf.d/default.conft 파일에 가서 listen 부분의 포트 변경

81번 포트로 변경 후에 localhost:81로 동작하는지 테스트
80으로는 동작안하게 되는지

 

cd /etc/nginx/conf.d
vi default.conf

 

i 눌러서 insert 모드로 가서 고치고 :wq 로 나오기

 

nginx -s reload

 

 

 

됨!!

 

 

이제 여기에 프로젝트경로를 넣어서 띄우기?

 

 

-------

 

 

https://www.notion.so/mysql-bb87e07894c54a539f2bca27ca300f4c

 

리눅스 mysql 외부 접속 방법 | Notion

mysql 접속

lumbar-healer-b73.notion.site

 

리눅스 mysql 외부 접속 방법

 

sudo mysql -u root -p

 

user 생성해야함

 

### 유저 생성

create user '`[생성할USERID]`'@'`%`' identified by '`[비밀번호]`';

> ex) create user ‘test’@’118.131.63.237’ identified by ‘1234’;
> 

→ 118.131.63.237 ip 확인 어떻게 해..??

 

-> 118.131.63.237 포트로 들어오는걸 허용하겠다

 

 

 

 

 

다했으면 myeql

 

..

 

원섭이 방법으로는 안됨 ㅜㅜ

 

->

 

그게 원래 connect 안된다고 했는데
4:05
sudo service mysql restart
4:05
이거 치고
4:05
다시 mysql 접속하면

 

 

 

 

 

 

netstat -tnlp

mysql 포트가
127.0.0.1:3306로 되어있을 경우

설정 파일 적용해야하기 때문에
sudo service mysql restart (응답 없으면 재시작된 것)

다시 netstat 확인하면 0.0.0.0:3306

 

 

 

or 혜진이 방법

 

 

 

------

 

https://obvious-ring-b5d.notion.site/swap-5a8c7c4003a346a2a5575ef3158f5230

 

우분투 swap 만들어 메모리 용량 늘리기 | Notion

💣 문제

obvious-ring-b5d.notion.site

 

 

 

# **우분투 swap 만들어 메모리 용량 늘리기**

## 💣 **문제**

**우분투에서 백엔드 서버를 백그라운드로 실행시켜놓고 프론트서버를 실행시키니 쉘이 멈춤**

## **🔨 삽질**

**인스턴스만 계속 중지했다 재실행만 반복**

## **🎯 원인**

**메모리가 부족해서??**

- **메모리 사용량 확인**
    
    `sar -r 1` (리눅스 시스템의 메모리 사용 통계)
    
    sar : System Activity Reporter, 리눅스의 여러 가지 성능 지표
    -r : 메모리 사용량에 대한 정보
    1 : 보고 주기가 1초임을 의미
    
    서버를 켜기 전에는 약 54 정도
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/b7ede89b-5f7f-4724-8c1b-40d84bf757b9/675900e5-e08e-47c8-a652-d1b7007e137a/Untitled.png)
    
    백엔드와 프론트엔드 서버를 켜니 약 85가 되고 프론트 서버가 열리지 않음
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/b7ede89b-5f7f-4724-8c1b-40d84bf757b9/e7aee047-b367-45a4-b02e-36e78380143d/Untitled.png)
    

## **✅ 해결**

**우분투 swap메모리를 만들어 메모리 용량 늘리기**

**swap메모리 : 시스템의 주 메모리(RAM)가 부족할 때 사용되는 디스크 공간**

`**free -h`   (메모리 사용량을 확인)**

![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/b7ede89b-5f7f-4724-8c1b-40d84bf757b9/6e15ad40-597e-45d2-9c22-a9ad551cf995/Untitled.png)

- **swap 메모리(파일) 생성**
    1. `sudo fallocate -l 2G /swapfile` (2기가로 스왑 파일 생성)
    2. `sudo chmod 600 /swapfile` (파일 권한 600으로 설정)
    3. `sudo mkswap /swapfile` (파일에 스왑 영역 생성)
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/b7ede89b-5f7f-4724-8c1b-40d84bf757b9/d6f29651-edc0-45fb-82ad-4db3ba7e442f/Untitled.png)
    
    1. `sudo swapon /swapfile` (스왑 파일 활성화)
    2. `sudo nano /etc/fstab` (/etc/fstab 파일을 열어 스왑 추가)
    3. nano 에디터에 추가 `/swapfile swap swap defaults 0 0`  (/swapfile을 스왑 파일로서 자동으로 사용하도록 설정)
    
    생성된 것 확인
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/b7ede89b-5f7f-4724-8c1b-40d84bf757b9/75783617-ad9d-414d-bd18-2eb26b90c157/Untitled.png)
    

**서버 실행 시 스왑메모리 사용**

![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/b7ede89b-5f7f-4724-8c1b-40d84bf757b9/266fa4d4-4c4c-4d78-9d1a-ab67039e0a54/Untitled.png)

## **❓ 의문**

1. **남혁이는 왜 메모리 늘리는 과정 없이 한 번에 됐는가???**

`**service --status-all` (설치된 서비스 목록 조회) 해봤으나 똑같음**

`**top` (현재 메모리, cpu사용량 조회) 도 거의 차이 없음**

virtual box에서 linuxcli 서버 켜놓아서…?

 

 

 

 

 

구현할때 배포환경 먼저 만들어놓고 기능만들고 다시 넣고 배포하고 이런식으로 하는게 좋음

 

 

 

 


 

https://drive.google.com/drive/folders/1l8aIGd6kJ0-0vlHpvhxnntjMJg501jzf

 

[우리FISA_2기] 공유 폴더 - Google Drive

12-27, 프로그래밍 패러다임

drive.google.com

 

리눅스 명령어

linux_command.pdf
0.09MB

 

 

 

 

 

 

'우리FISA > 강의 🔒' 카테고리의 다른 글

2024.02.27  (0) 2024.02.27
2024.02.22  (1) 2024.02.22
2024.01.11  (0) 2024.01.11