+ 00 00 0000

Have any Questions?

Nginx / Tomcat , Vue, Springboot Deploy

Nginx / Tomcat , Vue, Springboot Deploy

📃 요약

Nginx / Tomcat 을 이용해서 배포를 진행해 보도록 하겠습니다.
VueNginx 웹서버에 배포하고, Springboot 는 Tomcat 에 배포합니다.

프론트는 Vue 를 사용하고, 벡엔드는 Spring boot 를 사용합니다.
Springboot 의 내장 Tomcat 는 사용하지 않고 Tomcat 를 설치해서 배포해 보겠습니다.
그리고, 배포는 윈도우즈 환경에서 진행된다고 가정합니다.

DB 는 오라클 도커 이미지를 사용하고 계정은 scott ( 암호 : !Ds1234567890 ) 개발자 계정을 생성하고 사용합니다.
DB 개발자 계정 및 설치하는 방법은 생략합니다.

요소 기술 :

– 프론트엔드 : Vue

– 벡엔드 : Springboot & JPA

– DB : Oracle 18xe(Docker)
( Oracle 18xe 도커 이미지 주소 : https://hub.docker.com/r/kangtaegyung/oraclexe-18c )

– 웹서버 : Nginx 1.25.5

– 애플리케이션 서버(WAS) : Tomcat 10.x

결과 화면 :

  • Nginx 설치 후 첫 화면
  • Tomcat 설치 후 첫 화면

Vue 배포본 만들기 :

  • 배포본 위치 : dist 폴더에 배포본이 생김
– 배포 명령어
npm run build

String Boot 배포본 만들기 :

  • 배포본 위치 : build/libs/xxx.war
  • intellij 왼쪽 탭에서 gradle 메뉴 선택 후 : Tasks/build/war 더블 클릭 실행
    • 왼쪽 프로젝트 메뉴에서 build/libs 폴더에 배포본 생성됨 : xxx.war

📃 기술 구현

스펙 :

- Vue 3.x
- jdk 17
- spring boot 3.x
- intellij IDEA & gradle
- nginx 1.25.5
- tomcat 10.x 
- windows 환경

Nginx 실행/중지 :

# nginx 실행

# nginx 중지
nginx -s stop

Tomcat 실행/중지 :

# Tomcat 서비스 실행 : 윈도우 서비스 탭에서 Tomcat10 찾아 시작
# Tomcat 서비스 중지 : 윈도우 서비스 탭에서 Tomcat10 찾아 중지

Nginx 설정 : nginx-1.25.5\conf

worker_processes  1;                              # 동시 처리 프로세스 수 : 주로 cpu 개수로 정의
events {
    worker_connections  1024;                     # 동시 처리 접속 수

http {
    include       mime.types;                     # 특정 요청에 대한 처리방법 설정 : html -> html 파싱
    default_type  application/octet-stream;       # 기본 content-type 설정

    sendfile        on;                            # 파일 전송속도 증가

    keepalive_timeout  65;                         # 접속시 몇초동안 유지할 것 인지 설정

    server {
        listen       8080;
        server_name  localhost;

        location / {
            root   html;                           # 실제 서버 경로(path)
            index  index.html index.htm;      
            try_files $uri $uri/ /index.html;      # 요청한 주소의 uri 무시하고 index.html 제공

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;    # 에러 코드 발생시 표시할 페이지
        location = /50x.html {
            root   html;


  • listen 포트 : 80 -> 8080 수정
  • try_files $uri $uri/ /index.html 추가 : 요청한 주소의 uri 무시하고 index.html 제공
    • SPA index.html 1개로 모든 화면을 렌더링함,
    • 그래서 배포 후 url 직접 입력하면 다른 html 찾을 수 없어 404 에러가 발생함

Nginx 배포 위치 : nginx-1.25.5\html

  • Nginx 중지 : 명령프롬프트에서 nginx -s stop 실행
  • vue dist 폴더 내 소스 -> nginx-1.25.5\html 복사/붙여넣기
  • Nginx 시작 : nginx.exe 더블 클릭하면 실행됨 또는 명령프롬프트에서 nginx 실행

Tomcat 설정 : Tomcat 10.1\conf

<?xml version="1.0" encoding="UTF-8"?>
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at


  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  See the License for the specific language governing permissions and
  limitations under the License.
<!-- Note:  A "Server" is not itself a "Container", so you may not
     define subcomponents such as "Valves" at this level.
     Documentation at /docs/config/server.html
<Server port="-1" shutdown="SHUTDOWN">
  <Listener className="org.apache.catalina.startup.VersionLoggerListener" />

  <!-- OpenSSL support using Tomcat Native -->
  <Listener className="org.apache.catalina.core.AprLifecycleListener" />

  <!-- Prevent memory leaks due to use of particular java/javax APIs-->
  <Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener" />
  <Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener" />
  <Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener" />

  <!-- Global JNDI resources
       Documentation at /docs/jndi-resources-howto.html
    <!-- Editable user database that can also be used by
         UserDatabaseRealm to authenticate users
    <Resource name="UserDatabase" auth="Container"
              description="User database that can be updated and saved"
              pathname="conf/tomcat-users.xml" />

  <!-- A "Service" is a collection of one or more "Connectors" that share
       a single "Container" Note:  A "Service" is not itself a "Container",
       so you may not define subcomponents such as "Valves" at this level.
       Documentation at /docs/config/service.html
  <Service name="Catalina">

    <!-- A "Connector" represents an endpoint by which requests are received
         and responses are returned. Documentation at :
         HTTP Connector: /docs/config/http.html
         AJP  Connector: /docs/config/ajp.html
         Define a non-SSL/TLS HTTP/1.1 Connector on port 8000
    <!-- TODO: 벡엔드 포트 정의 : 8000 -->
    <Connector port="8000" protocol="HTTP/1.1"

    <!-- You should set jvmRoute to support load-balancing via AJP ie :
    <Engine name="Catalina" defaultHost="localhost" jvmRoute="jvm1">
    <Engine name="Catalina" defaultHost="localhost">

      <!-- Use the LockOutRealm to prevent attempts to guess user passwords
           via a brute-force attack -->
      <Realm className="org.apache.catalina.realm.LockOutRealm">
        <!-- This Realm uses the UserDatabase configured in the global JNDI
             resources under the key "UserDatabase".  Any edits
             that are performed against this UserDatabase are immediately
             available for use by the Realm.  -->
        <Realm className="org.apache.catalina.realm.UserDatabaseRealm"

     <!-- TODO: 도메인 : localhost , springboot 소스폴더 : webapps -->
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />

  • Connector port=”8000″ protocol=”HTTP/1.1″ : 벡엔드 포트 정의 (8000)
  • Host name=”localhost” appBase=”webapps” : 도메인 (localhost) , springboot 소스폴더 (webapps)

Tomcat 배포 : Tomcat 10.1\webapps

  • Tomcat 서비스 중지
  • springboot xxx.war -> ROOT.war 이름변경
  • Tomcat 10.1\webapps 에 ROOT.war 복사 / 붙여넣기
  • Tomcat 서비스 시작

📃 결론

Nginx / Tomcat 을 이용해서 배포를 진행하는 예제를 살펴보았습니다.

Vue 가 8080 포트를 이용하고, Springboot 는 8000 포트를 이용합니다.
Nginx 는 8080 포트로 설정하고 , Tomcat 은 8000 포트로 설정했습니다.
Vue 는 Nginx 에 배포하고, Springboot 는 Tomcat 에 war 로 압축해서 배포했습니다.
war 압축 시 내장 Tomcat 는 제거해서 압축했습니다.


답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다