728x90

시놀로지 WebStation에서 홈페이지 만들고 구글 계정으로 로그인하기

안녕하세요! 이번 포스팅에서는 시놀로지 NAS의 WebStation을 활용하여 홈페이지를 만들고, 구글 계정을 통한 회원가입 및 로그인 기능을 구현하는 방법을 상세히 알아보겠습니다.

1. 개요

시놀로지 NAS는 단순한 저장장치를 넘어 다양한 서비스를 호스팅할 수 있는 플랫폼입니다. WebStation 패키지를 사용하면 자신만의 웹사이트를 직접 호스팅할 수 있고, PHP를 활용해 동적 기능도 구현할 수 있습니다. 여기에 구글 계정 인증을 추가하면 사용자에게 편리한 로그인 경험을 제공할 수 있습니다.

필요한 것들

시놀로지 NAS 장치 (DSM 6.0 이상)
WebStation 패키지 설치됨
PHP 패키지 설치됨 (PHP 7.4 이상 권장)
SSH 접속 권한 (컴포저 설치를 위해)
구글 계정 (클라우드 콘솔 사용 위함)

2. WebStation 설정하기

WebStation 패키지 설치

시놀로지 패키지 센터에서 'WebStation' 검색
설치 버튼 클릭 후 설치 완료
PHP 패키지도 함께 설치 (PHP 7.4 이상)

웹 서버 설정

WebStation을 실행하고 '웹 서비스 포털' 탭으로 이동
'생성' 버튼을 클릭하여 새 웹 포털 생성
도메인 이름, 문서 루트 등 기본 정보 입력
'PHP' 탭에서 PHP 버전 선택 (7.4 이상)
'확인'을 눌러 설정 저장

HTTPS 설정 (필수)

WebStation의 '일반 설정'으로 이동
'인증서' 탭에서 SSL 인증서 선택 또는 생성
HTTPS 연결 활성화
HTTP에서 HTTPS로 자동 리디렉션 활성화 (권장)

3. 컴포저(Composer) 설치하기

구글 인증 라이브러리를 사용하려면 PHP의 의존성 관리자인 컴포저가 필요합니다.

SSH로 시놀로지에 접속 (관리자 권한 필요)

ssh admin@your-synology-ip

루트 권한으로 전환

sudo -i

필요한 디렉토리로 이동

cd /volume1/web

컴포저 설치 스크립트 다운로드 및 실행

curl -sS https://getcomposer.org/installer | php

전역에서 사용할 수 있도록 설정

mv composer.phar /usr/local/bin/composer
chmod +x /usr/local/bin/composer

설치 확인

composer --version

4. 구글 클라우드 콘솔 설정

프로젝트 생성 및 API 활성화

구글 클라우드 콘솔에 접속
새 프로젝트 생성 (상단 메뉴에서 '프로젝트 선택' → '새 프로젝트')
'라이브러리' 메뉴로 이동하여 'Google Sign-In API' 또는 'Google+ API' 검색 후 활성화

OAuth 클라이언트 ID 설정

