---
# System prepended metadata

title: 북쪽행성 실행하기

---

# 북쪽행성 실행하기
## 1. 프로젝트 다운받기
* 깃랩의 레포지토리를 클론합니다.
```
$ git clone https://lab.ssafy.com/s05-final/S05P31A204.git
```
* frontend 폴더 내부에서 node_modules 를 설치합니다.
```
$ cd frontend
$ npm install
```
## 2. 8443포트에서 프로젝트 빌드하기
* frontend>vue.config.js 파일이 다음과 같은지 확인합니다.
```
const path = require('path');
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : './', //deveopment.productions,test모드 중 배포시 루트로, 개발시 상대경로로 설정함.

  outputDir: path.resolve(
    __dirname,
    //'../backend/northernplanet/src/main/resources/static',
     '../backend/webrtc/src/main/resources/static',
    //배포 설정
    //'./build',
  ), //빌드파일을 올릴 곳(디폴트(dist)에서 스프링 부트 static폴더로 )
  devServer: {
    historyApiFallback: true, // history mode 새로고침시 정상 작동
    port: 3000, //개발하는 동안 프런트엔드 페이지를 띄우는 포트
    https: true,
    proxy: {
      '/api/*': {
        target: 'https://localhost:8446', // /api 요청을 할때 백엔드 호출
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `
        @import "./src/assets/scss/global.scss";
        `,
      },
    },
  },
};
```
* frontend>src>constant>index.js 가 다음과 같은지 확인합니다.
```
const BASE_URL = 'https://localhost:8446/api';
// 배포 설정
//const BASE_URL = 'https://k5a204.p.ssafy.io/api';
const FILE_PATH = BASE_URL + '/presentation';
//프론트 3000 - 백엔드 8446포트에서 테스트 할 때 사용하세요.
// const GOOGLE_OAUTH_URL =
//   'https://localhost:8446/oauth2/authorize/google?redirect_uri=https://localhost:3000/front/oauth2/redirect';
//8443포트
const GOOGLE_OAUTH_URL =
   'https://localhost:8446/oauth2/authorize/google?redirect_uri=https://localhost:8443/front/oauth2/redirect';
//배포
//const GOOGLE_OAUTH_URL =
//  'https://k5a204.p.ssafy.io/oauth2/authorize/google?redirect_uri=https://k5a204.p.ssafy.io/front/oauth2/redirect';

export { BASE_URL, GOOGLE_OAUTH_URL, FILE_PATH };
```
* frontend>src>router>index.js 에서 history mode 를 주석해주세요.
```
  // mode: 'history',
```
* backend>northernplanet>src>main>resources>application-auth.properties 가 다음과 같은지 확인합니다.
```
    #google
    spring.security.oauth2.client.registration.google.client-id=728431963124-aa22v5qq2de7vik5lhj75rkekgge2sh2.apps.googleusercontent.com
    spring.security.oauth2.client.registration.google.client-secret=_o70Bb9pPLVOZFanRBU-lfFV
    spring.security.oauth2.client.registration.google.scope=email,profile
    spring.security.oauth2.client.registration.google.redirectUri=https://localhost:8446/oauth2/callback/google
    #배포시
    #spring.security.oauth2.client.registration.google.redirectUri=https://k5a204.p.ssafy.io/oauth2/callback/google
    #auth
    app.auth.tokenSecret=7A27EDDAEC22DD462965E38BAEC34
    app.auth.tokenExpirationMesc=864000000
    #프론트 3000번으로 테스트할 때
    # app.oauth2.authorizedRedirectUris=https://localhost:3000/front/oauth2/redirect
    #프론트 8443번으로 테스트할 때
    app.oauth2.authorizedRedirectUris=https://localhost:8443/front/oauth2/redirect
    #배포
    #app.oauth2.authorizedRedirectUris=https://k5a204.p.ssafy.io/front/oauth2/redirect
```

