클라우딩 어플리케이션 엔지니어링 TIL Day 39, 40, 41, 42 - 감정 일기장 만들기 (8 ~ 마치면서)

# 배포 준비하기

우선 서비스 실행 시 브라우저 상단의 이름부터 바꿔보자

1. 타이틀 변경

프로그램 실행 시 React App 으로 뜬다

이걸 변경해보자

public 디렉토리의 index.html 에서 진행한다

    <title>React App</title>

이 부분을 수정하자

    <title>감정 일기장</title>

추가적으로 사이트 설명 부분도 수정해보자

<meta
      name="description"
      content="Web site created using create-react-app"
    />

이 부분도 아래와 같이 수정하고

    <meta name="description" content="나만의 감정 일기장" />

마지막으로 lang 도 ko로 변경하면 끝

 

2. pages 컴포넌트마다 타이틀 변경

pages에 위치한 컴포넌트마다 타이틀을 정해주자

우선 Diary 컴포넌트 먼저 바꿔주자

  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `감정 일기장 - ${id}번 일기`;
  });

위의 코드를 기준으로 페이지별로 어떤 타이틀을 띄울지 정해서 작성하면 된다

 

3. favicon 변경

타이틀 아이콘인 favicon을 바꿔주자

기존의 favicon을 삭제하고 사용할 새로운 favicon 파일을 넣자

잘 보이진 않지만 변경 완료!

 

마지막으로 소스코드 용량을 줄여야한다

---

# 빌드 / 배포하기

npm run build

위의 명령어를 터미널 창에 입력하자

빌드가 완료되었다!

이제 배포를 해보자

우선 serve 명령어를 설치해야 한다

npm install -g serve

로 serve를 설치해주자

serve란?

serve : 빌드된 파일 배포해주는 패키지

 

serve -s build

명령어로 배포를 해주면 된다

배포까지 완료된 모습

이제 로컬 서버를 종료시키고

localhost 3000 으로 접속하면

잘 작동한다!!

만약 배포 후 접속했을 때 에러 발생하면 에러 메시지를 보고 고치면 된다

에러가 있을 때는 수정한 다음에 다시 빌드해야 함을 기억하자
새로고침으로는 안 바뀐다

 

# 에러 발생

1. 없는 id값 읽는 에러

모든 일기 데이터 삭제가 삭제되어  localStorage에 남은 데이터가 하나도 없는 경우

위와 같은 에러가 발생한다

그 원인을 찾기위해 App 컴포넌트의 로직을 살펴보니

  useEffect(() => {
    const localData = localStorage.getItem("diary");
    if (localData) {
      const diaryList = JSON.parse(localData).sort(
        (a, b) => parseInt(b.id) - parseInt(a.id)
      );

      dataId.current = parseInt(diaryList[0].id) + 1;

      dispatch({ type: "INIT", data: diaryList });
    }
  }, []);

App 컴포넌트의 아래 코드에서

      dataId.current = parseInt(diaryList[0].id) + 1;

 

id 값을 읽어올 수 없다는

즉, 없는 인덱스에 접근해서 id 를 꺼내오려고 하기 때문에 에러가 발생하고 있었다

  useEffect(() => {
    const localData = localStorage.getItem("diary");
    if (localData) {
      const diaryList = JSON.parse(localData).sort(
        (a, b) => parseInt(b.id) - parseInt(a.id)
      );

      if (diaryList.length >= 1) {
        dataId.current = parseInt(diaryList[0].id) + 1;
        dispatch({ type: "INIT", data: diaryList });
      }
    }
  }, []);

이렇게 로직을 수정한 후 다시 빌드하고 실행하니 에러 해결!

 

2. 타이틀 미변경 에러

일기 등록, 수정, 삭제 등의 기능을 수행한 후 Home 컴포넌트로 이동해도 타이틀이 변하지 않고 이전의 컴포넌트 타이틀이 유지되고 있다

일기 작성 후 Home 컴포넌트로 돌아왔지만 타이틀은 그대로 일기 작성 컴포넌트의 타이틀이다

이는 Home 컴포넌트에서는 타이틀 지정해주고 있지 않기 때문이다

  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `감정 일기장`;
  });

Home 컴포넌트에서 이 로직을 추가하면 잘 된다!

---

# Firebase로 프로젝트 배포하기

이제 대망의 Firebase 배포를 한다

우선

Firebase에 접속하자

https://firebase.google.com/?hl=ko

Firebase | Google’s Mobile and Web App Development Platform

로그인 후 시작하기 를 클릭하면

아래와 같이 firebase 콘솔이 뜬다

프로젝트 추가 를 클릭해서 새로운 프로젝트를 만들어보자

적절한 프로젝트 이름을 지정하고

구글 애널리틱스 연동 유무에 따라 체크박스를 선택하면 된다

나같은 경우 체크박스를 해제하고 바로 프로젝트 만들기를 진행하였다

프로젝트 생성 중!!!!

생성이 완료되면

계속

을 클릭하자 아래의 페이지가 보일 것이다

왼쪽 메뉴바에서

빌드 -> Hosting 클릭 -> 시작하기

