# Springboot - slipp 반복주기 1

728x90

이글은 Slipp - Spring-Boot, JPA로 질문/답변 게시판 구현 과정을 참조하여 작성한 내용입니다.

1-1. 로컬 개발 환경 세팅

spring boot ptoject 생성
- web/mustach/dev-tools 설정
  - mustach : 템플릿 엔진 - 참고 사이트 : Mustache 메뉴얼, Mustache 템플릿 문법 , Mustache Slipp 사이트
  - dev-tools : 코드 변경사항을 자동으로 적용하여 서버를 재부팅시켜준다.
- 나머지 라이브러리는 기능을 구현하면서 추가할 예정
live reload chrome extention 설치
- 변경된 코드가 실시간으로 반영하여 브라우저에 출력해준다.

1-2. Bootstrap 활용한 html 페이지 작성

bootstrap css, jquery, javascript 라이브러리 추가

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>bootstrap</artifactId>
  <version>3.3.7-1</version>
</dependency>
<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
  <version>3.1.0</version>
</dependency>

html에 적용

<link href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet">
<script src="/webjars/jquery/3.1.0/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

index.html(메인페이지) => navigation bar 추가

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DoubleS | 메인페이지</title>
<link href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet">
<script src="/webjars/jquery/3.1.0/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-default">
      <div class="container-fluid">
          <div class="navbar-header">
              <a class="navbar-brand" href="/index.html">DoubleSS</a>
          </div>
          <div class="collapse navbar-collapse"
              id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                  <li><a href="/form.html">회원가입</a></li>
                  <li><a href="/list.html">사용자 목록</a></li>
              </ul>
          </div>
      </div>
  </nav>
  <div class="container">
      <h1>메인 페이지 입니다...</h1>
  </div>
</body>
</html>

form.html(회원가입페이지) => navigation bar 추가

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DoubleS | 회원가입</title>
<link href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet">
<script src="/webjars/jquery/3.1.0/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-default">
      <div class="container-fluid">
          <div class="navbar-header">
              <a class="navbar-brand" href="/index.html">DoubleSS</a>
          </div>
          <div class="collapse navbar-collapse"
              id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                  <li><a href="/form.html">회원가입</a></li>
                  <li><a href="/list.html">사용자 목록</a></li>
              </ul>
          </div>
      </div>
  </nav>
  <div class="container">
      <h1>회원가입</h1>
      <form action="/create" method="post">
          <div class="form-group">
              <label for="userId">아이디</label> 
              <input type="text" class="form-control" name="userId" id="userId" placeholder="아이디">
          </div>
          <div class="form-group">
              <label for="userPw">비밀번호</label> 
              <input type="password" class="form-control" name="userPw" id="userPw" placeholder="비밀번호">
          </div>
          <div class="form-group">
              <label for="userName">이름</label> 
              <input type="text" class="form-control" name="userName" id="userName" placeholder="이름">
          </div>
          <div class="form-group">
              <label for="userEmail">이메일</label> 
              <input type="email" class="form-control" name="userEmail" id="userEmail" placeholder="이메일">
          </div>
          <button type="submit" class="btn btn-default" id="loginBtn">회원가입</button>
      </form>
  </div>
</body>
</html>

list.html(회원목록페이지) => navigation bar 추가

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>사용자 목록</title>
<link href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet">
<script src="/webjars/jquery/3.1.0/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-default">
      <div class="container-fluid">
          <div class="navbar-header">
              <a class="navbar-brand" href="/">DoubleSS</a>
          </div>
          <div class="collapse navbar-collapse"
              id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                  <li><a href="/form.html">회원가입</a></li>
                  <li><a href="/list.html">사용자 목록</a></li>
              </ul>
          </div>
      </div>
  </nav>
  <div class="container">
      <table class="table table-condensed">
          <caption>사용자목록</caption>
          <thead>
              <tr>
                  <th>사용자 아이디</th>
                  <th>사용자 이름</th>
                  <th>사용자 이메일</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th scope="row">doubles</th>
                  <td>더블에스</td>
                  <td>walbatrossw@gmail.com</td>
              </tr>
                  <tr>
                  <th scope="row">hong1234</th>
                  <td>홍길동</td>
                  <td>hong1234@mail.com</td>
              </tr>
                  <tr>
                  <th scope="row">kim1234</th>
                  <td>김철수</td>
                  <td>kim1234@mail.com</td>
              </tr>
          </tbody>
      </table>
  </div>
