우분투 16.04에 리액트 배포하기

1. node && npm 설치
$ sudo apt-get update // 패키지 목록 최신으로 업데이트 해준다.

$ sudo apt-get install nodejs // nodejs 설치해준다.
$ sudo apt-get install npm // npm 설치 따로 해준다.

// 다른 패키지와의 충돌을 방지하기 위해, 우분투 저장소의 Node.js는 node 대신 nodejs 명령어를 사용합니다.
$  nodejs -v // v4.2.6

하지만... 프로젝트 node 버전은 14.8.0

우분투 16.04 저장소에서 지원하는 버전은 4.2.6 까지 인것 같다. 따라서 다시 삭제하고 최신버전으로 재설치했다.

$ sudo apt-get remove nodejs
$ sudo apt-get remove npm

// CURL 설치한다.
$ sudo apt-get install curl

// node 14 버전 설치
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

// NodeJS 설치
$ sudo apt-get install -y nodejs

// build-essential 설치
$ sudo apt-get install build-essential
/* npm install 시 에러가 나는 것 방지*/

// yarn 설치
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - // 저장소 추가
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 
$ sudo apt-get update && sudo apt-get install yarn // yarn 설치

2. 아파치 설치 (이미 설치되어 있어서 패스)

3. 리액트 프로젝트 클론 받아오기
$ yarn install
$ yarn build

4. 아파치 설정
$ cd /etc/apache2/sites-enabled
$ vi *.conf

>> 프로젝트 폴더 위치 잡아주기
<VirtualHost *:80> // 해당 포트
    ServerName  // 도메인 이름
    ServerAlias // 도메인 이름
    ServerAdmin // 도메인 이름
    DocumentRoot // 파일위치
        <Directory // 도메인 이름>
                Options Indexes FollowSymLinks
                AllowOverride All
                Require all granted
                RewriteEngine on // 하부 url에서 리로드 할 경우 404에러 나오는것 방지
                # Don't rewrite files or directories
                RewriteCond %{REQUEST_FILENAME} -f [OR]
                RewriteCond %{REQUEST_FILENAME} -d
                RewriteRule ^ - [L]
                # Rewrite everything else to index.html to allow html5 state links
                RewriteRule ^ index.html [L]
        </Directory>
    ErrorLog /var/log/apache2/***-error.log // 로그 위치
    CustomLog /var/log/apache2/***-access.log combined env=!dontlog // 로그 위치
</VirtualHost>

도메인 주소로 들어가서 확인해보기!

출처: https://soojae.tistory.com/25
출처: https://www.deok.me/entry/NodeJS-yarn-을-설치하고-yarn-을-이용하여-패키지-관리하기