= 로컬 설치 == Maven 설치 Apache Maven(https://maven.apache.org/download.cgi )에서 다운 받아 설치한다. OS에 맞는 파일을 다운로드 한다. Windows의 경우 **Binary zip archive**를 추천한다. image::maven_01.png[maven_01] 적당한 위치에 압축을 풀고 시스템 환경변수에서 %MAVEN_HOME%을 추가한다. image::maven_02.png[maven_02]jdbc: 시스템 환경변수 path에 %MAVEN_HOME%\bin을 추가한다. image::maven_03.png[maven_03] cmd창을 열어 *mvn -version* 명령어를 실행한다. 아래처럼 설치된 Maven 버전이 출력되면 된다. image::maven_04.png[maven_04] IMPORTANT: 사업장 Proxy 세팅을 위해 각 사업장 Proxy 정보를 Users/사용자명/.m2/settings.xml에 아래와 같이 추가한다. (settings.xml 파일이 없을 경우 %MAVEN_HOME%\conf\settings.xml 파일을 해당 위치에 복사한다.) ---- proxy-http true http 168.219.61.252 // 사업장 Proxy 정보 8080 // 사업장 Proxy 정보 *.samsung.net|localhost|127.0.0.1 proxy-https true https 168.219.61.252 // 사업장 Proxy 정보 8080 // 사업장 Proxy 정보 *.samsung.net|localhost|127.0.0.1 ---- == IDE 설치 개발자 환경에 맞춰 필요한 IDE를 설치한다. Eclipse의 경우 Spring Framework 개발에 필요한 Plugin이 포함된 Spring Tools Suite를 사용해도 된다. Front-end 개발을 위해서 VS Code 등을 추가로 설치 하는 것도 추천한다. 본 메뉴얼에서는 Eclipse나 IntelliJ 등 IDE 설치에 대해서는 다루지 않는다. === Visual Studio Code 설치 NOTE: Visual Studio Code 외 다른 IDE를 사용하는 경우 건너뛴다. https://code.visualstudio.com/docs/?dv=win 에 접속해서 설치파일 다운로드 image::front_02_10.png[front_02_10,800,600] == Node.js 설치 링크(https://nodejs.org/en/ )의 페이지에서 사용중인 OS에 맞는 Node.js 설치파일을 다운로드 받아 설치 한다. IMPORTANT: 6.0.0 버전 기준 nodejs 버전 20.14.x 이상을 권장하고 있다. image::front_01_1.png[front_01_1,800,600] === 설치 확인 Command 창에 node –v(version) 과 npm –v(version)을 입력합니다. 설치하신 node, npm정보가 조회되면 설치가 완료된 것이다. [source,bash] ---- C:\>node -v v20.14.0 C:\>npm -v 9.0.2 ---- === npm 설정 방법 Node library를 다운로드 받지 못하는 경우, NPM 설정이 필요하며, 설정에 필요한 명령어는 npm config set {환경변수명} {값} 이다. 현장의 proxy 서버에 맞게 명령어를 구성하면 되며, Proxy 설정 명령어는 아래와 같다. npm 설정방법에 대한 자세한 설명은 https://docs.npmjs.com/misc/config[npm-config]를 참고 바란다. image::front_02_3.png[] === npm 설정 확인 npm 설정정보를 확인하기 위해 npm config list 명령을 수행한다. 아래 그림과 같이 설정한 값이 보이면 NPM 설정 완료. image::front_02_4.png[] == Eclipse (STS) Setting 다운받은 sdl-base-[version].zip 파일을 임의의 프로젝트 폴더 아래 압축을 푼다. image::install_1.png[] Eclipse 실행 후 workspace 설정 image::install_2.png[install_2,800,600] Eclipse 실행 후 완료 image::install_09.png[install_09,800,600] Project Encoding 설정 image::install_10.png[install_10,450,600] Validation Disable All image::install_11.png[install_11,450,600] Server 설정 본 문서에서는 로컬 WAS 설치 방법은 다루지 않는다. + SDL은 스프링 부트가 기본 제공되므로 로컬 서버로는 스프링 부트 내장 Tomcat을 사용한다. == Eclipse Project Import File -> Import -> Maven Project -> Existing Maven Projects image::install_16.png[] image::install_17.png[] sdl-base 프로젝트를 설치한 위치를 선택한다 image::install_18.png[] Import가 완료 되면 Package Explorer에서 아래처럼 프로젝트를 볼 수 있다. image::install_19.png[] CAUTION: 프로젝트를 처음 Import 할 경우 Build Path에서 Resource폴더가 Excluded 되어 있을 수 있으니 반드시 확인한다. Package Explorer에서 오른쪽 마우스 클릭 -> Build Path -> Configuration Build Path... image::install_20.png[] Source Tap에서 resources, resouces-local의 Excluded 가 None으로 되어 있나 확인한다. image::install_21.png[] image::install_22.png[] Eclipse 프로젝트 Import가 완료되었다. CAUTION: .properties의 한글이 깨진다면 아래처럼 인코딩 설정을 변경한다. image::install_28.png[] == Lombok Plugin 설치 @Data @Log4j2 와 같은 Annotation에서 Compile 에러가 발생한다면 Lombok 플러그인을 설치한다. https://projectlombok.org/download 에서 lombok jar 파일을 다운로드 받는다. image::lombok_01.png[lombok_01,500,35] java -jar lombok.jar 을 cmd창에서 실행한다. image::lombok_02.png[lombok_02,600,450] <1> Specify location..클릭 <2> Eclipse 설치 위치 선택 <3> Install/Update 클릭 image::lombok_03.png[lombok_03,600,450] 설치 완료 == Server 실행 DB 접속 정보를 프로젝트 환경에 맞게 수정한다. (예. Postgresql 일 경우) .config.properties [source, properties] ---- # Datasource(Postgresql) datasource.driver=ENC(zg2s0lzTKz1OADpB2LmIk7pcJNLonCsW4WerSDJ9WTfmimam1Zi0Z8mH16+mWY+y) datasource.url=ENC(QaTWEyV020nKVDYneWGs8WNrezY8FGOKyleE2pkxlSs8m8nXE2/mqYMSaqAwUJghMJnLp20twDvdHh4csOKDzw==) datasource.username=ENC(Vz2UR99au+VBAaVJBDSdLw==) datasource.password=ENC(Wrer0/kHw+6UyGhtBT+bdSZNo83x+HNB) ---- IMPORTANT: 해당 정보는 중요 정보로써 암호화를 통해 정보 탈취등의 보안 사고를 대비해야 한다. 표준개발라이브러리에서는 Jasypt(Java Simplified Encryption) 방식을 통해 해당 정보를 암호화 하고 있다. * 프로퍼티 값 암호화는 아래 링크의 내용을 참고하여 작성 및 입력한다. (암호화가 필요한 정보만 따로 암호화하도록 한다.) + <<_properties_암호화_툴_사용_방법, Properties 암호화 툴 사용 방법>> + * 암호화에 사용된 키 값을 시스템 환경변수 또는 JVM 옵션을 사용하여 지정하면 서버 구동 시 복호화 되어 DB에 접속 된다.(JasyptConfig.java) ** 시스템 환경변수 사용 *** Windows + 제어판 -> 시스템 -> 시스템 환경 변수 편집 -> 환경 변수 -> 시스템 변수 JASYPT_KEY 추가 + ---- C:\Users\bbnydory>echo %JASYPT_KEY% jfoadjvcoadr0j3402j ---- + *** Linux + ---- $ export JASYPT_KEY=jfoadjvcoadr0j3402j ---- + *** Docker(Guide Jenkins Build) + Docker Container로 어플리케이션을 실행 할 경우 Docker Build 변수를 Dockerfile에 전달해 설정해야 한다. + Jenkins Build Pipeline 환경 변수 설정 부분 + ---- environment { PROJECT_ID = '...' GIT_CREDENTIAL_ID = '...' APP_IMAGE_REPO_CREDENTIAL_ID = '...' CA_CREDENTIAL_ID = '...' IMAGE_REPO = '....' JASYPT_KEY = 'jfoadjvcoadr0j3402j' } ---- + Jenkins Build Pipeline Doker 이미지 빌드 부분 + ---- docker login -u $APP_IMAGE_REPO_USERNAME -p $APP_IMAGE_REPO_PASSWORD redii.secmis.sdspaas.io docker build --pull --force-rm --file=Dockerfile --build-arg JASYPT_KEY=$JASYPT_KEY --tag=$IMAGE_LOC . ---- + *--build-arg JASYPT_KEY=$JASYPT_KEY* 옵션으로 환경변수를 Dockerfile에 전달해야 한다. + Dockerfile 환경 변수 설정 + ---- FROM redii.secmis.sdspaas.io/sdspaas-mw/xxxxxx ARG JASYPT_KEY ENV JASYPT_KEY $JASYPT_KEY ---- ** JVM 옵션 사용 + WAS의 실행 명령어 또는 실행시 에 *-DJASYPT_KEY=jfoadjvcoadr0j3402j* 를 추가해서 어플리케이션을 실행한다. + ---- $ java -server -Xms8g -Xmx8g -XX:MaxMetaspaceSize=256m -Dspring.profiles.active=prod -DJASYPT_KEY=jfoadjvcoadr0j3402j ---- NOTE: Properties 암호화 툴에서 사용한 키 값(jasypt.key파일내용)과 Jasypt 암호화 키(JASYPT_KEY) 값은 일치해야 한다. + 환경변수와 key 값, value은 시스템 내에서 자유롭게 설정하도록 한다. + 위의 value값은 절대로 샘플의 값을 사용하지 않도록 한다. .SpringConfig.java [source, java] ---- @Bean public SqlSessionFactoryBean defaultSqlSessionFactory(DataSource dataSource, ApplicationContext applicationContext) throws IOException { SqlSessionFactoryBean factoryBean = new SqlSessionFactoryBean(); factoryBean.setDataSource(dataSource); factoryBean.setConfigLocation(applicationContext.getResource("classpath:sql/mybatis/postgresql/mybatis-config.xml")); factoryBean.setMapperLocations(applicationContext.getResources("classpath*:sql/mybatis/postgresql/**/mapper-mybatis-*.xml")); return factoryBean; } ---- pom.xml에서 프로젝트에서 사용할 DB의 jdbc driver dependency를 확인/설정한다. .pom.xml [source, xml] ---- org.postgresql postgresql 42.7.3 org.checkerframework checker-qual ---- == Spring Boot 실행 SDL 6.0은 Spring Boot로 되어 있기 때문에 별도의 WAS 없이 Embedded Tomcat를 이용해 서버를 실행 할 수 있다. === CMD 에서의 실행 [source,bash] ---- mvn spring-boot:run ---- === IntelliJ 에서 실행 프로젝트 창에서 com.samsung.SdlBaseBootApplication.java 파일 선택 후 Spring Boot Application 실행을 한다. === Eclipse 에서 실행 Spring Boot로 실행 할 com.samsung.SdlBaseBootApplication.java 파일 선택 후 Spring Boot Application을 실행 한다. == VS Code Setting NOTE: Visual Studio Code 외 다른 IDE를 사용하는 경우 건너뛴다. Open source File > Open Folder > '\sdl-base\frontend' 선택 image::front_02_11.png[] image::vscode_02.png[] VS Code Plugin 설치 코딩 컨벤션을 위한 Plugin 설치 - vscode 실행 후 좌측 아이콘 메뉴중 5번째 선택 후 검색어 입력 "eslint" image::front_02_12.png[] "prettier" image::front_02_13.png[] 설치후 vscode 활성화 (저장시 자동 수정) File > Preferences > Settings 메뉴 진입 하거나 단축키 Ctrl + Shift + P 를 눌러 아래 검색어 user 입력 image::front_02_14.png[] 설정검색란에 save 입력 후 settings.json에서 편집 클릭 image::front_02_15.png[] JSON 파일에 아래 코드 추가 image::front_02_16.png[] CAUTION: vscode 에서 eslint가 너무 늦게 적용될때 환경변수에 NO_UPDATE_NOTIFIER=1 추가하면 됨 (참고링크 https://github.com/Microsoft/vscode-eslint/issues/440#issuecomment-380083518 ) image::front_02_17.png[] == Frontend 설치 및 실행 [[npm-install]] Frontend 실행에 필요한 node module 설치 IDE에서 Terminal을 생성하여 npm install 명령어를 실행 .npm-install [source,shell] ---- C:\~YOUR~PROJECT~PATH~\sdl-base\frontend>npm install ---- Vite dev-server 의 경우 host: 'localhost', port: 5173 이 default 값으로 설정되어있다. SDL 은 dev-server 의 port 값을 '8081'로 사용하고 있으며, frontend/vite.config.js 파일에서 아래와 같이 서버 설정 을 확인 및 수정 할 수 있다. .vite.config.js [source, json] ---- server: { // host: 'localhost' // default port: '8081', } ---- 로컬 환경 설정 파일 .env.test 파일을 열어 Back-end 정보를 입력한다. ..env.test [source, properties] ---- VITE_NODE_ENV=local VITE_API_URL=http://localhost:8080 VITE_DIST_PATH=../src/main/resources/public VITE_WEB_CONTEXT_PATH=/ ---- npm run local 명령어를 통해 local 환경에서의 vite dev-server를 실행한다 [source,shell] ---- C:\~YOUR~PROJECT~PATH~\sdl-base\frontend>npm run local ---- == Local 접속 확인 Web browser(Chrome, Edge)에 http://localhost:8081 입력 후 실행 image::front_02_20.png[front_02_20,450,600]