Haroon DevLog

안녕하세요,

Linux 서버가 준비가 완료되었으니 Backend 쪽을 서버에 올려보겠습니다!

• Web server : Nginx
• Backend : Spring MVC , Tomcat
• Frontend : Vue 3

1. Tomcat 설치

원하는 Tomcat 버전을 다운로드 해줍니다. tomcat의 archive에서 다운로드 할 수 있습니다.

우리는 tar.gz 확장자 파일을 다운로드 해야해요.

https://archive.apache.org/dist/tomcat/

해당 파일을 sftp 를 이용하여 서버에 업로드한 뒤, 해당 압축파일을 압축해제 합니다.

tar -zxvf <tomcat>.tar.gz

저는 9 버전을 다운로드 해서 압축해제 했어요!

2. Tomcat 설정

이제 tomcat에 설정을 해줄 차례인데요,

우리가 보통 eclipse에서 사용할 때 8080 포트를 사용하는데 우리는 8000번 포트에 tomcat을 올려보겠습니다.

tomcat 디렉토리가 있는 경로에서 시작할게요! (위 사진 위치입니다)

vi apache-tomcat-<version>/conf/server.xml

vi 편집기를 열어 tomcat 설정을 변경해주겠습니다.

뭐가 너무 많이 나온다고 무서워하지마세요!

기본 포트는 8080으로 되어있으니 8080으로 검색해서 8000으로 수정해주겠습니다.

/8080

/8080 을 vi 편집기에서 입력하면 8080을 검색하겠다는 뜻이에요!

Connector port="8080" 이라고 되어있는 부분을 8000으로 수정하면 됩니다!

수정할 땐 i 를 누르면 INSERT 모드가 될거에요. 왼쪽 아래에 나옵니다.

8000으로 잘 수정했으면, INSERT 모드를 종료하고 저장할게요.

esc를 한 번 누르고 (INSERT 모드 종료)

:wq!

vi 편집기에서 저장하는 명령어를 입력해주고 enter를 누르면 끝입니다!

3.  Spring 프로젝트를 War로 압축하기

eclipse에서 원하는 프로젝트를 우클릭해서 Export... 를 눌러줍니다.

Export 창에서 Web > WAR file을 선택하신 뒤에 원하는 경로에 위 사진처럼 체크하시고 Finish를 누릅니다!

저는 C드라이브에 war라는 폴더를 만들었어요.

여기서 중요한 점은 ROOT.war로 명칭을 변경해주세요!

ROOT.war로 변경하지 않으면 톰캣에서 추가적으로 설정을 해줘야합니다.

4. 서버 실행하기

우리가 저장했던 war 파일을 톰캣 디렉토리 내의 webapps에 업로드해줍니다.

<tomcat root>/apache-tomcat-<version>/webapps

다운로드 할 때 따라 들어갔던 톰캣 기본 파일들은 삭제하고

sftp를 이용해서 해당 경로에 war 파일을 업로드 해주세요.

cd <tomcat root>/apache-tomcat-<version>/bin
./startup.sh

톰캣 디렉토리 내의 bin 폴더에 들어가서 서버를 실행해줍니다.

올렸던 서버 IP 주소와 뒤에 8000번 포트를 적어주면 우리가 배포한 backend 서버가 올라가게됩니다.

(저는 톰캣 기본화면으로 띄웠습니다.)

도메인은 추후에 nginx에서 설정해주겠습니다.

다음은 Frontend를 배포할 차례입니다. 다음 글에서 계속할게요!

감사합니다.

안녕하세요, 최근 Vue3 프로젝트를 배포하면서 CORS 에러 때문에 너무 고생했었는데요,

Nginx를 통해서 간단하게 해결하는법 공유드립니다.

• Web server : Nginx
• Backend : Spring MVC , Tomcat
• Frontend : Vue 3

저는  rocky linux 서버에서 진행했습니다.

배포할 서버에 아무것도 없다고 생각하고 설치를 진행해보겠습니다.

Backend와 연결도 같이 진행할거니까 Backend 배포 준비도 함께 진행하겠습니다.

1. java 설치

설치 가능한 jdk 버전을 확인합니다.

 sudo yum list | grep jdk

원하시는 jdk 버전으로 설치합니다.

sudo yum install -y java-<version>

설치가 잘 되었는지 확인합니다.

java -version

2. Nginx 설치

참고한 사이트 : https://docs.rockylinux.org/ko/guides/web/nginx-mainline/

nginx를 설치하기 위해 저장소를 설치하고 모듈을 활성화합니다.

sudo dnf module enable nginx:mainline 의 경우는 오류가 날수도 있는데 무시하셔도 괜찮아요!

sudo dnf update
sudo dnf install epel-release
sudo dnf module enable nginx:mainline

nginx를 설치하고 실행해줍니다.

sudo dnf install nginx
sudo systemctl enable --now nginx

설치가 잘 되었는지 확인해줍니다.

nginx -v

이제 리눅스 서버쪽은 준비가 다 되었습니다!

순서대로 backend 와 frontend 세팅 이후에 nginx 설정까지 진행해서 CORS 에러를 피해볼게요!

감사합니다.