[삽질 가득 서버 설치기] [Apache + Tomcat] 4 - 소스코드 배포환경 구성

개요

소제목 : 아파치, 톰캣, 우분투, Apache & Tomcat on Ubuntu with AWS

시작하기 전에

• 커맨드는 $ 표시로 구분하였다.
• 중요한 내용이 아닌 경우 [참고] 라는 이름으로 별도의 타이틀링을 하였다. 삽질 과정의 주저리로서 무시해도 괜찮은 내용이다.삽질 과정을 모두 기록한 글이기 때문에, 중간 중간 과도하게 상세한 설명이 들어가있다.
• JDK 설치를 위해서 반드시 진행해야 하는 부분은 [👨🏼‍💻 중요] 표시로 구분하였다. 이 표시만 따라가면 우분투 리눅스에 JDK 를 설치할 수 있다.

이전 과정 요약

1. AWS 인스턴스를 생성
2. 리눅스에 JAVA(JDK) 설치
3. Tomcat 서버 설치
4. Apache 서버 설치
5. mod_JK 를 설치하여 두 서버(tomcat, apache)를 연동해주었다.

이제 html 파일은 Apache 가 처리할 것이고, jsp, servlet 파일은 tomcat 이 처리할 것이다.

앞으로 하려고 하는 것

고양이도(톰캣) 보았고, 아파치도 보았다.(It works!) 그렇다면 이제는 내가 서비스하고자 하는 소스코드를 우리가 만들어준 서버가 서비스할 수 있도록 서버에 올려줘야 한다.

 

이 과정은 우리가 이전에 도큐먼트 루트(Document Root) 로 지정해준 /usr/local/tomcat8/webapps/ROOT 에 소스파일을 등록하는 것으로 가능해진다. 현재는 아무것도 해주지 않았기 때문에 Document Root 인 Tomcat 의 webapps/ROOT 폴더 안에 기본으로 존재하는 index.jsp 파일이 작동한다.

 

Vim 에디터가 강력하다고는 하지만 모든 소스코드를 Vim 으로 직접 작성할 수는 없는 노릇이다. 또한, GUI 환경에서 소스코드를 작성한 후, 작성된 파일을 리눅스에 연결할 수 있으면 좋을 것이다. [👨🏼‍💻 중요] 그런 의미에서 에디터는 VS Code 를 활용하도록 하자.

 

원격 컴퓨터에서 VS Code 를 실행시킬 수 밖에 없다. 따라서 다음과 같은 두 가지 조건이 필요하다.

1. 서버의 파일을 원격에서 VS Code 로 불러올 수 있어야 한다.
2. VS Code 에서 서버에 저장할 수 있어야 한다.

(VS Code 는 설치시 Git이 설치가 되어 있지 않다면 Git 의 위치를 물어본다. git 이 필요하니 git 또한 설치하자.)

HTML5UP 에서 템플릿 파일을 다운로드 받아 리눅스 서버상에 업로드 해보자.

먼저 그 방법을 여러가지 조사하여 아래와 같이 정리하였다.

 

 

원격에서 Linux에 파일 등록

본 글을 쓸데없이 장황하다. 아래 총 3가지 항목 중에 하나만 구성하더라도 배포 환경을 구축했다고 할 수 있다.

• 방법1 - FileZilla
• 방법2 - Git
• 방법3 - SFTP on VS code (Extension)

방법1 - FileZilla

FTP 프로토콜을 활용하여 파일전송을 도와주는 응용프로그램이다.

FileZilla - FTP 프로토콜을 GUI 환경에서 편리하게 제어할 수 있게 도와준다.

개요

[👨🏼‍💻 중요] 소스 코드 저장시 서버와 자동 연동을 원한다면 다음(Git, Github 이용하기 항목) 으로 건너뛰자.

 

컴퓨터 사이의 파일이동 그 이상의 의미는 없다. 즉, 실제 구축한 서버 외에 다른 컴퓨터에서 자체 localhost 환경을 구축하여 개발 후 작성된 파일들을 한꺼번에 등록하고자 할 때 사용할 수는 있을 것 같다. 하지만, 소소코드가 자주 리뉴얼되어야 하는 사이트의 특성상, 본 과정 자체는 SFTP 를 활용하여 파일을 주고 받을 때 필요한 조건 그 이상의 의미는 없다고 봐도 무방할 것 같다.

 

이미 작성된 소스코드 및 다양한 파일들을 리눅스상에 옮겨줄 수 있다. 꽤 간단한 설정으로 리눅스 서버에 접속할 수 있다.

