📃 요약
Nginx / Tomcat 을 이용해서 배포를 진행해 보도록 하겠습니다.
Vue 는 Nginx 웹서버에 배포하고, 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 중지 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
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
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
-->
<GlobalNamingResources>
<!-- Editable user database that can also be used by
UserDatabaseRealm to authenticate users
-->
<Resource name="UserDatabase" auth="Container"
type="org.apache.catalina.UserDatabase"
description="User database that can be updated and saved"
factory="org.apache.catalina.users.MemoryUserDatabaseFactory"
pathname="conf/tomcat-users.xml" />
</GlobalNamingResources>
<!-- 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"
connectionTimeout="20000"
redirectPort="8443"
maxParameterCount="1000"
/>
<!-- 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"
resourceName="UserDatabase"/>
</Realm>
<!-- 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 "%r" %s %b" />
</Host>
</Engine>
</Service>
</Server>
- 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 는 제거해서 압축했습니다.
감사합니다.