Server_React프로젝트 Aws서버에 배포하기

일단 서버를 받았으면 putty를 이용해 접속해주자.

그다음

1. git 설치하기

터미널에 아래 명령어 차례대로 입력해 깃을 설치하자

sudo apt-get install git
sudo apt install git

잘 설치되었는지 git --version 을 쳐서 확인해보자
잘 설치되었을 경우 이렇게 나옴.

이제 git clone 으로 만들어둔 프로젝트를 불러온다.

2. node,npm,yarn 설치하기

이제 필요한 버전의 node 버전을 설치해보자
차례대로 입력하면 됨

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install nodejs
npm install -g yarn

나는 16.18.0 버전을 사용하니까 setup_16.x 라고 해줬다

node -v
npm -v
yarn -v
로 잘 설치되었는지 확인하자

3. react 설치하기

일단 npm을 잘 작동하도록 하기위해

sudo apt-get install build-essential

뭐라뭐라 나오면 Y

요런 화면 나오면 OK 해주면 됨(enter)

이제

npm install -g create-react-app

리액트 설치하고
바로 npm install...하면 오류가난다.

의존성 문제때문에 그런것같으니

npm install --legacy-peer-deps

로 인스톨하자.

그다음

yarn build

잘 빌드 되었으면 이제 nginx를 설치해보자.

4. nginx 설치 및 세팅하기

sudo apt install nginx

일단 nginx 설치 하기.

그다음엔 기본으로 연결되어있는 설정파일들을 삭제하자

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

이제 베포해둔 주소로 연결 해주자.

sudo vi /etc/nginx/sites-available/myapp.conf

이렇게 vi 로 들어가서 i 누르고

server {
  listen 80;
  location / {
    root   /home/유저명/리액트프로젝트명/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

유저명과 프로젝트명은 자신의 프로젝트에 맞게 설정해주자.

그다음에 :wq 누르면 저장하고 나가짐

vi사용법은 인터넷 참고 하면 많이나온다.

sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf
sudo systemctl stop nginx
sudo systemctl start nginx

터미널에 차례대로 실행해주고(심볼릭 걸기, 껏다 켜기)
사이트 접속하면 됨.

5. AWS사용시 권한 변경해주기

chmod 711 /home/유저명

AWS 사용시 이거 안해주면 에러나옴..

이렇게 하면 이제 잘 된다...
끝!