2023. 10. 14. 05:05ㆍ_Web
이 글만 읽는다면
배포할 수 있길 바라면서
1. AWS 인스턴스 생성
1.1. 인스턴스 시작
1.2. 보안 그룹 설정
1.3. 탄력적 IP 설정
2. putty + nginx 리액트 배포
2.1. putty로 서버 접속하기
2.2. nodejs 설치하기 (버전유의)
2.3. git clone 받기
2.4. npm 업그레이드하기
2.5. nginx 설치하기
2.6. 서버실행하기
서론
shareIT 프로젝트를 하면서 nginx를 이용한 React 배포를 담당하였습니다.
미래의 내가 이것만 읽고 배포하면 얼마나 좋을까요.
숙련자를 위한 nginx 코드모음집
아래에 업데이트 예정
토끼를 따라가면서 하나씩 해보시면
배포하실 수 있을 겁니다 !
☘️ 행운이 있길 바라면서 진행 단계가 넘어갈 때마다 클로버를 두겠습니다.
오류 모음집이 되고 있네요 ㅠㅠ
1. 1. AWS 인스턴스 생성 및 시작 ☘️
EC2 인스턴스에 들어갑니다. 서비스 눌러서도 들어갈 수 있습니다.
오른쪽 상당에 다른 나라로 되어있으면 서울로 바꿔줍시다.
같은 망이라 빠르기도 하고
지역마다 보여주기 때문에 안 보여서 안 지우면 과금이 나오는 경험담이...
아무튼 인스턴스 생성을 해봅시다.
이름을 생성하고 우분투를 눌러줍니다. 프리티어 사용가능으로 생성합니다.
인스턴스 유형에 주의하세요 과금나올 수도 있습니다. t2.micro 사용하였습니다.
프리티어 과금 방지는 해당 블로그를 참고하였습니다.
https://inpa.tistory.com/entry/AWS-💰-프리티어-요금-폭탄-방지-💸-무료-사용량-정리
[AWS] 💰 프리티어 요금 폭탄 방지 💸 - 무료 사용량 정리
AWS 프리티어 과금 (AWS Reduce Cost) 아마존에선 신규 AWS 고객에게 1년간의 프리 티어를 제공한다. 원래는 AWS 서비스는 사용하는데 돈이 들어가지만, 마케팅 홍보를 위해 처음 계정을 만든 사용자들
inpa.tistory.com
☘️
키페어 생성에 .pem으로 생성합니다. .ppk로 생성해도 되는데 백엔드에서 pem이 활용도가 더 높다고 하여 .pem을 변환하기로 하였습니다. RSA 키페어 생성하면 다운로드 됩니다.
Download PuTTY - a free SSH and telnet client for Windows
Is Bitvise affiliated with PuTTY? Bitvise is not affiliated with PuTTY. We develop our SSH Server for Windows, which is compatible with PuTTY. Many PuTTY users are therefore our users as well. From time to time, they need to find the PuTTY download link. W
www.putty.org
putty, puttygen 을 설치합니다. ppk만 사용하면 puTTY만 다운로드 받으셔도 됩니다.
puttygen은 pem.을 ppk로 바꿔주는 생성기입니다.
Download PuTTY누르시고
OS에 맞는 버전으로 설치하시면 됩니다.
puttygen을 통해 .pem to .ppk를 해줍니다.
Load -> 모든 파일로 보기를 해서 .pem을 불러온다음 Save private key로 ppk로 변환해줍니다. 잃어버리지 않게 주의하세요.
생성된 ppk파일
스토리지 볼륨은 30GB로 늘려줍니다.
인스턴스 시작 눌러줍니다.
putty에서 검정화면만 나온다면 보안그룹 문제입니다. 보안그룹으로 이동하여 보안그룹을 생성합니다. 자동생성된 wizard는 작업 -> 보안그룹 삭제로 삭제합니다.
연결되어 있으면 보안 그룹 변경으로 바꾸시면 됩니다.
1.2. 보안 그룹 설정하기 ☘️
HTTP, HTTPS, SSH, MySQL, 사용자 지정 TCP 포트 8080을 IPv4, IPv6 2가지로 규칙을 만들어주세요.
중복된 규칙은 오류가 발생할 수 있습니다.
The same permission must not appear multiple times
인스턴스에 보안그룹을 연결해줍니다.
1.3. 탄력적 IP 주소할당 ☘️
공개 IP주소를 받아봅시다. 탄력적 IP주소 할당 누르시고
아래에 할당 누르시면 됩니다. 만들어진 주소를 작업 - 탄력적 IP 주소 연결로 인스턴스에 연결합니다.
인스턴스와 프라이빗 IP 주소가 뜨는데 적절하게 입력해주고 연결해주면 됩니다.
유의시항
인스턴스 종료시 탄력적 IP 릴리스하기 => 과금요소가 될 수 있음
종료하기전에 스냅샵, 볼륨 제작하기 => 백업을 생활화하자.
2. PuTTY로 Nginx 접속하여 배포하기
git bash VSC에서
ssh root@(public ip 주소) 로 접속하는게 훨 씬 빠릅니다 !
2.1 putty로 서버 접속하기 ☘️
퍼블릭 IPv4주소와 ppk나 pem키를 사용합니다.
PuTTy를 실행하고 Host Name에 퍼블릭 IPv4주소 를 입력하고.
아래에 Save를 입력하면 Load를 누르면 매번 주소를 수작업으로 입력할 필요가 없습니다.
SSH - Auth - Credentials에 Private key file에 ppk파일을 넣어줍니다. 그리고 save 만들어서 매번 켤 때 번거롭지 않게 합시다.
그렇게 Open을 누르면 서버에 들어갈 수 있습니다. Accept 눌러주시고 ☘️
login as: ubuntu
입력하세요!
문제 발생시
1. 만약 검은화면만 나온다면,
=> 보안그룹에 문제가 발생한 경우일 수 있습니다.
=> Host Name 문제인 경우도 있습니다.
=> 탄력적 IP가 연결되지 않은 경우가 있습니다.
2. No supported authentication methods available (server sent: publickey)
=> 키페어가 잘못되어 있는 경우가 있습니다.
=> SSH에 ppk 키를 입력 안한 경우가 있습니다.
=> 리눅스로 서버를 잘 못 판 경우가 있습니다.
성공한 경우 ☘️
2.2. Nodejs 설정
먼저 초기 상태를 위해서 새로운 서버를 만들어 왔습니다.
여기엔 nodejs며 npm이며 아무것도 없기 때문에 초기 설정을 해줘야합니다.
터미널 꿀팁!
마우스 오른쪽 버튼 : 붙여넣기
Tab : 파일이름 가져오기
ex) cd Sh + tab
파일명 전체가 불러와진다! 편하다!
키보드 위,아래 키 : 이전 명령어 불러오기
1. sudo apt update ☘️
sudo apt update
Permission denied의 발생 방지를 위한 권한 부여
루트 권한 받는 방법
chmod 711 /home/ubuntu아래 명령어는 모든 파일, 모든 디렉토리에 권한을 받아 보안문제에 주의해야 합니다
chmod -R 755 /home/ubuntu/특별한 이유가 아니라면 아래처럼 부분적인 코드를 사용해주세요
chmod +x node_modules/.bin/react-scripts
2. nodejs 설치하기 (버전유의)
이제 node를 설치해야 합니다.
만약 설치중 Y/N뜨면 Y 누르시면 됩니다.
없겠지만 node -v, sudo node -v로 버전을 확인해서
12 버전이면 최신 버전으로 설치를 해야합니다. ☘️
만약 노드가 깔려있다면 기존 노드를 아래의 명령어로 삭제해주시고요. 글을 따라가시면 됩니다.
먼저, curl 업그레이드 패키지를 설치합니다. 도중에 핑크색 화면이 뜨면 놀라지마시고 엔터를 눌러주세요. ☘️ ☘️
sudo apt install curlcurl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejssetup_18.x 를 14로 고치면 14버전을 설치할 수 있습니다.
조금 오래걸립니다. 기다려주세요.
충돌발생시 node를 삭제하고 다시 깔아주세요.
sudo apt remove nodejs
일반적인 설치방법 -> 버전이 너무 낮게 설치되는 경우가 있습니다.
sudo apt install nodejs
node 버전 설치가 엉켜서 발생하는 문제
dpkg: error processing archive /var/cache/apt/archives/nodejs_14.21.3-deb-1nodesource1_amd64.deb (--unpack):
trying to overwrite '/usr/include/node/common.gypi', which is also in package libnode-dev 12.22.9~dfsg-1ubuntu3
dpkg-deb: error: paste subprocess was killed by signal (Broken pipe)
Errors were encountered while processing:
/var/cache/apt/archives/nodejs_14.21.3-deb-1nodesource1_amd64.deb
E: Sub-process /usr/bin/dpkg returned an error code (1)
sudo apt remove libnode-dev
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g npm@latestnodejs, npm을 완전히 삭제하고 다시 설치하고, 핑크색 화면이 나오면 성공하는 경우도 있습니다.
sudo apt remove nodejs
sudo apt remove npm
2.3. git clone 받기
예시입니다. git clone 받을 사이트를 가져와주세요. ☘️
git clone https://github.com/KimKyuHoi/ShareIT-Frontend.git
ls 로 파일을 확인, cd로 파일을 이동할 수 있습니다.
cd .. 로 뒤로가기를 할 수 있습니다
(폴더 하나 나오기)
가져온 리액트 파일을 빌드해야합니다.
4. npm 설치
npm start해도 안 될겁니다. 설치해봅시다. 역시 조금 오래걸립니다. ☘️
sudo apt install npm
놀라지마시고 엔터눌러주세요
npm을 설치해주고 최신버전으로 올려야합니다. 그렇기 위해선 node버전도 올려야합니다.
-> 앞에서 따라오셨으면 바로 하셔도 됩니다
윗 문제 해결은 버전 관리를 위해서 권한 부여로
특별한 이유가 아니라면 아래의 코드를 사용하세요
chmod +x node_modules/.bin/react-scripts
오류발생시
ubuntu@ip-172-31-45-45:~/ShareIT-Frontend/shareit_frontend$ sudo apt install npm
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Some packages could not be installed. This may mean that you have
requested an impossible situation or if you are using the unstable
distribution that some required packages have not yet been created
or been moved out of Incoming.
The following information may help to resolve the situation:
The following packages have unmet dependencies:
npm : Depends: node-agent-base but it is not going to be installed
Depends: node-aproba but it is not going to be installed
Depends: node-archy but it is not going to be installed
Depends: node-cacache but it is not going to be installed
Depends: node-chalk but it is not going to be installed
Depends: node-cli-table3
Depends: node-colors but it is not going to be installed
Depends: node-columnify but it is not going to be installed
Depends: node-debug but it is not going to be installed
Depends: node-emoji-regex
Depends: node-got but it is not going to be installed
Depends: node-graceful-fs but it is not going to be installed
Depends: node-gyp but it is not going to be installed
Depends: node-https-proxy-agent but it is not going to be installed
Depends: node-mkdirp but it is not going to be installed
Depends: node-ms but it is not going to be installed
Depends: node-nopt but it is not going to be installed
Depends: node-normalize-package-data but it is not going to be installed
Depends: node-npm-package-arg but it is not going to be installed
Depends: node-npmlog but it is not going to be installed
Depends: node-read-package-json but it is not going to be installed
Depends: node-rimraf but it is not going to be installed
Depends: node-semver but it is not going to be installed
Depends: node-ssri but it is not going to be installed
Depends: node-string-width but it is not going to be installed
Depends: node-strip-ansi but it is not going to be installed
Depends: node-tar but it is not going to be installed
Depends: node-validate-npm-package-name but it is not going to be installed
Depends: node-which but it is not going to be installed
Depends: node-write-file-atomic but it is not going to be installed
Depends: nodejs:any (>= 10)
Recommends: node-tap but it is not going to be installed
E: Unable to correct problems, you have held broken packages.
발생하는 오류 모음
E: Unable to correct problems, you have held broken packages.
패키지 리스트가 꼬여서 발생하는 오류
sudo apt update
dpkg --audit
sudo apt-get remove 패키지이름sudo apt --fix-broken install
sudo apt update
sudo apt upgrade
Error: Cannot find module './quick-sort'
버전 업그레이드 관련이 많이 나옴
사실상 삭제하고 다시 설치하는게 나음
안되면 아래 코드로 리포트를 불러와서 chat gpt에 입력할 것
npm audit
8 vulnerabilities ( 2 moderate, 6 high) 취약점을 바로 잡는 코드
npm audit fix --force
가끔 더 늘어난 경우라면 아래로 해결 완료
발생 원인
npm audit fix — force 이 package.json에서 react-scripts 버전을 바꿔버렸기 때문에 발생하는 문제입니다.
보통 타입스크립트 보일러플레이트 CRA 프로젝트에서 발생하는 것으로 보이며타입스크립트로 만든 프로젝트이기 때문에 index.tsx 파일이 있는데 npm audit -force로 바뀐 버전의 react-script는 index.js를 찾기 때문에 에러가 발생합니다.
해결법
1.package-lock.json, node-modules 폴더를 지우세요.
sudo rm -rf package-lock.json
sudo rm -rf node_modules
2.package.json 에서 react-scripts를 지우세요.
sudo vim package.json
- npm i react-scripts 명령어를 입력하세요.
npm install -g npm@latest
sudo npm run start
sudo npm run build
node 버전 올리기 sudo node -v와 node -v가 다를 수 있음을 주의합시다.
npm 최신 버전으로 설치하기 (10이상) ☘️
sudo npm install -g npm@latest
npm 오류발생
TypeError: isexe is not a function
at E (/usr/lib/node_modules/npm/node_modules/which/which.js:82:7)
at F (/usr/lib/node_modules/npm/node_modules/which/which.js:91:7)
at which (/usr/lib/node_modules/npm/node_modules/which/which.js:92:5)
at load (/usr/lib/node_modules/npm/lib/npm.js:250:5)
at EventEmitter.npm.load (/usr/lib/node_modules/npm/lib/npm.js:246:5)
at /usr/lib/node_modules/npm/bin/npm-cli.js:79:7
at Object.<anonymous> (/usr/lib/node_modules/npm/bin/npm-cli.js:155:3)
at Module._compile (internal/modules/cjs/loader.js:1114:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
at Module.load (internal/modules/cjs/loader.js:979:32)
/usr/lib/node_modules/npm/lib/npm.js:59
throw new Error('npm.load() required')
^
Error: npm.load() required
at Object.get (/usr/lib/node_modules/npm/lib/npm.js:59:13)
at process.errorHandler (/usr/lib/node_modules/npm/lib/utils/error-handler.js:208:32)
sudo npm cache clean -f 오류 발생시 캐시 삭제하고 다시 깔아보세요sudo apt remove npm, node 무한 반복…
Error: Cannot find module 'jsonfile/utils'
Require stack:
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra/lib/json/output-json.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra/lib/json/index.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra/lib/index.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/formatter/CodeFrameFormatter.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/formatter/index.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPluginConfiguration.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPlugin.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/index.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/react-dev-utils/ForkTsCheckerWebpackPlugin.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/react-dev-utils/WebpackDevServerUtils.js
- /home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/react-scripts/scripts/start.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:121:18)
at Object.<anonymous> (/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra/lib/json/output-json.js:3:23)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Module.require (node:internal/modules/cjs/loader:1143:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra/lib/json/output-json.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra/lib/json/index.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra/lib/index.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/formatter/CodeFrameFormatter.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/formatter/index.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPluginConfiguration.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPlugin.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/fork-ts-checker-webpack-plugin/lib/index.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/react-dev-utils/ForkTsCheckerWebpackPlugin.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/react-dev-utils/WebpackDevServerUtils.js',
'/home/ubuntu/ShareIT-Frontend/shareit_frontend/node_modules/react-scripts/scripts/start.js'
]
}
아무튼 ☘️ ☘️
npm startserver start를 해주고
되는걸 확인하고 Ctrl + C 로 빠져 나온다음
앞의 내용을 모두 완료되었으면 build를 해줍니다. ☘️
npm run build
문제발생 Failed to compile
원인에 권한인 경우가 있음 -> sudo로 실행해보기, 권한 부여하기
패키지 모듈에 문제가 발생한 경우가 있음 -> npm install 부터 수상한 오류가 나는 경우
☘️ ☘️ ☘️ ☘️ ☘️ ☘️ ☘️ ☘️
5. nginx 설치하기 ☘️
sudo apt install nginxNginx를 설치하고 초기화해줍시다
기존의 conf파일을 삭제해줍니다.
sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default
☘️
sudo touch 빌드명.conf로 빌드명 잘 기억해두셔야 합니다. 빌드명.conf 어디 저장해두고 복사 붙여넣기를 추천합니다.
cd /etc/nginx/sites-available/
sudo touch shareit_frontend.conf
☘️
수정할때 sudo 권한 받고 conf 파일 수정하기
sudo vim shareit_frontend.confi(insert)로 글을 작성할 수 있습니다.
여기서 주의 build 경로가 동일해야 합니다.
root :~~~~ /build
cd 로 경로를 꼭 확인해주고 오타가 발생하지 않게 다른 곳에서 작업하고 통으로 복사하기를 추천합니다.
server {
listen 80;
location / {
root /home/ubuntu/ShareIT-Frontend/shareit_frontend/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}해당 글을 복사 붙여넣기 하고 esc + :wq!로 저장하고 빠져 나와줍니다.
작성되었는지 확인해주세요.
sudo 권한으로 안 들어오면 저장이 거부됩니다.
☘️
conf 파일의 링크를 복사 붙여넣기 해야하는데 여기서도 오타가 나지 않게 복사 붙여넣기를 추천합니다.
빌드명.conf
sudo ln -s /etc/nginx/sites-available/shareit_frontend.conf /etc/nginx/sites-enabled/shareit_frontend.conf
사실상 nginx 배포에선 빌드 경로만 설정해주면 완료입니다.
실수로 잘못만들었다면 아래 명령어로 삭제해주세요
sudo rm -f 파일명
6. 서버실행하기 ☘️
sudo systemctl stop nginx
sudo systemctl start nginxstart시 아무런 에러가 없길 바랍니다!
에러 발생시 로그를 전체 복사하여 챗지피티에게 물어보는걸 강력 추천합니다… nginx 에러 로그 파일도 따로 있습니다.
에러 로그의 대부분은 빌드 경로의 오류입니다
sudo systemctl status nginx
active가 running 이면 배포 성공입니다!!! 탄력적 ip나 공개된 ip로 접속해보세요 ~
가끔 배포된 화면과 로컬이 일치하지 않을 때가 있습니다. 지금 프로젝트가 그럽니다…
Nginx 배포후 500 에러가 뜨는 경우
1. 다시 sudo npm run build 하기
2. site-available sudo vim 경로 재확인
3. 경로에 권한 부여하기
~은 사용자며, 되도록 home에 배포하도록 합시다
git bash ssh 사용시 home/ubuntu가 아닐 수 있습니다
권한부여 코드 실행해보기
chmod -R 755 /home/ubuntu/
유의사항
인스턴스 종료시 탄력적 IP 릴리스 , 보안그룹, 키페어 삭제하는거 잊지 마세요~
프리티어는 꼭 사용량 알림 설정하기
일어나니까 팀원이 벌써 프리티어 다 썼다고 연락이 왔습니다.
1시간 무료인데 무언가 잘못됐죠
리소스 리전해서 확인해보니까 시드니에서 무언가 돌아가고 있었습니다.
인스턴스에 연결안하고 ip만 할당받은채로 있으면 비용나온다고 하는데 해결중입니다...
인스턴스 생성할때 서울로 생성해야합니다!
'_Web' 카테고리의 다른 글
| [Design] Atomic Design 패턴에 대해서 알아보자 (1) | 2023.09.30 |
|---|