Ubuntu에 react 설치하기
0. 우분투에 nodejs, npm 버전 확인 (작성일 기준 node v14.17.2 npm v6.14.13)
node -v
npm -v
1. PPA를 통해 최신 버전 설치 (14버전 기준).
그전에 아래의 NodeJS 홈페이지에 가서 최신 LTS 버전이 몇버전인지 확인합니다.
현재 14.16.0버전이어서 14.x로 (2021.03.09 기준) 버전을 선택해야합니다.
아래의 명령어를 입력합니다.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
2. 후에 우분투에 NodeJS를 설치해줍니다.
$ sudo apt-get install -y nodejs
$ sudo apt install npm
잘 깔렸는지 확인
$ node -v
// v14.17.2
$ npm -v
// v6.14.13
3. NPM이 제 기능을 하게 하기 위해 다음 명령어를 실행합니다. (요거 없으면 npm install 시 에러 날 확률이 높습니다.)
$ sudo apt-get install build-essential
4. yarn 사용시 yarn 설치
$ sudo npm install --global yarnyarn 버전 확인
$ sudo yarn
// -v 1.22.10
5-1. react 파일을 git clone을 해오는 경우
$ git clone {저장소 URL}
$ git clone -b {branch_name} --single-branch {저장소 URL}
5-2. react파일을 생성하는 경우
// create-react-app 5.0.0 버전이 나오면서 cra를 글로벌로 하지말고 각각의 폴더에서 해야하는 것 같다.
// 이미 설치되어 있다면 아래 명령어를 통해 삭제 후
// sudo npm uninstall -g create-react-app
// sudo npm add create-react-app
// 아래 명령어로 각 폴더에서 cra 하기
// sudo npx create-react-app hello-react
// yarn start
// 아래는 이전에 했던 명령어들.
// react app을 생성할 수 있는 명령어 create-react-app을 설치한 후
$ sudo npm install -g create-react-app
// create-react-app 버전을 확인합니다.
$ create-react-app --version
// -v 4.0.3
// hello-react라는 이름의 react app을 생성합니다.
$ create-react-app hello-react
// 이 react app을 실행합니다.
$ yarn start
네트워킹 탭으로 들어간 후 3000번 포트를 개방해준다.
우분투 서버의 3000번 포트로 접속하면 (ex, http://3.36.2.139:3000/) 리액트 앱이 잘 실행된 것을 볼 수 있습니다.
+) Nginx를 통한 배포
1. 프로젝트 빌드 / nginx 설치
// 생성된 react 프로젝트 빌드
$ yarn build
// nginx 설치
$ sudo apt install nginx
// 설치가 완료되면 /etc/nginx 경로에 방금 설치된 nginx 웹 서버의 설정 파일들이 생긴다참고:Nginx 기본파일과 폴더들
- sites-available : 가상 서버 환경들에 대한 설정 파일들이 위치하는 부분입니다. 가상 서버를 사용하거나 사용하지 않던간에 그에 대한 설정 파일들이 위치하는 곳이다.
- sites-enabled : sites-available 에 있는 가상 서버 파일들중에서 실행시키고 싶은 파일을 symlink로 연결한 폴더입니다. 실제로 이 폴더에 위치한 가상서버 환경 파일들을 읽어서 서버를 세팅합니다.
- nginx.conf : Nginx에 관한 설정파일로 Nginx 설정에 관한 블록들이 작성되어 있으며 이 파일에서 sites-enabled 폴더에 있는 파일들을 가져옵니다.
2. 그중 아래처럼 sites-available, sites-enabled 폴더를 수정하게 된다.
혹시 모르니 이 폴더들을 미리 백업해 놓자.
// 원본 백업
$ sudo cp -r /etc/nginx/sites-available/ /etc/nginx/sites-available-origin
$ sudo cp -r /etc/nginx/sites-enabled/ /etc/nginx/sites-enabled-origin
3. sites-available, sites-enabled 폴더 내부의 default 설정 파일들을 아래 명령어로 제거해준다.
$ sudo rm /etc/nginx/sites-available/default
$ sudo rm /etc/nginx/sites-enabled/default4. 앞서 생성한 react 프로젝트의 build 결과물을 배포할 설정 파일을 생성하자. (폴더 명에 따라 hello-react 부분을 수정)
$ sudo touch /etc/nginx/sites-available/hello-react.conf5. 다음과 같이 내용을 채워준다. root 부분의 경로는 본인의 폴더 경로에 맞게 수정해준다.
$ sudo nano /etc/nginx/sites-available/hello-react.conf
server {
listen 80;
location / {
root /home/ubuntu/hello-react/build;
index index.html index.htm;
try_files $uri /index.html;
}
}위 설정을 보면 해당 설정은 80포트로 서비스 한다는 것을 보여준다.
location / 이부분은 루트 진입시 설정이다.
root 설정은 앞서 생성한 react 프로젝트의 build 폴더 경로를 설정한다.
index 설정은 해당 폴더에서 redirect 할 index html 파일에 대한 설정이다. 앞 부터 우선순위가 있다.
try_files 설정은 좀 중요해보인다.
nginx를 잘 써보지 않아 이번에 찾아 봤는데, react 프로젝트의 경우 페이지 라우팅을 react-router가 보통 하게 될것이다.
즉 index.html 자체에서 페이지 라우팅을 하는 것이다.
try_files 설정은 일종의 nginx 자체의 라우팅 설정이다. 보통 이 부분에서 특정 패턴의 url에 특정 파일등을 redirct 하는 설정을 한다. 만약 페이지를 못 찾을 경우 404 not found 설정등도 이곳에서 한다.
하지만 react 프로젝트인 경우, 웹서버에서 먼저 리퀘스트 url 을 가로채면 react-router의 기능을 사용할수 없게 된다.(vue등도 마찬가지일 것이다.)
따라서 위처럼 모든 request를 index.html로 곧장 가게 설정해 줘야 한다.
sites-available 폴더에 가상호스트 설정을 끝냈다.
하지만 이 설정만으로는 서비스가 동작하지 않는다. 방금 생성한 설정파일을 sites-enabled 폴더로 symlink해야 해당서비스가 활성화 되며 실제 서비스가 가능한 상태가 된다.
6. 아래 명령어를 입력해서 site-enabled 폴더에 심볼릭 링크를 만들자.
$ sudo ln -s /etc/nginx/sites-available/hello-react.conf /etc/nginx/sites-enabled/hello-react.conf7. nginx를 재가동하고 동작을 확인해보자.
$ sudo systemctl stop nginx
$ sudo systemctl start nginx
$ sudo systemctl status nginx
(주의: 만약 80포트가 개방되어 있지 않다면 ubuntu 방화벽에서 80포트를 허가 해야 외부에서 접근이 가능하다. 아래 명령어로 포트를 방화벽에서 허용 시킬수 있다.)
$ sudo iptables -I INPUT 1 -p tcp --dport 80-j ACCEPT
이제 사이트로 들어가보면 정상적으로 구동되는 것을 확인할 수 있다! 80번 포트로 연결해주었기 때문에 포트는 입력해주지 않아도 된다.(ex, http://3.36.2.139)
https://www.hanumoka.net/2019/12/29/react-20191229-react-nginx-deploy/
React를 Nginx웹 서버에 배포하기
개요Create React App으로 배포 테스트용 React 프로젝트를 만들고, 빌드하여 배포하는 실습을 진행해보도록 하겠다. 실습 환경은 ubuntu 18.04 가상머신에서 진행하였으며, 기본적으로 nvm, node, npm(npx사
www.hanumoka.net
+) aws node.js 서버 배포
1. pm2 설치. pm2란 nodejs를 위한 프로세스 매니저로 로컬 터미널을 종료해도 간단하게 계속해서 서버를 운용하게 해준다.
$ sudo npm install -g pm22. pm2로 서버 실행
// 해당 backend 폴더 위치에서
$ pm2 start src/index.js
// 타입스크립트인경우
$ pm2 start dist/index.js3. 이제 터미널을 종료해도 서버가 돌아간다. 중지하고 싶을 땐 아래 명령어 입력
$ pm2 stop src/index.js
$ pm2 stop dist/index.js
+) mongoDB Ubuntu
1. mongoDB 설치
$ wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -
$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list
$ sudo apt-get update
$ sudo apt-get install -y mongodb-org
// (선택) 의도치 않은 버전 업그레이드가 발생할 수 있기 때문에 아래 명령어로 패키지 버전 고정
$ echo "mongodb-org hold" | sudo dpkg --set-selections
$ echo "mongodb-org-server hold" | sudo dpkg --set-selections
$ echo "mongodb-org-shell hold" | sudo dpkg --set-selections
$ echo "mongodb-org-mongos hold" | sudo dpkg --set-selections
$ echo "mongodb-org-tools hold" | sudo dpkg --set-selections2. mongod는 MongoDB 시스템에서 가장 대표적인 작업 데몬 프로세스이다. mongod를 통해 데이터를 요청하고, 데이터 접근을 관리하고, 백그라운드 관리 작업에 대한 수행을 한다. MongoDB는 결국 mongod 프로세스를 띄우고, 운영하고, 종료하는 과정으로 진행된다.
// mongoDB 실행
$ sudo systemctl start mongod
// mongoDB 상태 확인
$ sudo systemctl status mongod
// mongoDB가 시스템 재부팅 후 실행되도록 설정
$ sudo systemctl enable mongod
// mongoDB 중지
$ sudo systemctl stop mongod
// mongoDB 재시작
$ sudo systemctl restart mongod3. mongoDB shell 접속
$ mongo
// admin으로 계정 바꾸기, 원하는 아이디/비밀번호 입력
> use admin;
> db.createUser({user: "test", pwd: "test", roles:["root"]});
> exit
// MongoDB 재시작
$ sudo service mongod restart4. mongoDB 외부에 열어주기
$ sudo nano /etc/mongod.conf
위 빨간 박스의 내용을 아래와 같이 변경
$ sudo service mongod restart
+) VS Code 에서 aws 접속해서 작업하기
Remote-SSH Configuration 설정
VSCode에서 왼쪽 아래 ssh버튼을 누르고 Remote-SSH: Open COnfiguration File기능을 선택합니다.
ssh configuration 파일을 다음과 같이 수정합니다.
Host dogood
HostName ec2-52-79-88-30.ap-northeast-2.compute.amazonaws.com
IdentityFile ~/Downloads/hackathon.pem
User ubuntu
ForwardAgent yes
이때 Host 는 본인이 식별하기 위한 이름을
HostName 은 인스턴스의 public ip,
IdentityFile 은 pem 파일의 경로를 입력
+) aws 서버 timezone 설정
$ date
// Sat Aug 21 00:32:18 UCT 2021
$ sudo rm /etc/localtime
$ sudo ln -s /usr/share/zoneinfo/Asia/Seoul /etc/localtime
$ date
// Sat Aug 21 09:32:18 KST 2021
+) aws MySQL 설치하기
$ sudo apt-get update
// update : 패키지 저장소의 말그대로 index를 최신화 시키는것.
// upgrade : 설치된 패키지들을 실제 업그레이드를 진행함
$ sudo apt-get install mysql-server
// 외부 접속 기능 설정(포트 3306 오픈)
$ sudo ufw allow mysql
// Ubuntu 서버 재시작시 mysql 자동 재시작
$ sudo systemctl enable mysql
// mysql 서비스 상태 확인(Active가 active(running)이어야 한다.)
$ systemctl status mysql.service
// 만약 mysql이 중지 상태인경우 재시작
$ sudo service mysql restart
// mysql 접속 (안되면 아래걸로)
$ sudo mysql -u root -p
$ sudo /usr/bin/mysql -u root -p// esc라는 이름의 데이터베이스 생성
mysql> CREATE DATABASE esc default CHARACTER SET UTF8;
// 모든 데이터베이스 조회
mysql> SHOW DATABASES;
// esc 데이터베이스 사용
mysql> use esc;
// 모든 테이블 조회
mysql> SHOW TABLES;
ubuntu같은 일부 리눅스 시스템에서 mysql을 설치하고
$ mysql -u root 으로 로그인 시도를하면
'ERROR 1698 (28000): Access denied for user 'root'@'localhost'이라는 에러를 발생할때가 있다.
이는 기본적으로 초기설정되어있는 mysql의 root 계정의 패스워드 타입때문인데
이 타입을 변경해주면된다.
$ sudo mysql -u root # sudo를 사용하여 root계정으로 mysql에 접속한다.
mysql> USE mysql;
mysql> SELECT User, Host, plugin FROM mysql.user;
+------------------+-----------------------+
| User | plugin |
+------------------+-----------------------+
| root | auth_socket |
| mysql.sys | mysql_native_password |
| debian-sys-maint | mysql_native_password |
+------------------+-----------------------+위처럼 root의 plugin이 auth_socket으로 설정되어있는것을 확인할 수 있다.
이 값을 mysql_native_password로 변경해주면 일반적인 로그인이 가능하다.
mysql> update user set plugin='mysql_native_password' where user='root';
mysql> flush privileges;
mysql> select user, host, plugin from user;
+------------------+-----------------------+
| User | plugin |
+------------------+-----------------------+
| root | mysql_native_password |
| mysql.sys | mysql_native_password |
| debian-sys-maint | mysql_native_password |
+------------------+-----------------------+
mysql> exit;
Bye$ mysql -u root