토이프로젝트 - PIViewer(6) 배포하기

배포 구조

---

프론트 엔드 서버 구축하기

Apache Tomcat® - Welcome!

 

해당 부분으로 아파치 톰캣을 다운 받은 zip을 풀면된다

이러면 아파치 톰캣을 설치가 완료 되었습니다.

 

apache-tomcat-10.1.16 -> bin -> startup.bat을 실행하면 서버가 실행합니다.

프론트엔드 ( 리액트 )를 아파치 톰캣 환경에서 실행하기 위해서는 해당 파일을 빌드를 해야한다.

 

npm run build

 

을 해서 코드들을 빌드 해줄 필요가 있다.

빌드된 파일들을 

 

apache-tomcat-10.1.16 -> webapps에 저장하면 된다.

여기서 폴더 이름을 build에서 프로젝트명으로 변경했습니다.

 

그리고 나서 실행을 하면 localhost:8080/piviewer 을 입력하게 되면 실행이 된다.

 

그런데 기존에는 그냥 localhost:8080으로 실행하던게 piviewer로 실행하는것이 프로젝트명을 입력해줘야지 실행하는 것이 불편하다.

 

해당 부분을 변경할수 있는것은

 

apache-tomcat-10.1.16 -> conf 폴더 아래에 있는

 

server.xml 을 수정해줘야 한다.

      <!-- 수정 전 -->
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

      <!-- 수정 후 -->
      <Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true">
          <Context path="/" docBase="piviewer"  reloadable="false" > </Context>

 

위와 같이 설정을 해주면 localhost:8080을 접속하면 기존과 같이 사용하는 것이 가능하다.

 

web.xml

    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

 

위의 설정은 로그인 버튼을 누르면 CSR로 클라이언트 측에서 렌더를 해서 바로 표시를 하는 구조인데 서버로 출력하기 때문에 html 페이지를 이동하지 않는다. 그런데 아파치 톰캣으로 구동을 하게 되면 일단 서버에서 받기 때문에 login에 대한 처리가 없기 때문에 404 에러를 발생 시킨다. 그것을 index.html로 로케이션을 변경시켜 주면 에러가 발생하지 않고 기존 동작과 같이 동작을 하게 된다.

---

백 엔드서버 구축하기

Spring을 아파치 톰캣으로 구동하고자 하면 war 파일을 만들어야 한다.

war 파일 만들기 gradle기준

실행이 완료되면

프로젝트 -> build -> libs 파일에 .war파일이 저장된다. 해당 파일을 구동하고자 하는 리눅스 아파치 톰캣 서버에 저장한다.

 

WinSCP :: Official Site :: Download

해당 sftp를 이용하기 위해서 WinSCP를 이용했다.

아파치 톰캣은 미리 다운로드 완료후

apache-tomcat-10.1.4 -> webapps 에 war파일을 옮겨 놓고 난뒤에

ssh로 해당 서버에 접속해서 apache-tomcat-10.1.4 -> bin -> startup.sh 로 실행하면 실행이 가능하다.

---

DB 서버 구축하기

맥에서 MariaDB 설치

// 마리아 DB 설치
brew install mariadb

// 설치 완료시 입력하면 실행
mariadb

 

properties에 h2 -> mariaDB로 설정을 변경해줘야 합니다.

spring.datasource.url=jdbc:mysql://맥의_IP주소:3306/데이터베이스_이름
spring.datasource.username=사용자명
spring.datasource.password=비밀번호
spring.datasource.driver-class-name=org.mariadb.jdbc.Driver

 

그렇게 한뒤에

맥에서 데이터베이스_이름에 해당하는 database를 생성

create database piviewer

 

그러고 난뒤에 권한을 줘야한다.

grant all privileges on piviewer to '사용자명'@'호스트' identified by '비밀번호' with grant option;

 

권한의 사용자명과 비밀번호는 spring properties에서 설정과 일치해야하고 호스트는 데이터베이스를 사용하는 서버 즉 백엔드 서버에 대한 주소를 입력을 해야한다. 

 

그렇게 한뒤에 flush privileges로 변경사항을 즉시 반영하게 한뒤에

mariaDB를 재시작 해주면 모든 배포할 준비는 모두 갖추게 된다.