Learn new Get simpler Do more

드디어 이제 블로그 앱을 호스팅할 준비가 다 되었습니다. 이 앱을 Google Cloud통해 게시해 보도록 하겠습니다. 참고로 이 과정에서는 구글 클라우드 사용에 따른 비용이 청구될 가능성 있으므로 주의해야 합니다. 첫번째 단계는 app.yaml파일을 Back End 프로젝에 생성해줍니다. 이 파일은 기본적으로 구글 클라우드에 프로젝트를 실행해야 하는 환경을 알려줍니다. 그리고 여기에 MongoDB 사용자 이름 및 비밀번호와 같은 환경 변수를 지정하기에도 좋은 위치입니다. 추가한 app.yaml파일에 node 서버의 버전정보를 등록합니다. 그리고 환경 변수 파일을 지정합니다. app.yaml includes: - prod-env.yaml runtime: nodejs20 그 다음 위에 지정한 환경 변수를 ..

여기서는 Front End에서 부득히하게 코드 수정이 생겼을때 다시 배포하는 방법을 알아보도록 하겠습니다. 원격으로 접속한 데이터베이스를 연결한 블로그에 로그인을 해 보겠습니다. 로그인 정보는 Firebase Auth를 사용하고 있기에 호스팅으로 옮겨도 사용가능하므로 이전 로그인 정보로 로그인 해봅니다. 그런데 여기서 Front End에 구현이 잘못된곳이 있어서 소스를 다시 수정해야하는 일이 발생합니다. 예를 들어 여기서는 로그인을 확인하는 정보가 잘못되었습니다. 로그인을 하니 좋아요을 누르지 않았는데 이미 눌렀다고(Already Upvoted)나옵니다. 이부분을 수정한 코드는 다음과 같습니다. ArticlePage.js import { useState, useEffect } from 'react'; i..

앱을 게시 할 준비를 하기위해서 할일이 하나 더 있습니다. MongoDB를 개발 환경이 아닌 누구나 엑세스가 가능한 곳으로 호스팅 해야 합니다. MongoDB를 위한 다양한 호스팅 플랫폼중에 여기서는 MongoDB Atlas 소프트웨어의 무료 버전이 일반적으로 작업이 가장 쉽다고 생각하기에 이곳을 사용하겠습니다. MongoDB Atlas | MongoDB MongoDB Atlas Get started free. No credit card required. www.mongodb.com MongoDB 계정이 없다면 위의 링크를 통해 가입을 해야 합니다. MongoDB의 Atlas 대시보드에서 블로그를 사용을 위해 새로운 프로젝트를 작성합니다. 프로젝트 이름을 정해주고 Next 버튼으로 진행합니다. 여기서는 ..

지금까지 Full stack 앱을 작성 하였고 이제 작업한 앱을 누구나 엑세스 할수 있도록 호스팅하는 방법을 알아보도록 하겠습니다. 가장 먼저 해야 할일은 Front End를 빌드 하고 Back End에서 호스팅하도록 하는것입니다. 먼저 Front End를 빌드하겠습니다. 클라이언트 폴더로 이동을 한후 다음의 명령어를 입력합니다. npm run build 위의 명령어를 통해 개발자가 친화적인 코드를 브라우저 친화적인 코드로 변경하여 build폴더안에 저장합니다. 현재 Front End를 개발하는 동안 앱을 호스팅한것은 Reacts 안의 내장 개발 서버였습니다. 그러나 실제 프로덕션에서는 노드 서버에서 호스팅 해야합니다. 그래서 Front End에서 빌드한 build폴더를 카피해서 Back End에 저장합..

이제 인증의 마무리단계를 하겠습니다. 사용자는 한번만 좋아요 버튼을 클릭 할 수 있게 버튼 이름을 변경하고 로그인 한 사용자는 이름이 가지고 있으므로 이름이 자동으로 뿌려지도록 하는 작업등을 해 보겠습니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import NotFoundPage from './NotFoundPage'; import CommentsList from '../components/CommentsList'; import AddCommentForm from '../components/AddCommen..

지금까지 서버에서 인증 토큰을 받아 처리하는 작업을 진행했었습니다. 그럼 이제부터는 서버에서 참조하는 인증 코드를 클라이언트에서 처리하는 작업을 하겠습니다. 우선 ArticlePage.js에서는 로그인 한 사용자가 있으면 그 로그인 사용자의 인증 토큰을 가지고 와서 서버에 Axios로 요청을 할때 Header에 인증 토큰을 실어서 같이 보내는 작업을 합니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import NotFoundPage from './NotFoundPage'; import CommentsList ..

이제 본격적으로 좋아요를 한번 클릭 할수 있고 댓글을 사용자 인증이 된 상태에서만 될수 있도록 리팩토링을 해보겠습니다. 먼저 사용자가 아직 로그인 하지 않은 경우 사용자가 위의 엔드포인트에 요청할수 없도로 위의 두 경로(put upvote request, post comment request)에만 적용되는 또 다른 미들웨어를 추가 해줍니다. 그리고 좋아요 upvote에는 좋아요 버튼을 누른 사용자의 id를 데이터베이스에 같이 저장하는 작업을 합니다. 그리고 댓글 comment에는 이름과 댓글이외에 email 정보도 함께 추가합니다. 변경된 코드는 다음과 같습니다. server.js import fs from 'fs'; import admin, { auth } from 'firebase-admin'; im..

적절한 사용자가 접속했는지 여부를 판단하기 위해서는 Axios를 통해 페이지를 요청하는것 이외에 auth-token을 통해 자격증명을 확인해야 합니다. 그럼 Front End에서 오는 요청이 적절한 auth-token을 포함하고 있는지 확인하는 작업을 Firebase admin package를 통해 하겠습니다. Express 미들웨어를 통해 request.body을 정보를 받은것처럼 auth-token을 처리하기 위해 미들웨어 추가(app.use)를 통해 처리합니다. 또한 페이지를 불러올때에는 사용자의 로그인 여부는 상관이 없이 보여줘야 하나 이전에 좋아요를 눌렀는지 확인을 하기 위해 Get 요청페이지에 사용자 좋아요에 관한 정보도 같이 로드하요 요청시 그 정보도 함께 Front End를 응답하는 처리도..

Front End쪽에 Firebase를 통해 사용자 인증을 하였으므로 이제는 Back End인 Express Node.js에 Firebase Auth를 통해 사용자 인증을 추가하겠습니다. 이 작업은 Firebase에서 발행하는 private key를 통해 서버에 제대로 된 사용자 접속이 있는지 알아볼수 있고 또 한번만 좋아요를 누른다던지 댓글을 달수 있는지 여부를 확인할수 있습니다. 그럼 Back End에 Firebase Auth를 추가하기 위해 먼저 Firebase Auth 프로젝트 홈페이지에서 사용자 인증에 관한 private key를 생성하겠습니다. 이 키는 프로젝트의 모든 변경을 할수 있으므로 유출되지 않게 최대한 조심합니다. Private key를 생성하는 방법은 다음과 같습니다. 우선 Fire..

계정이 없는 사용자를 위해 사용자를 만들수 있는 계정 생성 페이지를 만들겠습니다. src폴더안의 pages폴더에 CreatAccountPage.js파일을 생성합니다. 이전에 만들었던 LoginPage.js와 비슷하지만 패스워드 재확인 필드만 더 추가해주면 코드는 다음과 같습니다. CreateAccountPage.js import { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'; const CreateAccountPage = () => { const [email, setEmail] =..