JavaRush /Java Blog /Random-KO /IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기. 사진과 함께 차근차근
Стас Пасинков
레벨 26
Киев

IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기. 사진과 함께 차근차근

Random-KO 그룹에 게시되었습니다
기사를 이해하는 데 필요한 지식 수준: 이미 Java Core를 어느 정도 이해했으며 JavaEE 기술 및 웹 프로그래밍을 살펴보고 싶습니다. 현재 기사와 가까운 주제를 다루는 Java 컬렉션 퀘스트를 연구하고 있다면 가장 적합합니다. IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기.  사진과 함께 단계별로 - 1저는 현재 IntelliJ IDEA Enterprise Edition을 사용하고 있습니다(이것은 유료 고급 버전의 IDE이며 일반적으로 전문 개발에 사용됩니다 - 편집자 주 ). 무료 Community Edition보다 웹 프로젝트 작업이 훨씬 쉽습니다. 따라서 Enterprise Edition에서는 말 그대로 마우스를 한 번만 클릭하면 프로젝트가 어셈블링되고 서블릿 컨테이너에 부어지며 서버가 시작되고 실행 중인 프로젝트가 있는 페이지도 브라우저에서 열립니다. 무료 버전의 아이디어에서는 이 중 많은 부분을 독립적으로, 즉 "손으로" 수행해야 합니다. 저는 Apache Maven을 사용하여 프로젝트를 빌드하고 수명주기를 관리합니다. 여기에서는 해당 기능(패키지/종속성 관리) 중 극히 일부만 사용했습니다. 나는 서블릿 컨테이너/애플리케이션 서버로 Apache Tomcat 버전 9.0.0.M4를 선택했습니다. 이미 최신 버전이 있다는 것을 알고 있지만 이것이 제가 설치한 버전입니다.

시작하자

먼저 IntelliJ IDEA를 열고 빈 Maven 프로젝트를 생성해 보겠습니다.
IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기.  사진과 함께 단계별로 - 2
여기 왼쪽에서 Maven을 선택하고 프로젝트의 JDK가 상단에 표시되어 있는지 확인합니다. 없으면 목록에서 필요한 것을 선택하거나 새로 만들기...를 클릭하고 컴퓨터에서 직접 선택하십시오. 창 중앙에는 원형 목록을 로드하는 애니메이션이 있습니다. 필요하지 않으므로 다운로드를 기다리지 말고 창 하단에 있는 다음을 클릭하세요.
IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기.  사진과 함께 단계별로 - 3
이 창에서는 GroupId 및 ArtifactId 를 지정해야 합니다 . GroupId는 프로젝트를 제작하는 회사의 고유 식별자를 나타냅니다. 회사의 도메인 이름을 사용하는 것이 일반적인 관행이지만 그 순서는 반대입니다. 미러라는 의미는 아니지만, 예를 들어 회사의 도메인 이름이 maven.apache.org라면 해당 GroupId는 org.apache.maven이 됩니다 . 즉, 먼저 첫 번째 수준 도메인을 작성하고 점으로 구분한 다음 두 번째 수준 도메인의 이름을 적는 식으로 진행합니다. 이는 일반적으로 허용되는 접근 방식입니다. 회사의 일원이 아닌 스스로 프로젝트를 "절단"하는 경우 여기에 개인 도메인 이름을 적습니다(역순으로도!). 물론 가지고 있다면 :). 그렇지 않다면 화를 내지 마십시오. 사실 여기에는 무엇이든 쓸 수 있습니다 .
도메인 이름이 vasya.pupkin.org인 회사의 경우 그룹 ID는 org.pupkin.vasya입니다. 이름은 같지만 다른 회사에서 출시한 프로젝트를 분리하려면 이름에 대한 이러한 접근 방식이 필요합니다.
이 예에서는 가상의 도메인 이름 fatfaggy.info.javarush.ru를 사용하겠습니다 . 따라서 GroupId 필드에 ru.javarush.info.fatfaggy를 입력합니다 . ArtefactId 는 단순히 프로젝트의 이름입니다. 문자와 일부 기호(예: 하이픈)를 사용하여 단어를 구분할 수 있습니다. 우리의 "아티팩트"는 우리가 여기에 쓴 것과 정확히 동일하게 호출됩니다. 이 예에서는 my-super-project 를 작성합니다 . 지금은 버전 필드를 건드리지 않고 그대로 둡니다.
IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기.  사진과 함께 단계별로 - 4
음, 새 프로젝트를 만들 때의 표준 IDEA 창입니다. 전통에 따르면 이를 나의 슈퍼 프로젝트 라고 부르자 .
IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기.  사진과 함께 단계별로 - 5
프로젝트가 생성되었습니다!
pom.xml 파일이 바로 우리 앞에 열렸습니다. Maven 설정이 포함된 파일입니다. Maven에게 무엇을, 어떻게 해야 하는지, 어디서 무엇을 얻을 수 있는지 "알려주고" 싶다면 바로 이 pom.xml 파일에서 이 모든 것을 설명합니다. 프로젝트의 루트에 위치합니다.
이제 Maven 프로젝트를 생성할 때 입력한 데이터( groupId , ArtifactIdversion) 가 정확히 포함되어 있음을 알 수 있습니다 (후자는 건드리지 않았습니다).