* backend>northernplanet>src>main>resources>application.properties 가 다음과 같은지 확인합니다.
```
    # ===================================================================
    # Spring Boot application properties
    #
    # For a list of common properties, check the Spring Boot docs:
    # https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-application-properties.html
    # ===================================================================
    # ----------------------------------------
    # CORE PROPERTIES
    # ----------------------------------------
    # LOGGING
    logging.level.root=INFO
    logging.level.org.apache=WARN
    logging.level.org.springframework=WARN
    logging.level.org.kurento=INFO
    logging.level.org.kurento.tutorial=INFO
    # OUTPUT
    # Terminal color output; one of [ALWAYS, DETECT, NEVER]
    spring.output.ansi.enabled=DETECT
    # Swagger
    springfox.documentation.swagger.use-model-v3=false
    #DB JPA
    spring.jpa.hibernate.naming.implicit-strategy=org.springframework.boot.orm.jpa.hibernate.SpringImplicitNamingStrategy
    spring.jpa.hibernate.naming.physical-strategy=org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy
    spring.jpa.hibernate.ddl-auto=update
    spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL57Dialect
    spring.jpa.properties.hibernate.show_sql=true
    spring.mvb.hiddenmethod.filter.enabled=true
    spring.data.web.pageable.one-indexed-parameters=true
    spring.datasource.url=jdbc:mysql://3.36.57.26:3306/northernplanet?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Seoul&zeroDateTimeBehavior=convertToNull&rewriteBatchedStatements=true
    spring.datasource.hikari.username=qnrWhrgodtjd
    spring.datasource.hikari.password=qnrWhrgodtjd2021!
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.security.user.name=ssafy
    spring.security.user.password=ssafy
    ## Multipart properties
    # Enable multipart uploads
    spring.servlet.multipart.enabled=true
    # Max file size.
    spring.servlet.multipart.max-file-size=200MB
    # Max Request Size
    spring.servlet.multipart.max-request-size=215MB
    ## File Storage Properties
    # All files uploaded through the REST API will be stored in this directory
    # ----------------------------------------
    # WEB PROPERTIES
    # ----------------------------------------
    # Oauth2
    spring.profiles.include=auth
    # EMBEDDED SERVER CONFIGURATION
    server.port=8446
    #배포시 밑에있는거 싹다 주석처리
    server.ssl.key-store=classpath:keystore.jks
    server.ssl.key-store-password=kurento
    server.ssl.key-store-type=JKS
```

* backend>webrtc>src>main>resources>application.properties 가 다음과 같은지 확인합니다.
```
    # ===================================================================
    # Spring Boot application properties
    #
    # For a list of common properties, check the Spring Boot docs:
    # https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-application-properties.html
    # ===================================================================


    # ----------------------------------------
    # CORE PROPERTIES
    # ----------------------------------------

    # LOGGING
    logging.level.root=INFO
    logging.level.org.apache=WARN
    logging.level.org.springframework=WARN
    logging.level.org.kurento=INFO
    logging.level.com.ssafy=INFO

    # OUTPUT
    # Terminal color output; one of [ALWAYS, DETECT, NEVER]
    spring.output.ansi.enabled=DETECT

    # ----------------------------------------
    # WEB PROPERTIES
    # ----------------------------------------

    # EMBEDDED SERVER CONFIGURATION
    server.port=8443
    #배포시 주석 처리
    server.ssl.key-store=classpath:keystore.jks
    server.ssl.key-store-password=kurento
    server.ssl.key-store-type=JKS
    #배포시 주석 풀기
    #server.ssl.key-store=classpath:cert_kurento.p12
    #server.ssl.key-store-password=kurento
    #server.ssl.key-store-type=PKCS12
```

* frontend 폴더 내부에서 다음 명령어를 수행하세요.
```
$ npm run build
```

## 3. 백엔드 프로젝트를 실행하세요.
* webrtc 프로젝트 터미널에서 다음 명령어를 수행하세요.
```
$ mvn -U clean spring-boot:run -Dspring-boot.run.jvmArguments="-Dkms.url=ws://3.36.57.26:8888/kurento"
```
* northernplanet 프로젝트를 실행하세요.

## 4. 서비스 주소에 접속하세요.
* https://localhost:8443
    * 프론트에서 히스토리 모드를 껏기 때문에 링크를 이동할때 포트번호 옆에 `/#/`를 붙여줘야 페이지가 정상적으로 이동합니다.
* https://localhost:8446/swagger-ui/index.html