</body>
</html>

1-3. github에 소스 추가

sourcetree에 저장소 추가
github에 repository 생성
sourcetree에서 commit => push
local => github.com => AWS(개발 서버/실 서버)

1-4. 원격 서버(개발 서버 또는 실서버)에 소스코드 배포하기

ssh로 서버(AWS) 접속

$ ssh -i [public key 저장 경로] ubuntu@[서버 아이피 주소]

일반사용자(ubuntu)를 sudo 명령으로 루트 권한을 부여
```
$ sudo vi /etc/sudoers
```
```
root ALL=(ALL) ALL 
ubuntu ALL=(ALL) ALL
```

한글 인코딩 설정

$ sudo locale-gen ko_KR.EUC-KR ko_KR.UTF-8
$ sudo dpkg-reconfigure locales

프로파일 생성후 인코딩 설정

$ vi .bash_profile

LANG="ko_KR.UTF-8" 
LANGUAGE="ko_KR:ko:en_US:en“

바로 적용시키기

$ source .bash_profile

1-5. 원격서버(개발 서버 또는 실서버)에 소스코드 배포하기

wget 자바(jdk8) 설치

$ wget --header "Cookie: oraclelicense=accept-securebackup-cookie" http://download.oracle.com/otn-pub/java/jdk/8u121-b13/e9e7ea248e2c4826b92b3f075a80e441/jdk-8u121-linux-x64.tar.gz

$ guzip jdk-8u121-linux-x64.tar.gz

$ tar -xvf jdk-8u121-linux-x64.tar

자바 심볼링크 생성
```
$ ln -s jdk1.8.0_121/ java
```

자바 환경변수 설정

$ vi .bash_profile

JAVA_HOME=/home/ubuntu/java
PATH=$PATH:$JAVA_HOME/bin

git설치

$ sudo apt-get update
$ sudo apt-get install git

git clone 후 빌드
```
$ git clone git [저장소 주소]
```
저장소를 복제한 곳으로 이동하여 권한 변경 후 빌드
```
$ chmod 775 ./mvnw
$ ./mvnw clean package
```

서버시작
target 디렉토리로 이동

$ java -jar [스프링프로젝트명.jar]

마무리

스프링부트 프로젝트를 생성하고 코드를 작성하는데는 시간이 오래 걸리자 않았다. 물론 코드가 뭐 없긴하지만…
하지만 cygwin을 통해 ubuntu 리눅스 서버를 세팅하는데 상당한 시간이 걸렸다.
진짜로 상당히 많은 삽질을 수없이 반복했다…ㅠ 덕분에 AWS계정을 3개나 만들게되는……
서버만 10번 넘게 만들고 지우고를 반복한것 같은데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그러다가 default vpc까지도 지우는 바람에 한 계정은 완전 못쓰게되어버렸다 ㅠ
default vpc를 복구해달라고 문의를 넣어봤지만 아직도 감감무소식이다.
전부터 배우고 싶었지만 엄두가 나질 않아서 계속 미루던 리눅스는 이번기회에 배우게 되서 좋았다.
command가 상당히 생소해서 익숙해지는데는 상당한 시간이 걸릴것 같다.
하지만 진짜로 정말 재미있었다.
언제나 새로운 것을 접하고 배우는 것만큼 즐거운 것은 없는것 같다.

저작자표시 비영리 변경금지

더블에스 devlog