우리의 프로젝트 구조

이 Maven 프로젝트는 특정 구조를 가지고 있습니다.
IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기.  사진과 함께 단계별로 - 6
보시다시피, 근본에는 다음과 같은 거짓말이 있습니다.
  • 현재 프로젝트에 대한 아이디어 설정이 포함된 .idea 디렉토리 ;
  • 소스를 생성하는 src 디렉토리 ;
  • my-super-project.iml 파일 , IDEA에서 생성한 프로젝트 파일.
  • pom.xml 파일은 바로 위에서 이야기한 것과 동일한 Maven 프로젝트 파일이며 이제 열려 있습니다. 내가 어딘가에서 pom.xml이나 "pom"을 언급한다면 이 특정 파일을 의미할 것입니다.
src 폴더 에는 두 개의 하위 폴더가 포함되어 있습니다.
  • main - 우리 코드의 경우;
  • test - 코드 테스트용입니다.
메인테스트 모두 java 폴더를 가지고 있습니다 . 이들은 동일한 폴더이고, main 에 있는 폴더만 소스 코드용이고, test 에 있는 폴더는 각각 테스트 코드용입니다. 지금은 리소스 폴더가 전혀 필요하지 않으므로 사용하지 않습니다. 그러나 그를 눕히십시오.

웹 프로젝트로 전환

이제 Maven 프로젝트를 웹 프로젝트로 변환할 차례입니다. 이렇게 하려면 이 트리에서 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭하고 프레임워크 지원 추가...를 선택하세요.
IntelliJ Idea Enterprise에서 간단한 웹 프로젝트 만들기.  사진과 함께 단계별로 - 7
프로젝트에 대한 모든 종류의 다양한 프레임워크에 대한 지원을 추가할 수 있는 창이 열립니다. 하지만 우리에게는 Web Application 하나만 필요합니다 . 우리는 그를 선택합니다.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 8
Web Application 옆에 확인 표시가 있는지 확인 하고 창의 주요 부분에 web.xml 파일이 즉시 생성되기를 원한다고 표시되어 있습니다 (없는 경우 확인란을 선택하는 것이 좋습니다). 그런 다음 프로젝트 구조가 폴더로 보완되었음을 확인할 수 있습니다 .
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 9
이것은 / 에 있는 웹 프로젝트의 루트입니다 . 즉, 브라우저에 localhost 주소를 입력하면(물론 시작할 때) 정확히 여기, 즉 웹 프로젝트의 루트에 액세스하게 됩니다. localhost/addUser 를 입력하면 폴더는 addUser 라는 리소스를 찾습니다 .
가장 중요한 것은 폴더를 Tomcat에 업로드할 때 프로젝트의 루트라는 것을 이해하는 것입니다. 이제 특정 폴더 구조가 생겼지만 업로드할 완성된 프로젝트에서는 약간 다를 것이며 폴더가 그곳의 루트가 될 것입니다.
에는 WEB-INF 라는 필수 폴더가 있습니다 . 여기에는 이전 단계에서 생성하도록 요청한 web.xml 파일이 있습니다. 열어보자.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 10
보시다시피 아직 흥미로운 것은 없으며 단지 "모자"뿐입니다. 그건 그렇고, 우리가 그것을 생성하도록 요청하지 않았다면 수동으로 생성해야했을 것입니다. 즉, 이 전체 "헤더"를 손으로 입력하거나 극단적 인 경우 인터넷에서 기성 버전을 찾아야했을 것입니다. . web.xml은 무엇입니까 ? 매핑용. 여기서는 어떤 URL 요청이 어떤 서블릿으로 전송되는지 Tomcat에 알려줍니다. 하지만 그건 나중에 할 일이므로 지금은 비워 두겠습니다. 폴더 에는 index.jsp 라는 파일도 있습니다 . 열어보자.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 11
말하자면 이것은 기본적으로 실행될 파일입니다. 즉, 프로젝트를 시작하면 이것이 바로 우리가 보게 될 것입니다. 본질적으로 jsp 는 일반 html 파일이지만, 그 안에서 자바 코드를 실행할 수 있다는 차이점이 있습니다.

정적 및 동적 콘텐츠에 대해 조금