FileZilla 새 연결

Filezilla Client 를 다운받고 실행시킨다.

실행된 화면에서
파일 - 사이트관리자(Ctrl +S) - 새 사이트 를 클릭한다.

호스트

주소 또는 DNS 주소를 입력한다.

포트

지정해주지 않는다.

• AWS 의 보안설정(Network & Security) 지원 프로토콜에 기본적으로 FTP 는 없다.
• 사용자 지정 TCP 를 선택하고 21번 포트를 등록해야 한다.
• 그런데 FileZilla의 FTP 프로토콜 설정시 아래 그림과 같이 로그온 유형에 "키 파일"이 없다. 따라서 우리는 SFTP 를 사용해야 한다. (AWS EC2 는 기본적으로 .pem 을 사용하는 SSH 로그인 방식을 사용한다. AWS EC2 를 생성했다면 해당 .pem키를 등록해주는 과정을 다음에서 진행한다.)

프로토콜

프로토콜로 FTP 로 설정한 경우에는 다음과 같이 화면이 뜬다.

프로토콜로 FTP 를 선택한 화면

프로토콜로 SFTP 를 선택한 경우에는 다음과 같은 화면이 뜬다.

프로토콜로 SFTP 를 선택한 화면

AWS 보안설정에서 SSH 는 기본적으로 포트 22를 사용했었는데, 실제로 SFTP 를 선택하고 포트에 22 를 입력하면(또는 공백으로 두거나) 연결이 잘 되지만, 다른 포트를 입력하면 연결이 되지 않는다.

[참조] SFTP - File Transfer Protocol

SSH 파일 전송 프로토콜

위 링크를 참고하면 알겠지만, 다른건 잘 모르겠고 눈에 들어오는 대목은 하나다. "FTP 이상의 이점이 있는데 ..."

사용자

사용자는 ubuntu를 입력한다.
기본적으로 이전에 소개한 내용을 따랐다면 'ubuntu' 를 입력한다. (또는 직접 입력한 아이디가 있다면 그 아이디를 입력한다.)
리눅스 접속 후 whoami 명령어를 사용하면 나의 계정명을 확인할 수 있다.

키파일

키 파일 : AWS 에서 인스턴스 설치시 발급한 *.pem 파일의 경로를 넣어준다.

파일 주고받기

GUI 환경에서 편하게 파일을 주고받을 수 있다. (자세한 내용은 생략한다.)

방법2 - git & github

git 과 github을 활용하여 소스코드 공유 환경을 구축한다. 협업을 위한 소스코드 공유 환경을 구축함과 동시에 배포환경도 구축할 수 있다.

개요

협업을 위한다면 사실상 가장 의미있는 환경 구축이다. git을 모르지만 협업 환경을 구축해야 한다면 git 을 학습하고 오는 것을 추천한다.

지옥에서 온 git - 생활코딩
git from the hell - coldMater

코드 등록을 위해서는 다음과 같은 git 의 기본 절차를 따라야 한다.

개발자의 로컬 컴퓨터에서
에디터 (VS Code) On 원격 컴퓨터(사용자의 로컬 컴퓨터)에서

$ git add *
$ git commit -am 'Nth Commit'
$ git push

Linux 서버 컴퓨터에서(EC2)

$ git pull

원격컴퓨터와 서버 컴퓨터 사이에 Github 상의 Repository가 있음을 인지하자. Push 와 Pull 과정이 각각 필요한 이유다.

git 에 익숙하지 않다면 생활코딩의 버전관리 모듈을 참고하자. 해당 강의를 요약해놓은 글들이 본 블로그 git from the hell 카테고리에 있다. git 의 기본적인 명령어를 빠르게 훑어볼 수 있다.

VS Code 에서는 git 을 GUI 로 컨트롤 할 수도 있지만, Terminal 을 활용하여 Command로 git 을 제어할 수 있다.

※ 실제 협업을 위해서는 Team 구성원을 github 에 알려야 한다. 이 과정은 본 과정에 포함되어있지 않다.
※ 각종 충돌상황에 대해서는 언급하고 있지 않다. git에 익숙하지 않다면, 꼭 수업을 듣길 권장한다.
※ Git 에 관한 내용을 쓰고 나니, 망글이라는 생각이 든다. 혹시라도 정신건강을 우려한다면 과감히 건너뛰자.

github 설정

