WEEK 14 TIL(6월18일 수요일)[시놀로지 배포]

[목표]
AWS 강의를 듣습니다.
회원가입 기능을 추가합니다.
시놀로지에 배포합니다.

09:45 ~ 18:00

AWS 강의를 듣습니다. + 생성형 Ai
관련 내용은 정리되는대로 올리겠습니다.

18:00 ~ 19:20

식사를 하고 왔습니다.

19:20 ~ 23:00

어제 못했던 시놀로지 배포를 해보겠습니다.

[완성된 페이지 깃링크]
https://github.com/prkty/Krafton_Jungle_SpringReact/tree/main

---

React 앱 배포(쉬움)

1. React 앱 빌드

npm run build

2. 빌드 결과 업로드

• /volume1/web/your-react-app/에 build/ 폴더 내용을 업로드
  

(Web Station에서 접근 가능)

3. Web Station 가상 호스트 설정

• Web Station > 가상 호스트 생성
• 루트 디렉토리: /volume1/web/your-react-app
• 포트: 80 또는 원하는 포트

위의 지침을 따르니 프론트는 배포 가능했습니다.

---

My SQL 8.0을 시놀로지에 설치(보통)

Spring과 My SQL의 통신을 위해 3306 포트를 포트포워딩 했습니다.

상세한 버전까지 맞춰줘야합니다. 이후에는 3306을 시놀로에서 쿼리문을 작성하지말고, My SQL WorkBench 에서 작업하면 한결 편합니다.

https://teeput.tistory.com/11

설치완료되면 터미널에서 mysql -u root -p 을 통해 시놀로지에 접근가능합니다. 그 이후에는 전에 적었던 쿼리문을 따라서 추가적인 작업을 해줍니다.

CREATE DATABASE todos;

CREATE USER 'todos-user'@'localhost' IDENTIFIED BY 'dummytodos';

GRANT ALL PRIVILEGES ON todos.* TO 'todos-user'@'localhost';

FLUSH PRIVILEGES;

SHOW GRANTS FOR 'todos-user'@'localhost';

---

Spring Boot 애플리케이션 컨테이너화(어려움)

1. Dockerfile 작성

Spring Boot 프로젝트 루트에 아래 파일 작성합니다. (인텔리제이)

FROM openjdk:17-jdk-alpine
COPY target/restful-web-services-0.0.1-SNAPSHOT.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "/app.jar"]

2. mvn으로 spring프로젝트 파일 빌드

아마 mvn 명령어가 안먹힐텐데 maven 인터넷에서 zip파일로 받아서 저장하고 해당 경로를 환경변수 설정하면 됩니다. 자세한건 인터넷 확인하세요.

프로젝트 폴더에서 cmd로 해당 코드를 통해 빌드 해줍니다. 밑에 서술하지만 코드의 환경자체가 시놀로지에 맞춰져 있어서 테스트는 스킵해야한다.

mvn clean package -Dmaven.test.skip=true  (테스트 스킵)

3. 도커파일로 빌드

시놀로지에 도커로 Spring을 배포하기 위해 도커파일을 만듭니다. 윈도우는 WSL과 Docker Desktop이 필요합니다.

docker build -t spring-app .

Docker 이미지 파일로 내보내고 NAS에 로드

로컬에서 만든 Docker 이미지를 NAS로 옮기는 방법입니다.

1️⃣ tar 이미지 저장

docker save spring-app > spring-app.tar

2️⃣ NAS로 spring-app.tar 전송

SMB, SCP, File Station 등으로 NAS에 복사합니다.

3️⃣ NAS에서 이미지 불러오기 (알아서 임포트)

시놀로지에서 세팅해주면됩니다. Web Station을 통해 웹 포털 활성화에 체크해야합니다.

4️⃣ 실행 (웹스테이션에서)

도커가 올라가면 자동으로 웹스테이션으로 가면서 포트를 물어볼 것이다. React와 통신하기 위해 8080 포트로 설정해주면된다.

이렇게 하면 리엑트 배포완료.
스프링과 My SQL 연동 완료. → 엄청 오래걸림…

---

23:00 ~ 00:30

트러블 슈팅(Spring, My SQL 연동)

mysql이 정상작동해도, spring이 sql을 못잡고 뻗습니다. 그래서 도커끼리는 통신을 못하는거 같다고 생각했습니다.

mysql을 점유 포트인 3306 포트포워딩해서 본체랑 연결되는지 확인 → 정상.

