⛴ 운영 환경에서 간편한 React 애플리케이션 구축😎

🍟 TL:DR:

만약에 우리가 직접 개발 환경(즉 응용 프로그램을 직접 제공하고 원본 코드를 포함)을 통해react 응용 프로그램을 제공한다면react 응용 프로그램을 제공하는 것은 매우 간단하지만,react 응용 프로그램을 어떻게 묶은 정적 자산(생산 환경에서)으로 제공하는가가 본고의 중점이다.
만약 Create React Application 같은 도구를 대량으로 사용하는 사람이 있다면, 이러한 도구를 깊이 있게 사용하는 것은 상당히 번거로울 수 있다.(마법처럼 일하고 seens 뒤에서 모든 힘든 일을 완성한다).그래서 나는 간단함을 유지할 것이다.
오늘은 단순 react 응용 프로그램을 배치합니다(Node.js 백엔드 사용).최종 프로젝트는 매우 간단하여 다음 생산을 준비하는 응용 프로그램의 기초 템플릿으로 사용할 수 있다.

🏋 Nodejs 프로젝트 시작

우선, 기본 노드 프로그램을 시작할 것입니다. 이것은 우리의 전단 백엔드가 될 것입니다.

npm init --y 

🍩 유틸리티 추가

현재, 우리는express,cors,dotenv 같은 소프트웨어 패키지를 설치할 것이다.나는 Dotenv를 사용하여 전 세계 가치관을 유지한다. 예를 들어 NODE_ENV나 필요한 모든 것을 유지한다.

npm i express dotenv cors --save 

🚀 서버 점화🚀

이제 간단한 색인을 만들 것입니다.js, 클라이언트 응용 프로그램의 API로 사용됩니다.

//--------------------- imports ---------------------
const express = require("express");
require("dotenv").config();
const cors = require("cors");

//--------------------- Init App ---------------------
const app = express();
const PORT = process.env.PORT || 5000;

//--------------------- Serve Assets ---------------------
if (process.env.NODE_ENV === "production") {
  app.use(express.static("build"));
}

app.use(express.json());
app.use(cors());

app.get("/home", function (req, res) {
     res.status(200).json({
     status: true,
     data: "Backend Responded "
     })
})

app.listen(PORT, () => console.log(`Example app running on ${PORT}`));

react 클라이언트에 대해 말하자면, 이것은 매우 간단한 웹 서버이다.
이제 가방에 스크립트를 추가합니다.json.지정된 포트에서 서버가 시작됩니다.

우리는 나중에 그것을 수정하여 클라이언트 구축에 사용할 것입니다.

🎨 프런트엔드 애플리케이션 생성

CRA (React 프로그램 만들기) 를 사용하여react 프로그램을 초기화하거나, 바벨과 웹 패키지나 원하는 도구를 사용해서 설정할 수 있습니다.저는 크라를 더 좋아해요.
백엔드 프로젝트 디렉터리에서 백엔드 프로젝트를 초기화합니다.

npx create-react-app frontend

잠시 후, 우리는 지금 새로운react 응용 프로그램이 생겼다😱신기히😱 아무것도 하지 않는다.
그런 다음 패키지의 컨텐트를 수정합니다.전단 항목의 json을 표시하고 다음 코드를 추가합니다.

  "proxy": "http://localhost:5001"

이것은 aax 호출에서 API URL을 여러 번 입력하는 것을 피하고, 전방 구성 요소에서 호출을 작성할 것입니다.

🛠 구성 요소 작성

구성 요소를 작성하기 전에, 백엔드 통신에 axios를 설치할 것입니다.

cd front end
npm i axios

그리고 테스트와 검증에 사용할 기본 구성 요소를 만듭니다.이렇게 하면 프런트엔드와 백엔드 간의 접속이 확인됩니다.

import axios from "axios";
import { useEffect } from "react";

function App() {
  const fetchData = async () => {
    try {
      let resonse = await axios("/home");
      if (resonse.status) {
        alert("hooray");
      } else {
        alert("OH ! Snap....");
      }
    } catch (err) {
      console.log("err ", err.message);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="App">
      <p > Testing Deployment </p>
    </div>
  );
}

export default App;

이 구성 요소는 데이터 추출과 경보만 실행합니다.여기에서, 우리는 추가 코드 비트가 테스트 목적에만 사용되지 않도록 useffect () 에서 API 호출 함수를 직접 실행합니다.
그런 다음 다음과 같이 백엔드 항목에 스크립트를 추가합니다.

    "client  " : "cd  frontend && npm run start"

이 스크립트는 프로젝트를 실행하고 정상적인 경보를 볼 수 있습니다

🚚 배치 작업

그 전까지는 모든 것이 좋았다.
이제는 정적 자산 서비스로 그것을 배치할 때가 되었다.현재 많은 강좌들이heroku나varcel 등 플랫폼에서 이런 프로젝트를 어떻게 발표하는지 설명하고 있다.아주 좋아요.그러나 이런 플랫폼은 어느 정도 우호적이다.전 남자친구.

Heroku는 무료입니다. 하지만 무료dyno가 한동안 적극적으로 사용되지 않으면 사용하지 않습니다.Sleep dyno를 다시 시작하려면 정상적인 요청에 비해 시간이 상당히 걸릴 수 있습니다.*

이러한 상황을 피하기 위해서, 우리는 최종적으로 비용을 지불하는 서버에서 프로젝트에 서비스를 제공할 것이다. 우리는 이런 방식으로 응용에 서비스를 제공해야 한다.
배치의 경우 Nodejs 백엔드에서 제공하는 정적 패키지를 생성합니다.우리는 이미 색인에 이 부분을 추가했다.js.

이렇게 하면 우리가 언제든지 생산에서 그것을 사용하면, 그것은 예상한 대로 일할 것이다

단계 1 - 번들 생성

패키지에 스크립트를 추가합니다.백엔드 프로젝트의 json,react 소스 코드에서 정적 자산 구축에 사용

    "build" : "cd frontend && npm run build"

현재 작업 디렉터리를 변경한 다음, 전방 항목에/build 폴더를 생성합니다.

2단계 - 루트 폴더에 디렉토리 배치/생성

항목 루트 디렉터리의 생성 디렉터리를 이동합니다.

mv ./build ../

단계 3-NODE ENV를 production으로 설정

그 다음에 마지막 단계는 NODE ENV(.ENV 파일에서)의 값을'production'으로 변경하거나 설정하는 것입니다. 이것은 우리가 생산 모델에 있고 정적 자산 서비스를 사용하는 것을 설명합니다.

NODE_ENV = production

내용.env 파일은 다음과 같습니다

PORT=5001
NODE_ENV=production

지금 URL을 방문하세요

http://localhost:5001/home

결국 모든 것이 정상적으로 작동할 수 있도록 경보 응답을 받을 것입니다.
현재 만약에 우리가 이 Nodejs 프로젝트를 생산이 완료된 클라우드 환경에 배치한다면 예를 들어

AWS EC2 인스턴스

디지털 해양 액적

VM

그러면 이것은 예상한 대로 작용할 것이다.따라서 최종 디렉터리 구조는 다음과 같다

😎 마지막 생각

이것은 React와 Nodejs를 사용하여 만든 전체 창고 프로그램에 서비스를 제공하는 방법 중 하나입니다.내가 이런 프로젝트를 배치할 때, 나는 아직 어떤 전면적인 지침도 찾지 못했기 때문에, 나는 하나를 쓰기로 결정했다.
읽어주셔서 감사합니다.🙏