순서로 눌러주자

이제부터 Firebase 호스팅 설정을 시작한다

우선 Window 기준

명령 프롬프트를 관리자 권한으로 실행하여

위의 명령어를 입력한다

두번째 단계로는 vscode 에서 터미널을 열고

이때 주의해야 할 것은 프로젝트의 루트 디렉터리에서 진행하여야 한다

firebase login  명령어를 입력하여 구글 로그인을 하자

로그인 완료!

다음으로

firebase init 명령어를 수행한다

자신의 배포 설정에 맞춰서 세부 설정사항을 정해주면 되는데

나는 아래와 같은 설정을 했다 (Github와도 연동했다)

aldls@aldls819 MINGW64 ~/Desktop/vscode/emotion-diary (main)
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########      
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######        
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########      

You're about to initialize a Firebase project in this directory:

  C:\Users\aldls\Desktop\vscode\emotion-diary

? Are you ready to proceed? Yes
? Which Firebase features do you want to set up for this directory? Press Space  
to select features, then Enter to confirm your choices. Hosting: Configure files 
for Firebase Hosting and (optionally) set up GitHub Action deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: jieun-react-project-83bb0
 (jieun-react-project)
i  Using project jieun-react-project-83bb0 (jieun-react-project)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
? File build/index.html already exists. Overwrite? Yes
+  Wrote build/index.html

i  Detected a .git folder at C:\Users\aldls\Desktop\vscode\emotion-diary
i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?client_id=89cf50f02ac6aaed3484&state=490090271&redirect_uri=http%3A%2F%2Flocalhost%3A9005&scope=read%3Auser%20repo%20public_repo

Waiting for authentication...

+  Success! Logged into GitHub as aldls819

⠸ For which GitHub repository would you like to set up a GitHub workflow?        
(format: user/repository)

!  The provided authorization cannot be used with this repository. If this repository is in an organization, did you remember to grant access?

i  Action required: Visit this URL to ensure access has been granted to the appropriate organization(s) for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484        
? For which GitHub repository would you like to set up a GitHub workflow?        
(format: user/repository) aldls819/emotion-diary

+  Created service account github-action-761730235 with Firebase Hosting admin permissions.
+  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_JIEUN_REACT_PROJECT_83BB0.
i  You can manage your secrets at https://github.com/aldls819/emotion-diary/settings/secrets.

? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm ci && npm run build

+  Created workflow file C:\Users\aldls\Desktop\vscode\emotion-diary\.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged?   
Yes
? What is the name of the GitHub branch associated with your site's live channel?
 develop

+  Created workflow file C:\Users\aldls\Desktop\vscode\emotion-diary\.github/workflows/firebase-hosting-merge.yml

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...       
i  Writing project information to .firebaserc...        

+  Firebase initialization complete!

설정 완료 후 파일 디렉터리를 확인해보니 새로운 파일들이 생겼다

여기까지가 init 완료

이제 deploy를 하기 위해서 firebase 콘솔로 이동하자

콘솔로 이동 클릭

화면 아래로 내려서

다른 사이트 추가 클릭

배포할 웹 서비스의 도메인을 적자

사이트 추가 후

firebase.json에 아래와 같이 site 설정을 추가하자

{
  "hosting": {
    "site": "jieun-diary-project",
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

이제 배포를 해보자!!!

npm run build

firebase deploy

의 순서로 vscode 터미널에 입력해주면?!

잘 배포되었다!

Hosting URL 로 접속하니 아주 잘 된다!!!

Firebase Hosting 에서 로그도 확인할 수 있다

 

Firebase로 배포하는 비용은 무료일까?

 현재 spark 요금제를 사용 중이기 때문에 무료지만

다른 요금제를 쓰면 유료이다!

---

# Open Graph 설정

웹사이트의 링크 공유 시 보여줄 미리보기를 만들어보자

우선 public 디렉터리에 썸네일 이미지를 추가한다

그리고 index.html 파일에 아래의 코드를 추가하자

    <meta property="og:imaege" content="%PUBLIC_URL%/thumbnail.png" />
    <meta property="og:site_name" content="감정 일기장" />
    <meta property="og:description" content="나만의 작은 감정 일기장이라능" />

설정 후 다시 빌드하고 웹페이지 링크를 공유해보니?!

잘 된다!!

근데 썸네일은 안 보이네..?!

---

# 새로 알게 된 점

이번 강의를 통해서 Firebase의 사용법을 제대로 알게 되었다

그리고 AWS 등을 이용하지 않더라도 무료로 쉽고 빠르게 배포할 수 있음을 알게 되었다

물론 프론트 서버밖에 없지만 이렇게 배포도 해보고 내가 만든 사이트 링크를 공유해서 다른 사람도 이용해보는 경험을 통해서

한층 성장한 시간이었다

또 개발에서 끝났을 때보다 배포까지 해서 잘 되는 것을 확인하니 재미있었다

빠르게 많은 것들을 배운 감정 일기장 강의였다

여기서 그치지않고 새로운 기능을 추가해서 더욱 풍부한 서비스로 발전시켜봐야겠다