[Section4][웹 애플리케이션 설계]

전체 항목

• 개발 앱 내용
• 필요 기능
• API 명세
• 주요 개발 
• 개발된 프로젝트의 깃허브
• 톰캣(WAS)를 사용하여 수동 배포
• Ngrok 사용
• 주의점

 

---

개발 앱 내용

할일(todo) 목록 리스트 관리 앱을 개발한다.

해당 앱을 WAR로 빌드하여 톰캣(WAS)로 수동 배포한다.

Ngrok을 사용하여 현재 내 로컬PC를 외부 접속이 가능하도록 하여 테스트해본다.

 

현재 개발 환경운 윈도우 10에 Intellij IDE를 사용하고 있다.

필요 기능

Create

• 할 일 목록을 등록 가능 해야함

Read

• 등록된 전체 할 일 목록을 조회할 수 있어야함
• 등록되어있는 할 일의 특정 id를 입력하여 조회할 수 있어야 함

Update

• 이미 한 일에는 완료 표시를 할 수 있어야 함
• 할 일의 내용을 수정할 수 있어야 함

Delete

• 등록된 전체 할 일을 삭제할 수 있어야 함
• 등록되어있는 할 일의 특정 id를 입력하여 삭제할 수 있어야 함

 

API 명세

POST	http://localhost:8080/	{   “title” : “운동하기”,   “order” : 1,   “completed” : false }	{   "id": 1,   "title": "운동하기",   "order": 1,   "completed": false, }
GET	http://localhost:8080/		[   {     "id": 1,     "title": "운동하기",     "order": 1,     "completed": false,   },   {     "id": 2,     "title": "공부하기",          "order": 2,     "completed": false,   } ]
GET	http://localhost:8080/{id}		{   "id": 1,   "title": "운동하기",   "order": 1,   "completed": false, }
PATCH	http://localhost:8080/{id}	{   “title” : “운동하기”,   “order” : 1,   “completed” : true }	{   “id” : 1,   “title” : “운동하기”,   “order” : 1,   “completed” : true }
DELETE	http://localhost:8080/
DELETE	http://localhost:8080/{id}

 

주요 개발 

• Controller, Service, Repository 각 계층을 개발
• MapStruct 사용
• WAS를 사용하여 WAR 파일 자체로 배포
• Ngrok을 사용하여 개발환경을 외부에서 접속 가능하도록 함
  
  

 

개발된 프로젝트의 깃허브

https://github.com/JanuaryKim/solo-todo-app

GitHub - JanuaryKim/solo-todo-app: 솔로 프로젝트

 

 

톰캣(WAS)를 사용하여 수동 배포

수동 배포 과정

• JRE 설치 (JDK 11 버전 보다 최근에 나온 버전이라면 할 필요 없을수도 있음)
  JAVA 만들어진 프로그램을 구동시키기 위함.
  다운링크 : https://www.azul.com/downloads/?version=java-11-lts&os=windows&architecture=x86-64-bit&package=jre
  .msi 확장자의 installer를 받는다
  설치를 진행한다.
  
  환경변수를 등록한다.
  - 변수 이름 : JRE_HOME
  - 변수 값 : C:\Program Files\Zulu\zulu-11-jre
  
  
  
• 톰캣 설치
  https://tomcat.apache.org/download-90.cgi 접속하여 버전 9 다운
  zip 파일을 다운 받아 압축을 푼다
  
  톰캣 폴더 내용
  - bin : 톰캣을 실행하거나 종료할 수 있는 스크립트 파일이 들어있습니다.
  - conf : 서버 설정 파일이 들어있습니다.
  - webapps : 톰캣 위에서 실행할 웹 애플리케이션의 기본 저장 경로입니다. .war 파일을 이 곳에 이동시키거나, 설정파일에서 경로를 변경하여 실행할 수 있습니다.
  
  
  
• 프로젝트의 빌드 방식을 JAR -> WAR 로 변경 하여 빌드
  
  - build.gradle

plugins {
    id 'org.springframework.boot' version '2.4.2'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id 'war' // 추가합니다.
    id 'java'
}
...

- {project}Application 파일 수정

@SpringBootApplication
public class sampleApplication extends SpringBootServletInitializer { // (1)

    public static void main(String[] args) {
        SpringApplication.run(sampleApplication.class, args);
    }

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) { // (2)
        return builder.sources(sampleApplication.class);
    }
}

 해당 과정을 진행하고 빌드하면 WAR 파일 생성.

 

 

• 톰캣의 server.xml 수정

<Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true">
        <Context path="/" docBase="sample"  reloadable="false" > </Context>
        
        <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" />
</Host>

 

• WAR 파일 톰캣으로 실행
  webapps 폴더에 war 파일 넣고 톰캣 실행.
  톰캣의 bin 폴더로 가서 터미널 열고 
  ./startup.bat 입력 실행

 

Ngrok 사용

다운 링크 : https://ngrok.com/download

ngrok - download

ngrok.exe 위치로 터미널을 열고 아래 명령어를 입력시킨다.

ngrok http 8080

 

빨간박스의 도메인으로 내 로컬을 접속 텍스트 해본다.

 

 

 

 

주의점

 

1.

Todo-backend 사이트를 이용하여 테스트해 볼 경우, CORS 문제가 발생한다.
그러므로 Controller에

@CrossOrigin(origins = "https://todobackend.com")

입력하여 CORS 를 허용해줘야한다

 

 

2. 

Tasks entity 안에는 멤버필드 중에 

order 라는 필드가 있다.

해당 필드명은 sql 에서 쓰이는 order 라는 키워드와 중복이 되므로

따로 설정해주지 않으면 JPA가 Table 을 생성할때 에러가 발생한다.

아래와 같이 설정을 해주어야 한다.

 @Column(nullable = false, name = "\"ORDER\"")
    private Integer order;

참조 : https://github.com/raycon/til/issues/63