vscode 에서는 기본적으로 git 과 연동된다. git 이 없다면 먼저 git 을 설치하자. 보통 자동으로 VS Code git 의 유무를 자동으로 감지한다.

• github 홈페이지 에서 github 에서 Repository 를 생성한다.
• Repository 의 주소를 복사한다.
• VS Code 및 원격 컴퓨터에서 적절한 위치에 폴더를 생성한다.
  c:/ubuntu/root/
• 해당 폴더의 오른쪽 버튼을 누르면 "Open In Command Prompt" 가 있다. 누르자. 그럼 Terminal 에 명령어를 입력하여 상황을 제어할 수 있다.

해당 디렉토리 경로로 Console 창을 연다.

[👨🏼‍💻 중요]

$ git clone https://github.com/coldMater/portfolio.git [folderName]

위와 같이복사한 URL 을 넣고 folderName 은 원하는 폴더네임을 적어준다.
현재 들어와있는 폴더에 clone하고 싶다면 폴더네임 대신 . 을 적어준다. (. 은 현재폴더라는 상대경로를 의미)

HTML5 UP 사이트에서 마음에 드는 템플릿을 받아 압축을 풀고 해당 폴더에 복사한다.

[소스코드 push] 개발자 컴퓨터 ➡ git repository

ROOT 폴더 바로 아래에 index.html 파일이 있어야 하므로 이를 염두에 두고 폴더 트리 체계를 구성해야한다.
.git 이라는 폴더와 index.html 파일이 같은 공간에 있도록(아래 그림 참고) 설정해주면 된다.

.git 폴더와 index.html

[👨🏼‍💻 중요]

$ git commit -am 'HTML5 UP Templat Added On'

'HTML5 UP Template Added On' 안의 내용은 임의로 설정하여도 된다. 이를 커밋메시지라고 부른다.

• -a옵션: 변경된 모든 파일에 대해서
• -m옵션: vi 에디터에서 커밋메시지 수정하는 과정을 생략하고 커밋메시지 바로 적용
  (이 옵션이 없으면 vi editor 에서 commit message 를 써주어야 한다.)

[👨🏼‍💻 중요]

$ git push

여기까지 완료되면 github 의 원격 repository 에 템플릿이 업로드(push) 되었을 것이다.

이 과정에서 github 의 ID 와 비밀번호를 입력해야할 수도 있다.
clone 은 인증절차 없이 가능하다. 단, push 할 때는 인증절차가 필요하다. 해당 repository 에 관한 권한이 있어야한다. github 의 협업 환경 구축에 대해 더 자세한 내용은 다른 글을 참조하자.

[소스코드 pull] git repository ➡ 리눅스 서버(EC2 우분투)

AWS 의 우분투 인스턴스를 통해 설치한 Linux 에는 기본적으로 git 이 설치되어 있다. 설치되어 있지 않다면 git 을 설치한 뒤 진행한다.

아래의 위치로 이동해서 github Repository 로부터 업로드된 소스코드를 PULL 받아올 것이다.

기존 ROOT 디렉토리 삭제

[👨🏼‍💻 중요]

$ cd /usr/local/tomcat8/webapps

먼저, 기존의 ROOT 를 삭제한다. 이 과정은 ROOT 디렉토리를 깨끗하게 삭제하는 과정이다. (혹시라도 보존해야 할 것이 있다면 주의하자.)

[👨🏼‍💻 중요]

$ rm -rf ROOT

• rm: remove, 삭제
• -r: recursive, 하위 모든 디렉토리들도
• -f: force, 강제로(묻지도 따지지도 않고)

소스코드 pull

현재는 webapps 디렉토리 밑에 있음을 확인한 뒤, 다음 명령어를 실행하여 github repository로부터 소스코드를 pull 받는다.

[👨🏼‍💻 중요]

