walkerholic(Springboot + React) 프로젝트 ① 망구성하고 배포하기

 

 

 

 

 

이제 이전 미션에서 진행한것을 참고하여 개발한 프로젝트를 배포하기로 했다. 

 

 

 

망 구성 

망구성은 배스천 서버, 외부망(서비스)서버, 내부망(데이터베이스)서버로 구성하도록 하고, 외부망 앞에 리버스 프록시를 구성하여 배포하도록 설정하였다. 보안은 이전 미션에서 구성했던 것처럼 22번 포트는 bastion서버에서 내 IP로만 오픈하도록 하였다. 망구성이 궁금하다면 이전에 작성해둔 내 블로그를 참고하면 된다!

↓

https://dodop-blog.tistory.com/310

AWS 망 구성하고 서비스 배포하기

 

 

 

 

망구성 ① 외부망

미션과 이번 나의 프로젝트가 다른점은 내가 react를 이용하여 다른 포트에 frontend 서버를 띄워주고 각각 개별로 프론트와 백엔드 개발을 진행했다는 점이다. 그래서 이전에 heroku배포를 했을때 사용했던 것처럼 frontend의 public, src, package.json만을 backend폴더 내부로 이동시켜주고 Frontend-maven-plugins Dependency를 이용하도록 했다.

여기서 배포는 ec2를 사용하기 때문에  package.json의 react-scripts : { build: } 부분에서 GENERATE_SOURCEMAP = false 옵션을 추가해주어 불필요한 용량을 차지하지 않도록 해주자. 

## backend/frontend/package.json
"scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

이 부분이 궁금하다면 이전에 정리해놓은 부분의 초반 부분을 참고하면된다. 

↓

 

https://dodop-blog.tistory.com/252

Springboot(Maven), React, MySQL 프로젝트 Heroku 배포하기

 

 

여기까지의 설정으로 우리는 jar 파일을 이용해서 frontend까지 실행하는 부분을 만들 수 있었다. 그런데 여기서 이전에 개발했을 때 backend로 요청을 보낼때 URL을 분리할 만한 prefix를 붙여주지 않았다는 문제가 발생했다. 이를 해결하기 위해서 axios.defualt를 이용한 설정을 App.js에 추가해주고, backend에서는 /api prefix를 가지고 요청을 받을 수 있도록 @RequestMapping()부분에 "/api"부분이 추가될 수 있도록 해주었다. 

//frontend/src/App.js
function App() {
  // 주소는 내가 배포할 도메인으로 해주면 된다. 
  axios.defaults.baseURL = "https://walkerholic.n-e.kr/api";
  
}

@RestController
@RequestMapping("/api")
public class Controller {}

 

이제 CORS 설정을 frontend와 backend에 각각 추가해주었다. 

// frontend/package.json
{
  "proxy": "https://walkerholic.n-e.kr",
}

// backend의 WebConfig
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("https://walkerholic.n-e.kr")
            .allowedMethods(
                HttpMethod.GET.name(),
                HttpMethod.POST.name(),
                HttpMethod.PUT.name(),
                HttpMethod.DELETE.name()
            );
    }
}

 

중요한 정보가 들어있는 application.properties의 경우에는 개발, 배포, 테스트 별로 config를 나누도록 하고 git submodule을 이용하도록 하였다. application-prod.properties에도 다음과 같이 url을 설정해주었다. 

server.port=8080

base-url=https://walkerholic.n-e.kr

 

 

망구성 ② 내부망

이제 내부망을 구성해보자. 내부망은 mysql 로 설정할 것이다. 다음과 같이 mysql 서버를 생성하고 구성하도록 한다. 

$ sudo apt-get update
$ sudo apt-get install mysql-server
$ sudo ufw allow mysql
$ sudo systemctl start mysql
$ sudo systemctl enable mysql

// mysql 접속 (여기서 안되면 sudo /usr/bin/mysql -u root -p 하고 추후 root 사용자 비밀번호 변경)
$ mysql -u root -p
Enter password: 비밀번호 입력

// 사용자 확인 
mysql> select user, host from user;
+------------------+---------------+
| user             | host          |
+------------------+---------------+
| debian-sys-maint | localhost     |
| mysql.infoschema | localhost     |
| mysql.session    | localhost     |
| mysql.sys        | localhost     |
| root             | localhost     |
+------------------+---------------+

mysql> create database '사용하고자하는 데이터베이스 이름';
query OK ...

mysql> show databases;
데이터베이스 생성됨을 확인 

mysql> use mysql;

