본문 바로가기
Flutter

🧑🏻‍💻 플러터 웹 프로젝트의 파이어베이스 호스팅 배포 과정

by bartizan_ 2025. 6. 17.
728x90

안녕하세요! 이번 포스트에서는 Flutter 웹 프로젝트를 Firebase Hosting으로 배포한 전체 과정을 단계별로 정리해보려고 합니다. 특히 Google OAuth 인증과 검색 엔진 최적화(SEO) 설정에 중점을 두어 설명드리겠습니다.

목차

  1. 프로젝트 준비 및 Firebase 초기화
  2. Google OAuth 인증 설정 및 문제 해결
  3. 검색 엔진 최적화(SEO) 설정
  4. Firebase 배포 프로세스
  5. 마무리 및 추가 팁

1. 프로젝트 준비 및 Firebase 초기화

필요한 패키지 설치

우선 플러터 프로젝트에 Firebase 관련 패키지를 설치합니다:

dependencies:
  firebase_core: ^x.x.x
  firebase_auth: ^x.x.x
  # 기타 필요한 패키지들

main.dart에 Firebase 초기화 코드 추가

앱의 시작점인 main.dart 파일에 Firebase를 초기화하는 코드를 추가합니다:

import 'package:auction/firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 비동기 초기화를 위해 필요

  // Firebase 초기화
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const ProviderScope(child: SeedAuctionApp()));
}

Google 로그인 버튼을 위한 HTML 요소 등록

웹에서 Google 로그인 버튼을 표시하기 위해 HTML 요소를 등록합니다:

import 'dart:ui_web' as ui;
import 'dart:html' as html;

void main() async {
  // ... 기존 코드 ...
  
  ui.platformViewRegistry.registerViewFactory(
    'google-signin-button',
    (int viewId) {
      final div = html.DivElement()
        ..id = 'g_id_signin'
        ..style.width = '240px'
        ..style.height = '50px';
      return div;
    },
  );
  
  // ... 기존 코드 ...
}

2. Google OAuth 인증 설정 및 문제 해결

문제: redirect_uri_mismatch 오류

배포 후 Google 로그인 시도 시 다음과 같은 오류가 발생했습니다:

액세스 차단됨: 이 앱의 요청이 잘못되었습니다
400 오류: redirect_uri_mismatch

해결 방법

1. Google Cloud Console에서 리디렉션 URI 등록

  1. Google Cloud Console에 로그인
  2. 프로젝트 선택 후 APIs & Services > Credentials로 이동
  3. OAuth 2.0 클라이언트 ID 클릭
  4. Authorized redirect URIs 섹션에 다음 URI 추가: 
    https://<your-project-id>.web.app/__/auth/handler
    (우리 프로젝트의 경우: https://seedauction-bfeb3.web.app/__/auth/handler)

2. Firebase Console에서 설정 확인

  1. Firebase Console에 로그인
  2. 프로젝트 선택 후 Authentication > Sign-in method로 이동
  3. Google 제공자 선택하고 승인된 도메인 확인

3. 검색 엔진 최적화(SEO) 설정

웹 앱의 검색 엔진 노출과 소셜 미디어 공유를 최적화하기 위해 다음과 같은 파일들을 추가했습니다:

1. index.html 메타태그 추가

index.html 파일의 <head> 태그에 아래 내용을 추가:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="여기에 내용 작성">
  <meta name="keywords" content="키워드 작성">
  <meta name="author" content="엮은이는 아는데요">
  <meta name="robots" content="index, follow">

  <!-- Open Graph -->
  <meta property="og:title" content="타이틀">
  <meta property="og:description" content="설명란.">
  <meta property="og:image" content="/assets/logo.png">
  <meta property="og:url" content="url">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="title">
  <meta name="twitter:description" content="궁금하면, 알아서하세요.">

  <title></title>
  <!-- 기존 태그들 -->
</head>

2. robots.txt 생성

검색 엔진이 페이지를 크롤링할 수 있도록 robots.txt 파일 생성:

User-agent: *
Allow: /
Sitemap: https://seedauction-bfeb3.web.app/sitemap.xml

3. sitemap.xml 생성

검색 엔진이 사이트 구조를 이해할 수 있도록 sitemap.xml 생성:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://seedauction-bfeb3.web.app/</loc>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://seedauction-bfeb3.web.app/#/auth</loc>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://seedauction-bfeb3.web.app/#/loan_result</loc>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

4. Firebase 배포 프로세스

Firebase CLI 설치

npm install -g firebase-tools

로그인 및 프로젝트 초기화

firebase login
firebase init

웹 앱 빌드

flutter build web

Firebase 배포

firebase deploy

5. 마무리 및 추가 팁

사용자 경험 개선을 위한 로딩 화면 추가

앱에서 데이터를 불러오는 동안 사용자에게 피드백을 제공하기 위해 LoanResultLoadingScreen과 같은 커스텀 로딩 화면을 추가했습니다:

class LoanResultLoadingScreen extends StatelessWidget {
  final String message;

  const LoanResultLoadingScreen({
    Key? key,
    this.message = '결과를 불러오고 있어요...',
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final iconSize = size.width * 0.3;
    final fontSize = size.width * 0.045;

    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Center(
          child: AnimatedOpacity(
            opacity: 1.0,
            duration: const Duration(milliseconds: 700),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset(
                  'assets/images/analysis.png',
                  width: iconSize,
                  height: iconSize,
                ),
                const SizedBox(height: 40),
                Text(
                  message,
                  style: TextStyle(
                    fontSize: fontSize * 1.3,
                    fontWeight: FontWeight.bold,
                    color: Colors.black87,
                  ),
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

성능 최적화 팁

  1. 이미지 최적화: 웹용 이미지는 크기와 용량을 최적화하여 로딩 속도를 개선
  2. 지연 로딩: 필요한 리소스만 초기에 로드하고 나머지는 필요할 때 로드
  3. 상태 관리: Riverpod와 같은 효율적인 상태 관리 라이브러리 활용

결론

Flutter로 개발한 웹 애플리케이션을 Firebase Hosting으로 배포하는 과정은 여러 단계와 세부 설정이 필요합니다. 특히 Google OAuth 인증과 SEO 최적화는 웹 애플리케이션의 접근성과 가시성을 높이는 데 중요한 역할을 합니다. 이 블로그 포스트가 여러분의 Flutter 웹 프로젝트 배포에 도움이 되길 바랍니다!

 

추가 질문이나 더 알고 싶은 내용이 있으시면 댓글로 남겨주세요.

 
728x90
저작자표시 비영리 변경금지 (새창열림)

'Flutter' 카테고리의 다른 글

[🐳 Flutter 배포 에러 해결] Unable to instantiate activity & 버전 코드 중복 해결법  (0) 2025.02.17
[🐳Flutter 플러터] playstore 배포 시 서버 연동 안될 때(http)  (0) 2025.02.17
[🐳Flutter 플러터] 카카오 로그인  (0) 2025.02.13
[Flutter 플러터] play console 배포 시 에러  (0) 2025.02.06

관련글

댓글

티스토리툴바