이와중에 spring에서 지정한 DATABASE(이름)todos 와 username:user, password:userpw는 동일하게 맞췄다.
그리고 mysql 기본 설정은 쿼리문을 통해 동기화해줬다. 또한 시놀로지 My SQL 버전도 똑같이 맞췄다.

추가로 Spring의 application.properties 의 SQL URL을 변경했습니다.

spring.datasource.url=jdbc:mysql://서버IP:3306/todos

근데도 안돌아가길래 프로젝트 파일에서 수정해야겠다고 생각해서 spring 설정파일에 다음과 같이 바꿨습니다. (이렇게 하면 안됨)(다른 컴퓨터에서 로그인이 안된다. 정답은 밑에 있다.)

import axios from 'axios'

export const apiClient = axios.create(
    {
        baseURL: 'https://서버ip:8080'
    }
);

다시 빌딩하고, jar 파일 만들어서 doker에다가 포트 8080으로 올렸더니, 이제 다운되지 않지만, 웹사이트에서 로그인이되지 않는 것을 보았습니다. F12를 통해 오류코드를 보니 프론트엔드와 벡엔드가 통신을 못하는것 같았습니다.

→ 이렇게 진행된것이 다음 트러블 슈팅입니다.

---

트러블슈팅 (벡엔드와 프론트엔드가 통신을 못함)

먼저 Spring, React 통신을 위해 포트포워딩 8080 통신 포트 개방완료했습니다.

React의 apiclient.js 에 localhost에서 서버 주소로 입력했습니다.

import axios from 'axios'

export const apiClient = axios.create(
    {
        baseURL: 'https://securebigserver.synology.me:8080'
    }
);

spring에서 RestfulWebServicesApplication.java 파일을 수정했다.

기존

@Bean
	public WebMvcConfigurer corsConfigurer() {
		return new WebMvcConfigurer() {
			public void addCorsMappings(CorsRegistry registry) {
				registry.addMapping("/**")
					.allowedMethods("*")
					.allowedOrigins("http://localhost:3000");
			}
		};
	}

변경후

@Configuration
	public class WebConfig implements WebMvcConfigurer {

		@Override
		public void addCorsMappings(CorsRegistry registry) {
			registry.addMapping("/**")
					.allowedOrigins("https://securebigserver.synology.me")
					.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
					.allowedHeaders("*")
					.allowCredentials(true);
		}
	}

그러고 나서 다시 재배포하니 다른 컴퓨터에서도 정상적으로 운영된다.

우하하하하ㅏㅏ하하ㅏㅏㅏㅏ

둘다 정상적으로 돌아가는걸 볼 수 있다.

• 해준 포트포워딩: 8080(리엑트, 스프링 통신), 3306(스프링, SQL 통신)

00:30 ~ 03:15

발표자료를 작성하고 있다.

최종 진행상황 (25-06-19, 01:00)

현재 완료 기술: Spring, React, REST API, My SQL, JWT, Synology

• 기능 요구사항
  • 로그인
  • 회원가입
  • 게시물 작성
  • 게시물 목록보기
  • 게시물 읽기
  • 댓글 작성
• 개발범위
  • 프론트: 게시판 UI를 구현
  • 백엔드: 게시판 Server API 구현
  • 추가적 구현 가능 (기술적 챌린지 요소)

느낀점

• 일주일이라는 기간동안 좀 더 배우지 못해서 아쉽습니다. 스프링이나 리엑트나 처음보는 기술이다보니, 환경설정하고 형식을 이해하는데 시간이 좀 걸렸습니다. 초반에 기본부터 쌓겠다고 강의본게 조금 아쉽습니다. 역시 직접 굴러보면서 결과물을 봐야 재밌고 이해도 잘되는것 같습니다.
• 효과적이지 못한 진행도 관리에 아쉬움이 있습니다. 이번엔 빠르게 한다고 깃허브를 사용하지 않았는데, 그러다보니 어느 포인트에서 문제가 생겼고 기능 개선이 되었는지 빠르게 찾지 못했습니다. 깃허브의 중요성을 다시금 느꼇습니다.
• 원하고자 하는 바를 이뤄냈을때의 쾌감이 좋습니다. 안풀릴땐 속이 답답한 감이 계속가는데, 몇시간의 삽질과 자력으로 해냈을때의 희열은 비교가 안되는 것 같습니다. 웹개발의 매력이 아닐까 생각했습니다.

완료하여 깃허브와 발표자료까지 제출했다. 오늘은 일찍 자러가야겠다.