// 서비스망의 ip에서 접속할 user를 생성하고 권한 부여
mysql> create user '사용자'@'서비스망 private ip' identified by '비밀번호';
query OK ...
mysql> grant all privileges '데이터베이스'.* to '사용자'@'서비스망 private ip';
mysql> flush privileges;

// 사용자 권한 확인
mysql> show grants for '사용자'@'서비스망 private ip';

// 모든 사용자 확인
mysql> SELECT User, Host, authentication_string FROM mysql.user;

// 사용자 비밀번호 변경하고 싶다면 다음과 같이 해준다.
mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '바꿀비번';

// 사용자를 삭제하고 싶다면 다음과 같이 해준다. 
mysql> drop user '사용자이름'@'사용ip';

mysql> exit;

// mysql 접속 ip 설정 
$ cd /etc/mysql/mysql.conf.d
// 여기서 binding 0.0.0.0으로 변경  
$ sudo vi mysqld.cnf

// mysql 재시작
$ sudo systemctl restart mysql

 

추가로 mysql 의 초기 데이터가 생성된다면 backup sql을 작성해주는 것이 좋다. 

$ mysqldump -u "사용자" -p "데이터베이스이름" > backup.sql
Enter password: 비밀번호 입력

// 백업 데이터 생성됨 확인 
$ cat backup.sql 

// 백업 데이터로 되돌리기 
$ mysql -u "사용자" -p "데이터베이스이름" < backup.sql 
Enter password: 비밀번호 입력

 

 

 

배포하기

이제 망구성이 완료되었으니 서비스를 배포해보도록 하자. 먼저 필요한 자바 설정(Springboot)과 노드 설정(React)을 받아주도록 하자. 

 $ sudo apt update
 $ sudo apt install default-jre
 $ sudo apt install default-jdk
 $ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
 $ sudo apt-get install -y nodejs

 

그 다음 도메인 및 리버스 프록시를 설정해준다. (이 부분은 배포 블로그 글에 자세히 적어놓았으니 생략하도록 한다)

↓

https://dodop-blog.tistory.com/310

AWS 망 구성하고 서비스 배포하기

 

이제 깃헙의 소스 코드를 받아준다. 여기서 git token을 이용해서 submodule까지 받아오도록 한다. 

$ git clone -b [원하는 branch] --single-branch --recurse-submodules [githup 주소]

 

이제 설치를 진행하고 도메인에 서버를 띄워보도록 하자.  여기서 설치를 해주기만 해도 dependency 덕분에 frontend에 필요한 설정파일까지 모두 설치된 jar 파일을 생성해준다. 

// ./mvnw가 있는 폴더로 이동해서 실행
$ ./mvnw clean install
$ find ./* -name "*jar"
$ java -jar -Dspring.profiles.active=prod [jar 파일]

 

여기서 만약 Invalid Host Header가 화면에 보이며 오류가 발생한다면 다음과 같이 설정을 변경해준다. (Firewall을 disable 시켜준다)

설정 변경 후에는 다시 ./mvnw clean install을 통해서 jar 파일에 반영해준다. 

frontend $ cd node_modules/react-scripts/config
frontend $ vi webpackDevServer.config.js
module.exports = function (proxy, allowedHost) {
  const disableFirewall =true;

 

 

이제 도메인으로 입장해보면 다음과 같이 정상적으로 서버가 실행되는 것을 확인할 수 있다. 

 

 

 

 

 

 

 

( 참고한 사이트 ) 

https://velog.io/@seyoung755/AWS-EC2%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EB%B0%B0%ED%8F%AC%ED%95%B4%EB%B3%B4%EC%9E%90-3-MySQL-%EC%84%9C%EB%B2%84-%EC%8B%A4%ED%96%89

AWS EC2를 이용해 배포해보자 (3) - MySQL 서버 실행

https://devkingdom.tistory.com/84

[AWS] AWS EC2 인스턴스 (Ubuntu) 에서 MySql 세팅하기

https://swpfun.tistory.com/701

MySQL 8.0 초기 세팅(root 패스워드 변경, DB 생성, 사용자 추가까지)

https://taetoungs-branch.tistory.com/95

[AWS] EC2에 MySQL 설치하기

https://technote.kr/195

[Mysql] database 백업(backup) / 복구(restore)

https://m.blog.naver.com/software705/221337666338

[AWS Mysql] AWS ec2 Mysql 서버구축및 외부접속하기

https://velog.io/@issac/AWS-EC2%EC%97%90-MySQL-%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

[AWS] EC2에 MySQL 서버 구축하기