'사용자 인증 정보' 메뉴로 이동
'사용자 인증 정보 만들기' → 'OAuth 클라이언트 ID' 선택
애플리케이션 유형: '웹 애플리케이션' 선택
이름 입력 (예: "My Synology Website")
승인된 자바스크립트 원본에 시놀로지 웹사이트 URL 추가 (https://your-synology-domain.com)
승인된 리디렉션 URI에 콜백 URL 추가 (https://your-synology-domain.com/callback.php)
'만들기' 버튼 클릭
생성된 클라이언트 ID와 시크릿 키를 안전하게 보관

5. PHP 프로젝트 구성

폴더 구조 생성

WebStation 문서 루트에 새 프로젝트 폴더 생성

mkdir -p /volume1/web/mywebsite
cd /volume1/web/mywebsite

기본 폴더 구조 생성

mkdir -p src/config
mkdir -p public
mkdir -p database

컴포저로 구글 인증 라이브러리 설치

composer.json 파일 생성

{
    "require": {
        "google/apiclient": "^2.12",
        "vlucas/phpdotenv": "^5.4"
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    }
}

라이브러리 설치

composer install

환경 변수 설정 (.env 파일)

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URI=https://your-synology-domain.com/callback.php

6. 데이터베이스 설정

시놀로지 패키지 센터에서 MariaDB 설치
phpMyAdmin 설치 (선택사항이지만 관리에 유용)
새 데이터베이스 및 사용자 생성
데이터베이스에 users 테이블 생성:

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    google_id VARCHAR(255) UNIQUE NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    name VARCHAR(255) NOT NULL,
    picture VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

7. PHP 코드 구현

config.php 파일 생성 (src/config/config.php)

<?php
require_once __DIR__ . '/../../vendor/autoload.php';

// .env 파일 로드
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../../');
$dotenv->load();

// 데이터베이스 연결 설정
$db_host = 'localhost';
$db_name = 'your_database_name';
$db_user = 'your_database_user';
$db_pass = 'your_database_password';

$db = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 구글 클라이언트 설정
$client = new Google_Client();
$client->setClientId($_ENV['GOOGLE_CLIENT_ID']);
$client->setClientSecret($_ENV['GOOGLE_CLIENT_SECRET']);
$client->setRedirectUri($_ENV['GOOGLE_REDIRECT_URI']);
$client->addScope('email');
$client->addScope('profile');

인덱스 파일 (public/index.php)

<?php
require_once __DIR__ . '/../src/config/config.php';
session_start();

// 이미 로그인한 사용자인지 확인
if (isset($_SESSION['user_id'])) {
    $stmt = $db->prepare("SELECT * FROM users WHERE id = ?");
    $stmt->execute([$_SESSION['user_id']]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 시놀로지 웹사이트</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>시놀로지 웹사이트에 오신 것을 환영합니다</h1>
        <nav>
            <?php if (isset($user)): ?>
                <div class="user-info">
                    <img src="<?= htmlspecialchars($user['picture']) ?>" alt="프로필 이미지">
                    <span><?= htmlspecialchars($user['name']) ?></span>
                    <a href="logout.php">로그아웃</a>
                </div>
            <?php else: ?>
                <a href="login.php" class="login-btn">구글로 로그인</a>
            <?php endif; ?>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>시놀로지 WebStation으로 만든 홈페이지</h2>
            <p>이 웹사이트는 시놀로지 NAS의 WebStation을 이용해 호스팅되고 있습니다.</p>
            <?php if (isset($user)): ?>
                <p>안녕하세요, <?= htmlspecialchars($user['name']) ?>님! 로그인되었습니다.</p>
            <?php else: ?>
                <p>더 많은 기능을 사용하려면 로그인해 주세요.</p>
            <?php endif; ?>
        </section>
    </main>
    
    <footer>
        <p>&copy; <?= date('Y') ?> 내 시놀로지 웹사이트. All rights reserved.</p>
    </footer>
</body>
</html>

로그인 처리 (public/login.php)

<?php
require_once __DIR__ . '/../src/config/config.php';
session_start();

// 이미 로그인한 경우
if (isset($_SESSION['user_id'])) {
    header('Location: index.php');
    exit;
}

// 구글 로그인 URL 생성
$authUrl = $client->createAuthUrl();

// 로그인 페이지로 리다이렉트
header('Location: ' . filter_var($authUrl, FILTER_SANITIZE_URL));
exit;

콜백 처리 (public/callback.php)

<?php
require_once __DIR__ . '/../src/config/config.php';
session_start();

// 코드가 없으면 홈페이지로 리다이렉트
if (!isset($_GET['code'])) {
    header('Location: index.php');
    exit;
}

try {
    // 인증 코드로 토큰 얻기
    $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
    $client->setAccessToken($token);
    
    // 사용자 정보 가져오기
    $google_oauth = new Google_Service_Oauth2($client);
    $google_account_info = $google_oauth->userinfo->get();
    
    // 사용자 정보 추출
    $google_id = $google_account_info->id;
    $email = $google_account_info->email;
    $name = $google_account_info->name;
    $picture = $google_account_info->picture;
    
    // 기존 사용자인지 확인
    $stmt = $db->prepare("SELECT * FROM users WHERE google_id = ?");
    $stmt->execute([$google_id]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if (!$user) {
        // 새 사용자 등록
        $stmt = $db->prepare("INSERT INTO users (google_id, email, name, picture) VALUES (?, ?, ?, ?)");
        $stmt->execute([$google_id, $email, $name, $picture]);
        $user_id = $db->lastInsertId();
    } else {
        // 기존 사용자 정보 업데이트
        $stmt = $db->prepare("UPDATE users SET email = ?, name = ?, picture = ? WHERE google_id = ?");
        $stmt->execute([$email, $name, $picture, $google_id]);
        $user_id = $user['id'];
    }
    
    // 세션에 사용자 ID 저장
    $_SESSION['user_id'] = $user_id;
    
    // 홈페이지로 리다이렉트
    header('Location: index.php');
    exit;
    
} catch (Exception $e) {
    // 오류 처리
    echo '오류가 발생했습니다: ' . $e->getMessage();
}

로그아웃 처리 (public/logout.php)

<?php
session_start();
session_destroy();
header('Location: index.php');
exit;

8. 웹사이트 스타일링 (public/css/style.css)

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

h1 {
    font-size: 1.8rem;
}

.login-btn {
    display: inline-block;
    background-color: #4285F4;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

main {
    margin-bottom: 40px;
}

section {
    margin-bottom: 30px;
}

h2 {
    margin-bottom: 15px;
}

footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
    color: #666;
}

9. 웹사이트 접속 및 테스트

웹브라우저에서 설정한 도메인으로 접속 (https://your-synology-domain.com)
"구글로 로그인" 버튼을 클릭하여 로그인 과정 테스트
구글 계정 선택 및 권한 동의 후 리디렉션 확인
로그인 성공 후 사용자 정보 표시 확인

10. 문제 해결 및 팁

PHP 확장 프로그램 활성화

구글 인증 라이브러리는 여러 PHP 확장을 필요로 합니다. WebStation의 PHP 설정에서 다음 확장이 활성화되어 있는지 확인하세요:

curl
openssl
json
mbstring

리디렉션 URI 오류

"리디렉션 URI가 일치하지 않습니다" 오류가 발생하면:

구글 클라우드 콘솔에서 정확한 리디렉션 URI 확인
HTTPS 사용 여부 확인 (HTTP는 구글 인증에서 지원되지 않음)
포트 번호가 포함된 경우 정확히 일치하는지 확인

.env 파일 보안

.env 파일에는 중요한 인증 정보가 포함되어 있으므로 웹에서 접근할 수 없도록 해야 합니다. .htaccess 파일을 만들어 접근을 차단하세요:

# .htaccess 파일
<FilesMatch "^\.env">
    Order allow,deny
    Deny from all
</FilesMatch>

마무리

이제 시놀로지 WebStation에서 홈페이지를 구축하고 구글 계정으로 로그인할 수 있는 시스템을 갖추게 되었습니다. 이 기본 구조를 바탕으로 더 많은 기능을 추가하고 확장해 나갈 수 있습니다.

시놀로지 NAS는 단순한 저장 장치를 넘어 강력한 웹 호스팅 플랫폼으로 활용할 수 있으며, WebStation과 PHP를 조합하면 다양한 웹 애플리케이션을 구현할 수 있습니다.

참고 자료

728x90

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

'SYLOLOGY > WEBSTATION' 카테고리의 다른 글

시놀로지 NAS에서 Docker Compose를 활용한 웹 스테이션 구축하기 (0)	2025.03.09
시놀로지 웹스테이션에서 도커로 웹서비스 구축하기 (0)	2025.03.09
시놀로지 NAS에 역방향 프록시 설정하기 (0)	2025.03.06
SYNOLOGY WEBSTATION 을 이용하여 홈페이지 만들기 (0)	2025.03.06

dma-ai

AI Insights & Innovations