$ git clone [https://github.com/coldMater/portfolio.git](https://github.com/coldMater/portfolio.git) ROOT

clone 과정에서는 해당 폴더가 없거나, 비어있어야 한다. (위에서 지워준 이유가 그것이다.) ROOT 폴더가 생성되고, 해당 디렉토리가 채워져 있음을 확인하자.

Push & Pull 테스트

개발자의 컴퓨터에서 VS Code 에서 변경사항을 commit 후 push 하고, Linux 서버에서 pull 받으면 변경사항이 적용된다. 실제로 웹브라우저에서 잘 작동하는지 확인하자. 그리고 환호하자.

[VScode Extension] SFTP

[vscode extension] SFTP, 별이 5개!!!(거의)

개요

SFTP (sftp sync extension for VS Code)

리눅스의 디텍토리와 개발환경의 디렉토리를 연동한다. 몇가지 설정을 해두면, 간단한 조작만으로 소스코드의 변경사항을 로컬 컴퓨터와 서버 컴퓨터 사이에 적용한다.

AWS 상에서 인스턴스를 만들어 서버를 구동하는 경우, 다음과 같은 설정만으로 연동 가능하다.

서버의 정보를 기술하고 pem 키의 위치를 입력한다.

사용법

• extension 에서 sftp 검색 후 install
• 위의 그림과 같은 설정을 해준다. (SSH 방식이 아닌 id/password 로 접속시 sftp extension 의 매뉴얼을 참고하자.)
• 혹시 워크스페이스 내부에 특정 폴더와 연동하고 싶은 경우 다음과 같은 설정을 추가한다.
  워크스페이스를 기준으로 상대경로를 적어주기 - "context":"./internal"

VSCode FTP Extensions

remote vscode

[👨🏼‍💻 중요]

로컬의 VS Code 상에서 터미널으로 리눅스 제어가 가능한데, 편집을 VS Code 편집기로 할 수 있다.

Remote File Editing Over SSH with Visual Studio Code
Editing files in your Linux Virtual Machine made a lot easier with Remote VSCode
(위 글은 꼭 봐보도록 하자!)

• 로컬의 VS Code 상에 extension 설치가 필요하다.
• 서버의 리눅스상에 추가 프로그램(rmate) 설치가 필요하다.
• 근데 난 잘 안된다... 서버에 연결할 수 없다고만 자꾸 뜬다..

FTP 계열과 remote vscode 의 차이점
FTP 계열은 VS Code 상에서 서버의 변경하고자 하는 리눅스상의 디렉토리를 설정 후, 해당 디렉토리에 수정한 파일을 업로드, 다운로드 하는 식으로 코드를 제어할 수 있다. 즉, 소스코드가 아닌 파일도 주고 받을 수 있다.

반면 rmate 는 목적 자체가 로컬의 terminal 에서 소스코드 수정시 Vim 대신 VS Code 에디터를 이용하겠다는 것이다.

remote_Browser

[vscode extension] remote-browser, 이건 진짜 별이 5개!!!

그러다가 우연히 이 익스텐션을 찾았다. ftp 익스텐션과 비슷한 방식으로 설정 옵션을 지정한다. 명령어를 통해 Connect 를 하면 화면 좌측에 아예 linux explorer 라고 할 수 있는 기능이 나타난다.

 

root 폴더를 지정할 수 있는 명령어를 활용하여 리눅스 서버의 root 폴더를 지정하고 VScode 상에서 파일을 수정하여 저장하면, [👨🏼‍💻 중요] 리눅스에 곧바로 반영된다. 대박!!! 🎉🎉🎉

 

🚨 필자는 이걸 써서 ROOT 파일을 수정했는데(그것도 아주 약간), 그 이후 톰캣이 죽어버렸다. Tomcat이 죽은 이유가 remote_browser를 사용해서 그런 것인지는 정확하지 않다. 하지만, remote_browser 를 사용하다가 이런 현상이 발생해서 참고하자는 의미에서 기록을 남긴다.

정리

VS Code 상에서 변경한 코드를 당장 서버에 적용시키길 원한다면 remote_browser VSCode Extension을 사용한다.
🚨 파일의 추가나 삭제는 어렵다. 단지 파일의 수정만 가능한 것 같다.

 

리눅스에서 vim 을 실행시키듯이 VS Code 를 실행시키고 싶다면 Remote VSCode 를 사용한다.

 

안정적인 GUI 환경에서 로컬과 리모트 간에 파일 전송을 원한다면 Fillzilla 를 사용한다.

 

VS Code 상에서 따로 프로그램(FileZilla 등)을 실행시키지 않고 파일 전송을 하려면 FTP 계열 Extension (상위 소개) 을 사용한다.

※ 그러나, 로컬과 리모트의 파일 상황을 보여줄 수 있는 FileZilla 가 더 안전한(원치 않는 정보의 삭제가 일어나지 않는) 파일 전송이 가능할 것 같다.

 

습득에는 시간이 걸리지만, Commit, Push, Pull 기능과 함께 파일 전송 및 소스코드 관리를 체계적이고 안정적으로으로 하길 원한다면 Git 과 Github 을 사용한다.

 

다음번엔 DB(MySQL) 와 연동하여 JSP 페이지를 표현해보자.