React 앱에 사용자 인증 추가하기
웹 애플리케이션을 구축할 때 사용자 인증은 애플리케이션에 추가해야 하는 필수 기능입니다. 사용자 인증을 통해 인증된 사용자는 애플리케이션에서 사용할 수 있는 기능에 액세스할 수 있으며, 인증되지 않은 사용자의 액세스는 거부됩니다.
React 애플리케이션에서 사용자 인증을 통합하는 것은 쉬운 일이 아니며 비밀번호 해싱, 인증 토큰 생성 및 관리 등 여러 가지 복잡한 프로세스를 포함하기 때문에 시간이 많이 소요됩니다.
그러나 Back4App과 같은 플랫폼을 사용하면 사용자 인증을 React 애플리케이션과 통합하는 것이 간단하고 쉽습니다. 이 글에서는 Back4App을 사용하여 React 앱에 사용자 인증을 추가하는 방법을 살펴봅니다.
Contents
사용자 인증 이해
사용자 인증은 애플리케이션에 액세스하려는 사람의 신원을 확인하는 프로세스입니다.
애플리케이션에 액세스하려는 사람은 사용자 이름과 비밀번호, 생체 인식 데이터, 액세스 키/토큰 등의 형태로 확인 가능한 자격 증명을 제공해야 합니다.
인증 메커니즘이 자격 증명이 유효하다고 판단하면 사용자에게 애플리케이션에 대한 액세스 권한을 부여하고, 그렇지 않으면 적절한 오류 메시지와 함께 인증 요청을 거부합니다.
일반적인 인증 방법
몇 가지 일반적인 인증 방법은 다음과 같습니다:
- 사용자 아이디 및 비밀번호: 이 인증 방법은 사용자가 신원을 인증하기 위해 유효한 사용자 아이디와 비밀번호를 제공해야 합니다. 사용자가 사용자 아이디와 비밀번호를 제공하면 이 인증 메커니즘은 이를 데이터베이스에 저장된 데이터와 비교하여 일치하는 경우에만 인증 요청을 승인합니다.
- 다단계 인증(MFA): MFA는 여러 인증 메커니즘을 조합하여 사용자를 인증하는 것을 말합니다. MFA를 사용하는 인증 시스템에서 사용자는 두 번 이상 신원을 확인해야 합니다. 예를 들어, 사용자는 사용자 아이디와 비밀번호로 신원을 인증한 후 인증 코드를 입력해야 할 수 있습니다.
- 생체 인증: 생체 인증은 얼굴, 홍채 패턴, 지문 또는 음성 인식과 같은 생물학적 특징에 의존하여 사용자를 인증하는 인증 메커니즘을 말합니다.
- OAuth: OAuth는 사용자가 Facebook 또는 X(이전의 트위터)와 같은 선호하는 OAuth 제공업체에 애플리케이션 액세스 권한을 부여하여 신원을 인증할 수 있는 인증 프로토콜입니다. 사용자가 OAuth를 사용하여 인증을 시도하면 신원 인증을 위해 OAuth 제공업체의 로그인 화면으로 리디렉션됩니다.
- JSON 웹 토큰(JWT): JWT는 일반적으로 서로 다른 당사자 간에 인증 및 권한 부여 세부 정보를 안전하게 전송하는 데 사용되는 휴대 가능하고 URI에 안전한 컴팩트 토큰 형식입니다. JWT를 사용한 인증은 사용자가 자신의 신원을 확인하기 위해 요청에 JWT 액세스 토큰을 전송하는 것을 포함합니다.
Back4app으로 애플리케이션에 사용자 인증 추가하기
Back4app은 서비스형 백엔드(BaaS) 기능을 포함한 다양한 서비스를 제공하는 클라우드 플랫폼입니다. Back4app의 BaaS 옵션은 사용자 인증을 비롯한 다양한 기능을 제공합니다.
Back4app으로 사용자 인증을 구현하려면 몇 가지 단계가 필요합니다. 이 튜토리얼에서는 React를 사용하여 간단한 은행 관리 앱을 빌드하겠습니다.
이 앱은 Back4app 인증 기능을 통합하여 계정을 만들고, 계정에 로그인하고, 현재 로그인 정보에 액세스하고, 로그아웃할 수 있도록 합니다.
React 애플리케이션 만들기
새 React 애플리케이션을 만들려면 Vite를 사용하여 새 React 앱을 스캐폴딩하는 것부터 시작하세요. Vite는 더 빠르고 효율적인 개발 환경을 제공하는 웹 개발 빌드 도구입니다.
터미널에서 다음 명령을 실행하여 새 React 앱을 스캐폴드합니다:
npm init vite
위의 명령을 실행하면 애플리케이션의 이름, 선택한 프레임워크, 사용할 언어 변형을 지정하라는 일련의 메시지가 화면에 표시됩니다.
이렇게요:
위 이미지에서 애플리케이션의 이름은 react-authentication-app, 선택한 프레임워크는 React, 언어 변형은 JavaScript입니다.
그런 다음 아래 명령을 실행하여 현재 디렉터리를 애플리케이션의 디렉터리로 변경하고 필요한 종속성을 설치합니다:
cd react-authentication-app && npm install
다음으로, 아래 명령을 실행하여 애플리케이션에 React 라우터를 설치합니다:
npm install react-router-dom
그런 다음 IDE(통합 개발 환경)에서 React 애플리케이션을 열고 아래 코드 블록으로 내용을 대체하여 main.jsx 파일을 수정합니다.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
)
이 코드 블록은 react-router-dom브라우저라우터 컴포넌트를 가져와서 앱 컴포넌트를 래핑합니다.
이렇게 하면 전체 애플리케이션에서 라우팅을 사용할 수 있습니다. 앱 컴포넌트에서 애플리케이션의 다양한 경로를 정의합니다.
이렇게요:
import { Route, Routes } from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";
function App() {
return (
<>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="" element={<Signup />}/>
<Route path="/login" element={<Login />}/>
</Routes>
</>
)
}
export default App
위의 코드 블록은 사용자가 URL 경로에 따라 가입, 로그인, 홈 페이지 사이를 이동할 수 있도록 세 개의 개별 경로를 정의합니다.
이제 애플리케이션의 src 디렉터리에 컴포넌트 폴더를 만듭니다. 이 폴더에 Authnavbar.jsx 파일을 만듭니다. 이 컴포넌트에는 가입 및 로그인 페이지에 표시되는 탐색 모음이 포함됩니다.
Authnavbar 컴포넌트에서 다음 코드를 작성합니다:
import React from "react";
import { Link } from "react-router-dom";
function Authnavbar(props) {
return (
<nav>
<h3>Banka</h3>
{props.type === "signup" ? (
<div>
If you already have an account{""}
<Link to="/login" className="link">
Log in
</Link>
</div>
) : props.type === "login"? (
<div>
If you don't have an account{""}
<Link to="/" className="link">
Sign Up
</Link>
</div>
) : null}
</nav>
);
}
export default Authnavbar;
위의 코드 블록은 유형 소품의 값에 따라 조건부 렌더링이 적용된 탐색 모음을 생성하여 사용자가 애플리케이션 내에서 가입 페이지와 로그인 페이지 사이를 이동할 수 있도록 합니다.
그런 다음 애플리케이션의 src 디렉토리에 페이지 폴더를 생성합니다. 이 폴더에 세 개의 컴포넌트를 생성합니다: Home.jsx, Sign-up.jsx, Login.jsx입니다. 이 파일은 홈, 가입 및 로그인 페이지로 사용됩니다.
가입 페이지에는 사용자가 사용자 아이디, 이메일, 비밀번호 등의 세부 정보를 입력할 수 있는 양식이 포함됩니다.
예를 들어
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Signup() {
const [formData, setFormData] = React.useState({
username: "",
email: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "sign-up"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "email"
name= "email"
placeholder= "Email..."
onChange={handleChange}
value={formData.email}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Sign Up</button>
</div>
</form>
</>
);
}
export default Sign-up;
이 코드 블록은 가입 페이지를 나타냅니다. 여기에는 사용자의 사용자 아이디, 이메일, 비밀번호 등의 입력 필드가 있는 양식이 포함되어 있습니다.
사용자 이름, 이메일, 비밀번호 입력 필드의 값을 저장하는 formData 상태도 있습니다. handleChange 함수는 사용자가 입력 필드에 입력할 때마다 formData 상태를 업데이트합니다.
로그인 컴포넌트에서 다음 코드 줄을 작성합니다:
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Login() {
const [formData, setFormData] = React.useState({
username: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "login"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Log In</button>
</div>
</form>
</>
);
}
export default Login;
로그인 페이지는 가입 페이지와 매우 유사하지만 로그인 양식에 이메일 입력란이 없고 formData 개체 상태에 이메일 속성이 없다는 점이 다릅니다.
이제 index.css 파일의 코드를 다음 코드 줄로 대체하여 애플리케이션의 스타일을 지정합니다:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
color: #333333;
background-color: #E8F7F5;
inline-size: 50%;
margin: auto;
font-family: "Montserrat", sans-serif;
}
input{
padding: 0.7rem 1rem;
border-radius: 10px;
border: none;
outline: none;
color: #333333;
background-color: #FFFFFF;
font-family: "Montserrat", sans-serif;
inline-size: 100%;
}
input::placeholder{
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
button{
padding: 0.7rem 1rem;
background-color: #00C3A5;
color: #FFFFFF;
font-family: "Montserrat", sans-serif;
font-size: 14px;
border-radius: 7px;
border: none;
}
form{
margin-block-start: 25%;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.link{
text-decoration: none;
color: #00C3A5;
}
애플리케이션을 스타일링한 후 아래 명령을 실행하여 애플리케이션을 시작합니다:
npm run dev
위의 명령을 실행하면 http://localhost:5173/ 링크가 제공됩니다. 웹 브라우저에서 이 링크로 이동하여 애플리케이션을 확인합니다.
정의한 스타일을 사용하면 가입 페이지가 아래 페이지와 같이 표시되어야 합니다:
로그인 페이지가 아래 이미지와 같이 표시되어야 합니다:
이제 React 애플리케이션을 만들었으므로 인증을 처리할 새 Back4app 애플리케이션을 만들어야 합니다.
새 Back4App 애플리케이션 만들기
Back4app을 사용하려면 계정이 있어야 합니다. 계정이 없는 경우 무료로 가입할 수 있습니다.
이 튜토리얼에서는 Back4app AI 에이전트를 사용하여 새로운 Back4app 애플리케이션을 생성합니다. Back4app AI 에이전트는 프롬프트를 사용하여 Back4app에서 작업을 실행할 수 있도록 도와주는 AI 도우미입니다.
Back4app 계정에 로그인하고 대시보드의 탐색 모음에서 ‘AI 에이전트‘ 버튼을 찾아 클릭합니다(아래 이미지 참조).
Back4app AI 에이전트를 사용하여 애플리케이션을 생성하려면 아래 프롬프트를 입력하세요:
create a new application named react-authentication아래 이미지와 유사한 응답이 표시될 것입니다:
위 이미지에서 볼 수 있듯이 Back4app AI 에이전트는 react-authentication이라는 애플리케이션을 생성했습니다. 이 애플리케이션은 “내 앱” 웹 페이지에서 찾을 수 있습니다.
또는 Back4app의 직관적인 UI(사용자 인터페이스)를 사용하여 새로운 Back4app 애플리케이션을 만들 수도 있습니다.
Back4app의 react-authentication 앱에서 지갑 클래스를 생성합니다. 이 지갑 클래스에는 사용자의 지갑에 대한 중요한 정보가 저장됩니다.
아래 프롬프트에 따라 AI 에이전트로 클래스를 만들 수 있습니다:
Create a Wallet class and add the following fields: balance, owner(relation to the User class indicating which user owns the wallet), createdAt, and updatedAt in the react-authentication appAI 에이전트는 아래 이미지와 같이 지갑 클래스를 생성하는 프로세스를 시작하고 지정된 것을 추가합니다.
React 앱을 Back4app에 연결하기
Back4app 애플리케이션을 생성한 후, Parse SDK를 사용하여 Back4app 애플리케이션을 React 앱에 연결해야 합니다.
아래 명령을 실행하여 애플리케이션에 Parse를 설치하세요:
npm install parse
그런 다음 앱 컴포넌트에서 Parse 객체를 가져오고 Back4app 애플리케이션 키로 구성하여 애플리케이션에서 초기화합니다.
이렇게요:
import Parse from 'parse';
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';
'YOUR_APP_ID' 와 'YOUR_JAVASCRIPT_KEY ‘를 Back4App에서 제공한 각각의 키로 바꿉니다. Back4app AI 에이전트로 앱을 생성한 후 화면에서 앱 키를 찾을 수 있습니다.
애플리케이션에서 항상 환경 변수를 사용하여 키를 올바르게 보호해야 한다는 점에 유의하세요.
Parse SDK를 사용하여 사용자 인증 구현하기
Parse가 초기화되면 이제 React 애플리케이션에서 사용자 인증을 구현할 수 있습니다.
Back4App은 사용자 인증을 위한 사용자 클래스를 자동으로 제공합니다. 이 클래스에는 사용자 이름, 비밀번호, 이메일 등과 같은 기본 필드가 있습니다.
Sign-up 컴포넌트에 다음 코드 줄을 추가하여 React 애플리케이션에서 사용자 등록을 구현하세요.
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const signUpUser = async () => {
try {
const newUser = new Parse.User();
newUser.set("username", formData.username);
newUser.set("email", formData.email);
newUser.set("password", formData.password);
const user = await newUser.signUp();
let Wallet = Parse.Object.extend("Wallet");
let wallet = new Wallet();
let userPointer = {
__type: "Pointer",
className: "_User",
objectId: user.id,
};
wallet.set("owner", userPointer);
wallet.set("balance", 100);
wallet.save();
console.log(`${user} have successfully signed up`);
navigate("/login");
} catch (error) {
console.log("you encountered an error signing up");
}
};
위의 코드 블록은 react-router-dom의 useNavigate 훅을 사용하여 프로그래밍 방식으로 다른 경로로 이동합니다. useNavigate 훅은 navigate 변수에 할당된 탐색 함수를 반환합니다.
signUpUser 함수는 새 사용자 등록을 담당합니다. 이 함수는 Parse.User 메서드를 사용하여 새 Parse User 객체 newUser를 생성하고 사용자 이름, 이메일 및 비밀번호 속성 값을 formData 객체 상태의 해당 속성 값으로 설정합니다. 그런 다음 newUser 객체에서 signUp 메서드를 비동기적으로 호출합니다.
이 코드는 새 사용자를 생성한 후 Parse.Object.extend 메서드를 사용하여 “Wallet”이라는 이름의 Parse 클래스를 정의합니다.
그런 다음 클래스 이름이 _User이고 새로 가입한 사용자의 객체 ID를 가진 사용자에 대한 포인터를 나타내는 userPointer 객체를 생성합니다. 이 코드는 set 메서드를 사용하여 지갑의 소유자를 userPointer 객체로 설정하고 지갑의 초기 잔액을 100으로 설정합니다.
가입에 성공하면 성공 메시지를 기록하고 탐색 기능을 사용하여 로그인 경로로 리디렉션합니다. 가입 중에 오류가 발생하면 이를 포착하여 오류 메시지를 기록합니다.
다음으로 signUpUser 함수를 호출하는 handleSubmit 함수를 만듭니다. onSubmit 이벤트 핸들러를 사용하여 이 함수를 가입 양식에 바인딩합니다.
이렇게 하면 사용자가 가입 양식을 제출할 때 핸들 제출 함수가 자동으로 트리거됩니다.
핸들 제출 함수는 다음과 같이 표시되어야 합니다:
const handleSubmit = (event) => {
event.preventDefault();
signUpUser();
};
사용자 로그인을 구현하기 위해 사용자 로그인 로직을 담고 있는 logInUser 함수를 생성합니다.
아래 코드 블록을 로그인 컴포넌트에 추가합니다:
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const logInUser = async () => {
try {
const user = await Parse.User.logIn(formData.username, formData.password);
console.log("User logged in successfully:", user);
navigate("/home");
} catch (error) {
console.log("Error logging in user:", error);
}
};
const handleSubmit = (event) => {
event.preventDefault();
logInUser();
};
logInUser 함수는 Parse.User 클래스의 logIn 메서드를 비동기적으로 호출하여 formData 개체 상태의 사용자 이름 및 비밀번호 속성 값을 전달합니다.
이 함수는 사용자가 입력한 사용자 이름과 비밀번호가 Back4App의 사용자 클래스에 저장된 사용자 이름과 비밀번호와 일치하는지 확인합니다. 일치하면 사용자가 성공적으로 로그인합니다.
onSubmit 이벤트를 사용하여 handleSubmit 함수를 로그인 양식에 바인딩합니다. handleSubmit 함수는 logInUser 함수를 호출하고 사용자 로그인을 시도합니다.
로그인 후 Parse SDK는 사용자의 세션을 관리합니다. Parse.User.current 메서드를 사용하여 현재 사용자에 액세스할 수 있습니다. 홈 컴포넌트에서 이 메서드를 사용하게 됩니다.
홈 컴포넌트를 열고 다음 코드를 작성합니다:
import React from "react";
import Parse from "parse";
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
const [balance, setBalance] = React.useState(0);
const user = Parse.User.current();
const fetchBalance = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
setBalance(wallet.get("balance"));
};
fetchBalance();
return (
<>
<nav>
<h1 className="title">Banka</h1>
<button>Log out</button>
</nav>
<div className="home">
<p className="top">Welcome {user.get("username")}</p>
<div className="balance-card">
<p>Total Wallet Balance</p>
<h1>{balance}</h1>
<button>Top Up</button>
</div>
<div className="features">
<div className="card">
<p>Pay Bills</p>
</div>
<div className="card">
<p>Airtime/Data</p>
</div>
<div className="card">
<p>Transfers</p>
</div>
<div className="card">
<p>Withdraw</p>
</div>
</div>
</div>
</>
);
}
export default Home;
위의 코드 블록은 애플리케이션의 홈 페이지를 나타냅니다. fetchBalance 함수는 현재 사용자의 지갑 잔액을 가져옵니다.
Parse.Query 메서드를 사용하여 “Wallet” 클래스를 쿼리하고 쿼리에 제약 조건을 설정하여 소유자 속성이 현재 사용자와 같은 지갑을 검색하도록 쿼리 .equalTo 메서드를 사용하여 쿼리에 제약 조건을 설정합니다.
query.first 메서드는 쿼리를 실행하고 쿼리 제약 조건과 일치하는 첫 번째 결과를 반환합니다.
setBalance 함수를 사용하면 지갑 잔액을 잔액 상태로 설정하는 코드입니다. 이 코드는 사용자의 이름과 지갑 잔액을 표시합니다.
코드 블록의 JSX 섹션에서 balance-card 클래스가 있는 div 태그의 ‘ 충전’ 버튼을 찾을 수 있습니다.
이 버튼을 클릭하면 지갑 잔액이 10만큼 증가합니다. 이를 가능하게 하기 위해 잔액을 늘리는 로직이 포함된 충전 함수를 생성합니다.
이렇게요:
const topUp = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
wallet.increment("balance", 10);
const newBalance = await wallet.save();
setBalance(newBalance.get("balance"));
};
이 코드는 Parse 백엔드에서 사용자의 지갑을 가져오고, 증분 메서드를 사용하여 잔액을 10씩 증가시키고, 업데이트된 지갑을 백엔드에 다시 저장하고, 잔액 상태를 업데이트합니다. 클릭 이벤트 핸들러를 사용하여 충전 기능을 ‘충전’ 버튼에 바인딩합니다.
다음으로 홈 컴포넌트에 사용자 로그아웃을 담당하는 로그아웃 사용자 함수를 추가합니다. 함수는 다음과 같이 표시되어야 합니다:
const logOutUser = async () => {
try {
const user = await Parse.User.logOut();
console.log("User logged out successfully:", user);
navigate("/");
} catch (error) {
console.error("Error logging out user:", error);
}
};
logOutUser 함수는 Parse.User 클래스의 logOut 메서드를 비동기적으로 호출하여 현재 사용자를 로그아웃합니다. 클릭 이벤트를 사용하여 로그아웃 사용자 함수를 홈 컴포넌트의 “로그아웃 ” 버튼에 바인딩합니다.
홈 컴포넌트의 스타일을 지정하려면 아래에 정의된 CSS 클래스를 index.css 파일에 추가합니다.
.home{
display: flex;
flex-direction: column;
gap: 3rem;
margin-block-start: 4rem;
}
.title{
text-align: center;
margin-block-start: 2rem;
}
.top{
font-size: 25px;
font-weight: 500;
}
.balance-card{
background-color: #FFFFFF;
inline-size: 40%;
padding: 1rem 2rem;
border-radius: 7px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.features{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.card{
background-color: #FFFFFF;
color: #00C3A5;
margin-block-end: 1rem;
padding: 1rem 2rem;
font-size: 25px;
border-radius: 10px;
}
.card:hover{
opacity: 0.6;
}
애플리케이션 테스트
React 애플리케이션을 빌드하고 Back4app으로 사용자 인증을 구현하는 작업이 완료되었습니다.
다음 단계는 애플리케이션을 테스트하는 것입니다. 이렇게 하려면 웹 브라우저에서 http://localhost:5173/ 링크로 이동하면 가입 페이지가 화면에 표시됩니다.
가입 양식을 작성하여 제출하세요.
가입 후 Back4app의 애플리케이션 대시보드에서 가입이 성공했는지 확인할 수 있습니다. 가입이 성공하면 Back4app이 애플리케이션의 사용자 클래스에 사용자 세부 정보를 추가합니다.
이렇게요:
가입하면 애플리케이션이 로그인 페이지로 리디렉션되며, 여기서 가입 양식에 사용한 사용자 아이디와 비밀번호로 로그인할 수 있습니다.
예를 들어
로그인하면 화면에 홈 페이지가 표시되며, 다음과 같은 화면이 나타납니다:
이제 ‘충전’ 버튼을 클릭하여 잔액을 10만큼 늘립니다.
Back4app에 React 애플리케이션 배포하기
Back4app에 React 애플리케이션을 배포하려면 Back4app의 서비스형 컨테이너(CaaS) 애플리케이션을 사용하게 됩니다.
Back4app의 CaaS를 사용하면 Back4app이 제공하는 클라우드 환경에서 Docker 컨테이너를 배포하고 관리할 수 있습니다.
React 애플리케이션을 배포하기 전에 먼저 애플리케이션을 도커화해야 합니다. 이렇게 하려면 애플리케이션의 루트 디렉토리에 Docker파일을 생성하고 다음 코드 줄을 추가합니다:
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]
이 도커파일은 Node.js 환경을 설정하고, 작업 디렉터리를 만들고, 종속성을 설치하고, 애플리케이션 코드를 복사하고, 포트를 노출하고, 애플리케이션을 실행하는 기본 명령을 지정합니다.
또한 .dockerignore 파일을 만듭니다. .dockerignore 파일에 Docker 이미지를 빌드할 때 컨텍스트에서 제외된 파일과 디렉터리를 추가합니다.
예를 들어
#.dockerignore
node_modules
Vite를 사용하여 React 애플리케이션을 만들었으므로 Docker를 지원하도록 Vite 구성 파일을 업데이트해야 합니다. vite.config.js 파일에서 기존 코드를 아래 코드 블록으로 바꿉니다:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [react()],
server: {
host: true,
strictPort: true,
port: 5173,
},
})
이 코드 블록은 서버가 기본 호스트(일반적으로 로컬 호스트)를 사용하도록 설정합니다. 개발 서버가 수신 대기할 포트 번호를 포트 5173으로 설정하고 지정된 포트를 사용할 수 없는 경우 Vite가 서버를 시작하지 못하도록 합니다.
이제 터미널에서 다음 명령을 실행하여 애플리케이션의 도커 이미지를 빌드할 수 있습니다:
docker build -t quote-generator .
Back4app에 애플리케이션을 배포하기 전에 애플리케이션을 GitHub 계정으로 푸시했는지 확인하세요. 애플리케이션 푸시가 완료되면 GitHub 계정을 Back4app과 통합합니다.
이 작업은 Back4app Github 앱으로 수행할 수 있습니다. GitHub를 Back4app과 통합한 후에는 이제 Back4app AI 에이전트를 사용하여 애플리케이션을 배포할 수 있습니다.
애플리케이션을 배포하려면 아래 프롬프트를 입력합니다:
Deploy my repository <<repository-url>> on Back4app containers
위의 코드 블록에서 repository-url을 애플리케이션의 GitHub 리포지토리 URL로 바꿉니다.
위 이미지와 같이 AI 에이전트와 통신할 때 배포하려는 애플리케이션의 GitHub 리포지토리 링크를 제공하세요.
Back4app의 AI 에이전트가 애플리케이션 배포를 시작한 후 몇 분간 기다린 다음 배포의 현재 상태를 확인합니다.
예를 들어
배포가 성공하면 Back4app AI 에이전트가 애플리케이션의 배포 상태를 “배포됨” 으로 업데이트하고 브라우저에서 애플리케이션에 액세스할 수 있는 링크를 제공합니다.
완성된 앱은 이 GitHub 리포지토리에서, 라이브 앱은 이 URL에서 찾을 수 있습니다.
결론
이 문서에서는 서비스형 백엔드를 사용하여 React 앱에 인증을 추가하는 방법을 설명했습니다.
Back4App을 사용하여 사용자 인증을 React 앱에 통합하는 것은 애플리케이션의 보안과 기능을 크게 향상시키는 간단한 프로세스입니다.
Back4App의 서비스를 활용하면 백엔드 관리 및 인증 작업은 신뢰할 수 있는 플랫폼에 맡기고 뛰어난 사용자 경험을 제공하는 웹 애플리케이션을 구축하는 데 집중할 수 있습니다.
