[React] Apache를 이용해 서비스하기

http://test.com 에 배포하기로 했다고 해보자.

 

npm run build (yarn build)로 빌드한 후, 서버에 업로드했을때 정상적으로 표시되는 것으로 보인다.

 

그런데 /가 아닌 다른 경로로 처음 접속하면 404 페이지가 보인다.

 

리액트 프로젝트를 빌드하면 html파일은 index.html하나뿐이기 때문에 /, /index.html이 아니면

다른 경로로 접속했을 때 index.html을 읽어올 수 없기 때문이다.

 

즉, 어떤 경로로 접속하더라도 index.html 파일을 읽을 수 있도록 apache설정을 조금 만져주어야 한다.

 

Ubuntu 16.04, Apache 2.4.18을 기준으로 설명한다.

sudo nano /etc/apache2/apache2.conf

설정파일을 열고 (nano 대신 vi를 이용해도 상관없다)

...
<Directory /var/www/html>
        Options FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>
...

해당 부분을 찾아 AllowOverride 부분이 None으로 되어있다면 All로 바꿔준다

 

그리고 다시 프로젝트 폴더로 돌아와서, public 폴더에 .htaccess파일을 만든다.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

위의 내용을 추가한다 

 

이 조건은 요청 경로에 파일이 존재하지 않을 경우 전부 프로젝트 루트의 index.html를 반환하도록 설정하는 코드다

 

만약 모두 /index.html로 보내고 싶은게 아니라 특정 경로에 html이 있는 경우 보존하고 싶다면,

Options -MultiViews
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]

이 내용을 붙여넣는다.

(파일 또는 디렉터리가 존재할 경우 그대로, 존재하지 않을 경우 index.html 반환)

 

npm run build

프로젝트를 다시 빌드하고 /build폴더의 파일들을 서버에 업로드한다.

sudo service apache2 restart

서버에서 아파치를 재시작한다.

 

이제 http://test.com/뿐만 아니라, http://test.com/some_path 에 대해서도 정상적으로 index.html을 읽어올 수 있게 된다.