정적 콘텐츠는 시간이 지나도 변하지 않는 콘텐츠입니다. html 파일에 작성한 모든 내용은 변경 없이 표시됩니다. hello world를 썼다면 페이지를 열자마자 이 비문이 표시되고, 5분 후, 내일, 일주일 후, 1년 후에 표시됩니다. 그녀는 변하지 않을 것입니다. 하지만 페이지에 현재 날짜를 표시하고 싶다면 어떻게 해야 할까요? 간단히 "2017년 10월 27일"이라고 쓰면 내일, 일주일 후에, 1년 후에 같은 날짜가 표시됩니다. 하지만 저는 이 날짜가 여전히 유효하기를 바랍니다. 페이지 내에서 일부 코드를 직접 실행하는 기능이 도움이 되는 곳입니다. 날짜 객체를 가져와서 필요한 형식으로 변환하고 페이지에 표시할 수 있습니다. 그러면 매일 페이지를 열 때마다 날짜가 항상 관련성이 있게 됩니다. 정적 콘텐츠만 필요하다면 일반 웹 서버와 html 파일이면 충분합니다. Java, Maven 또는 Tomcat이 필요하지 않습니다. 그러나 동적 콘텐츠를 사용하려는 경우 이 모든 것이 유용할 것입니다. 하지만 지금은 index.jsp 로 돌아가 보겠습니다 . 예를 들어 "My super web-app!"과 같은 표준 헤더 대신 우리 자신의 것을 표시하고 본문에는 예를 들어 "I 'm Alive!"라고 쓰겠습니다. 프로젝트를 시작할 준비가 거의 완료되었습니다! 그러나 불행하게도 프로그램 실행을 위한 일반적인 녹색 삼각형은 활성화되지 않습니다.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 12
왼쪽에 있는 버튼(빨간색 화살표로 화면에 표시됨)을 클릭하고 구성 편집... 일종의 구성을 추가하려면 녹색 더하기 기호를 클릭하라는 창이 열립니다. 그것을 클릭하면 창의 왼쪽 상단에 있습니다.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 13
Tomcat Server 항목 과 Local 하위 항목을 선택합니다 . 다양한 매개변수가 포함된 창이 열리지만 우리는 거의 모든 것과 기본 매개변수에 만족합니다.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 14
표준 이름 (맨 위) 대신 구성 이름을 멋지게 지정할 수 있습니다 . 아이디어가 우리 시스템에서 Tomcat을 성공적으로 찾았는지 확인하는 것도 필요합니다( 이전에 이미 다운로드하여 설치했지요 ?). 찾을 수 없는 경우(가능성은 낮음) 아래쪽 화살표를 클릭하고 설치된 위치를 선택하거나 여러 버전이 있는 경우 다른 버전을 선택하세요. 저는 하나를 가지고 있고 이미 설치되어 있으므로 모든 것이 스크린샷과 같습니다. 그리고 창 맨 아래에는 서버에 배포할 아티팩트가 하나도 없다는 경고가 표시됩니다. 그리고 이 비문 오른쪽에는 이 결함을 수정할 수 있는 버튼이 있습니다. 우리는 그것을 클릭하고 아이디어 자체가 모든 것을 찾았고, 모든 것을 스스로 생성했으며, 누락된 것, 모든 설정을 자체적으로 수행했는지 확인합니다.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 15
서버 탭에서 배포 탭으로 전송되었음을 알 수 있습니다 . 서버 시작 시 배포 섹션에는 이미 배포해야 하는 아티팩트가 있으며, 그 아래에는 배포 전에 이 아티팩트가 빌드될 것임을 표시합니다. 신청하세요. 그리고 먼저 창 하단에 아티팩트가 배치될 로컬 Tomcat 서버와 함께 섹션이 나타나는 것을 볼 수 있습니다. 창 오른쪽에 있는 해당 버튼을 클릭하면 이 섹션을 접을 수 있습니다.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 16
또한 실행을 위한 녹색 삼각형이 이미 활성화되어 있는 것을 볼 수 있습니다. 모든 것을 확인하려면 프로젝트 설정 버튼(빨간색 화살표로 표시된 시작 버튼 오른쪽)을 클릭하고 아티팩트 섹션 으로 이동하여 아티팩트가 실제로 생성되었는지 확인할 수 있습니다. 수정 버튼 을 누를 때까지는 없었 으나 이제 모든 것이 정상입니다. 그리고 이 구성은 우리에게 아주 잘 맞습니다. 간단히 말해서, my-super-project:warmy-super-project:warexplod 의 차이점은 my-super-project:war가 하나의 war 파일 (아카이브일 뿐)만 생성하고 다음 옵션을 사용 한다는 것입니다. 폭발은 단순히 "풀린" 전쟁 입니다 . 그리고 이 옵션을 사용하면 서버에 작은 변경 사항을 빠르게 배포할 수 있으므로 개인적으로 더 편리합니다. 사실 아티팩트는 우리 프로젝트인데 이미 컴파일되어 있고 Tomcat에 직접 업로드할 수 있도록 폴더 구조가 변경되었습니다. 다음과 같이 보일 것입니다:
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 17
이제 프로젝트를 시작할 준비가 모두 완료되었습니다. 탐나는 녹색 시작 버튼을 누르고 결과를 즐기세요! :)
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 18
코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION