392 lines
12 KiB
Plaintext
392 lines
12 KiB
Plaintext
= 로컬 설치
|
||
|
||
== 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 파일을 해당 위치에 복사한다.)
|
||
|
||
----
|
||
<settings>
|
||
<proxies>
|
||
<proxy>
|
||
<id>proxy-http</id>
|
||
<active>true</active>
|
||
<protocol>http</protocol>
|
||
<host>168.219.61.252</host> // 사업장 Proxy 정보
|
||
<port>8080</port> // 사업장 Proxy 정보
|
||
<nonProxyHosts>*.samsung.net|localhost|127.0.0.1</nonProxyHosts>
|
||
</proxy>
|
||
<proxy>
|
||
<id>proxy-https</id>
|
||
<active>true</active>
|
||
<protocol>https</protocol>
|
||
<host>168.219.61.252</host> // 사업장 Proxy 정보
|
||
<port>8080</port> // 사업장 Proxy 정보
|
||
<nonProxyHosts >*.samsung.net|localhost|127.0.0.1</nonProxyHosts>
|
||
</proxy>
|
||
</proxies>
|
||
</settings>
|
||
----
|
||
|
||
== 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]
|
||
----
|
||
<dependency>
|
||
<groupId>org.postgresql</groupId>
|
||
<artifactId>postgresql</artifactId>
|
||
<version>42.7.3</version>
|
||
<exclusions>
|
||
<exclusion>
|
||
<groupId>org.checkerframework</groupId>
|
||
<artifactId>checker-qual</artifactId>
|
||
</exclusion>
|
||
</exclusions>
|
||
</dependency>
|
||
----
|
||
|
||
== 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] |