[Windows] Apache 웹서버로 Vue.js, Spring Boot 연동

환경구성

FE : Vue.js 2.5

BE : Spring Boot 2.1.4

WEB Server : Apache 2.4.54 - (https://www.apachelounge.com/download/VS16/)

mod_jk : 1.2.48 - (https://www.apachelounge.com/download/VS16/)

WAS : Spring Boot 내장 Tomcat

---

1. Apache 웹서버 설정

1. Apache 웹서버를 다운받고 압축 해제 후 적당한 위치로 설정.

   ⇒ 해당 경로가 웹서버 경로.

2. mod_jk 를 다운받고 압축을 풀면 나오는 mod_jk.so 파일을 웹서버 modules 폴더 하위로 이동.

3. 웹서버 conf폴더 아래 httpd.conf 열기

   1. SRVROOT 설정. (웹서버 설치 폴더 경로)

   2. 아래 설정 추가

       LoadModule jk_module modules/mod_jk.so
      
       <IfModule jk_module>
           JkWorkersFile    conf/workers.properties
           JkLogFile        logs/mod_jk.log
           JkMount /BP/* worker1 # 매핑시킬 경로와 워커 설정. 해당 설정의 경우 /BP를 달고 들어오는 요청을 worker를 통해서 매핑시킴.
           JkLogLevel info
       </IfModule>

4. JkWorkersFile 경로에 workers.properties 파일 생성 후 아래 설정 추가

    worker.list=worker1 # 워커 리스트
   
    worker.worker1.type=ajp13
    worker.worker1.host=localhost # BE 와 연결할 주소
    worker.worker1.port=7171 # BE 와 연결할 포트

2. FE 프로젝트 빌드

1. npm run build 를 실행하면 dist폴더가 생김. 해당 폴더를 Apache 웹 서버의 DocumentRoot위치에 넣어줌.
   • httpd.conf 파일에서 확인가능. 기본 경로 : ${SRVROOT}/htdocs
   • SRVROOT도 httpd.conf에서 설정 가능. 웹서버 설치 경로를 지정.

3. BE 프로젝트 웹서버 설정

서버 포트와 AJP 통신 설정을 아래와 같이 해줌.

application.yml

tomcat:
  ajp:
    protocol: AJP/1.3
    port: 7171 # WEB Server와 연결할 경로

ContainerConfig.java

import org.apache.catalina.connector.Connector;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
import org.springframework.boot.web.servlet.server.ServletWebServerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class ContainerConfig {
    @Value("${tomcat.ajp.protocol}")
    String ajpProtocol;
    @Value("${tomcat.ajp.port}")
    int ajpPort;

    @Bean
    public ServletWebServerFactory servletContainer() {
        TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory();
        tomcat.addAdditionalTomcatConnectors(createAjpConnector());
        return tomcat;
    }

    private Connector createAjpConnector() {
        Connector ajpConnector = new Connector(ajpProtocol);
        ajpConnector.setPort(ajpPort);
        ajpConnector.setSecure(false);
        ajpConnector.setAllowTrace(false);
        ajpConnector.setScheme("http");
        return ajpConnector;
    }
}

AJP 설정이 정상적으로 되었다면 Spring Boot 실행시 아래와 같이 AJP 포트가 보임.

4. 실행

1. bin 폴더 아래의 httpd.exe를 실행 후 start를 눌러 웹서버를 실행.

   ⇒ 다른 설정을 건들지 않고 진행했다면, localhost:80 에 접속해서 worker에 지정한 경로로 요청을 보내면, BE의 설정한 포트(본문에서는 7171)와 연결되어 통신.

   ※ httpd.exe 실행이 안된다면 Visual C ++ 재배포 가능 패키지 설치 필요.

   ⇒ https://visualstudio.microsoft.com/ko/downloads/

   작성일 기준 2022용 패키지가 패포중인데, 해당 패키지를 깔아도 문제 없는걸 확인.