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 에러를 피해볼게요!

감사합니다.

안녕하세요, 오늘은 Vue.js 설치하는 법에 대해 알아보겠습니다.

1. Node.js 설치
Node.js는 공식홈페이지와 NVM이라는 버전 관리 툴에서도 다운로드 받을 수 있는데,

오늘은 공식 홈페이지에서 다운로드 해보겠습니다.

https://nodejs.org/ko 에 접속하셔서 LTS 버전을 다운로드 합니다.

(* 여기서 LTS 이란 Long Term Service의 약자로 장기 지원되는 버전을 뜻합니다.)

다운로드 하실 때 기본 설정으로 받으시면 문제가 없을 겁니다.

정상적으로 설치가 되었는지 확인하려면 window cmd에서 node -v 커맨드와 npm -v 커맨드를 입력해보면 됩니다.

2. Vue.js 설치

아래 커맨드를 입력하여 vue.js를 다운로드 합니다.

npm install -g @vue/cli // 가장 최신버전

npm install -g @vue/cli@3.6.4 // vue3 특정 버전
npm install -g vue-cli@2.0.1 // vue2 특정 버전

vue --version 커맨드를 입력하여 정상적으로 설치되었는지 확인합니다.

Node와 Vue.js를 정상적으로 설치한 뒤 Window Cmd에서vue --version 을 입력했는데

아래와 같은 오류 메시지가 나오는 경우 해결했던 방법을 공유드립니다.

'vue'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

1. Window Powershell을 관리자 모드로 실행합니다.

2. Powershell에서 허용 커맨드를 입력합니다.

Set-ExecutionPolicy RemoteSigned
Y

3. 다시 cmd 창에서 vue.js 버전을 확인하면 정상적으로 나오는 것을 볼 수 있습니다.

문의 사항이나 혹시나 설명에 잘못된 부분이 있다면 언제든지 댓글 부탁드립니다!

감사합니다.

안녕하세요, 현재 풀스택 웹 개발자 2년차로 접어들고있는 하룬입니다.

제가 개발에 처음 시작하면서 입문하기 가장 두려웠지만 입문 후 가장 잘 사용하고있는 것 중 하나인 Git에 대해 설명하고자 합니다.

들어가기에 앞서, Git은 무엇이고 Github는 무엇인지 알아봅시다!

사실 해당 자료들은 구글링을 해보면 이미 많은 정보가 있기 때문에 저만의 방식으로 설명하여 이해를 돕고자 합니다.

1. Git 이란

Version Control System (VCS)의 일종으로 VCS는 우리나라에서 보통 형상관리라고 하는데요,

디렉토리(폴더) 내의 변경점을 모두 추적하여 저장하고 기록하는 것입니다.

현재 단계에서는 자세히 다루지는 않겠지만 blog_demo라는 폴더에 git을 사용하기위해

.git 이라는 숨겨진 폴더를 생성하였는데요,

저 폴더 안에 blog_demo 안에서 변경되는 기록들이 담겨집니다.

2. Github 이란

github가 무엇인지 설명하기 이전에 Remote Repository (원격 저장소)의 개념을 먼저 알려드려야할 것 같은데요,

용어 그대로 저희가 변경점을 저장하고 있는 .git 폴더와

위에서의 blog_demo 안의 모든 파일들이 저장되는 저장소라고 생각하시면 될 것 같습니다.

바로 그 원격 저장소 중 하나가 Github 인 것입니다.

정리하자면,

• 파일을 저장 : 폴더
• 파일이 저장(변경)되는 이력을 저장 : Git
• 파일이 저장(변경)되는 이력을 저장한 것을 저장 : Github

추가적으로,

• 형상 관리에는 Git 뿐만 아니라 SVN(Subversion)도 있으며 각 형상관리 툴에는 각자의 장단점이 존재합니다.
• Remote Repository에는 Github 뿐만 아니라 Gitlab과 같은 다른 사이트도 존재하며
  심지어 저희가 사용하고 있는 PC의 특정 폴더를 Remote Repository로 사용할 수도 있습니다!

다음 번에는,

• 윈도우 환경과 Mac 환경에서 Git 설치
• Git 초기 세팅

문의 사항이나 혹시나 설명에 잘못된 부분이 있다면 언제든지 댓글 부탁드립니다!

감사합니다.

[Icon 출처 : Simple Icons]

eclipse로 tomcat server를 돌리거나 docker로 8080포트를 사용할 때

종종 이미 8080포트가 사용중이어서 오류가 발생할 때가 있습니다.

직접 서버를 종료하셔도 되지만, 이미 종료했음에도 로컬에서 돌아가고 있다거나

이클립스를 꺼버렸다거나 등등의 경우에 아래와 같이 따라오시면 될 것 같습니다.

1. cmd를 관리자 권한으로 켜주세요

2. netstat -noa를 cmd에 입력해주세요

netstat -noa

종료하시고 싶은 포트의 PID를 확인합니다

3. taskkill /f /pid {port pid}를 cmd에 입력해주세요

taskkill /f /pid {port pid}

저의 경우 8080포트의 pid가 19584여서

taskkill /f /pid 19584 를 입력했습니다

4. 확인

다시 netstat -noa를 쳐보면

8080포트가 잘 종료된 것을 확인할 수 있습니다!