Rails API 및 React.js 클라이언트 설정 방법

때로는 처음부터 프로젝트를 만들기 위해 담당자를 확보하거나 향후 코딩 과제를 수행하기 위해 Rails API와 React.js 프런트엔드를 빠르게 가동하고 싶을 수 있습니다. 나는 종종 대부분의 단계를 올바르게 수행하지만 그 중 일부를 잊어버리고 어디가 잘못되었는지 확인하기 위해 Stack Overflow를 샅샅이 뒤져야 합니다. 그래서 여기 미래의 나와 다른 사람들이 프로젝트를 시작하는 데 필요한 모든 것을 도울 수 있는 부분이 있습니다!

참고: 이것은 로컬에 node, npm, yarn, rails 등이 이미 설치되어 있고 Github 계정이 있다고 가정합니다.

반응 클라이언트 만들기

터미널을 사용하여 프로젝트를 저장할 위치로 이동하고 백엔드와 프런트엔드를 보관할 디렉토리를 만들고 다음 명령을 실행합니다.

mkdir new-project
cd new-project

React 프런트엔드 실행을 만들려면 다음을 수행하세요.

npx create-react-app new-project-client

그런 다음 프로젝트가 들어 있는 폴더를 열고 새 React 앱으로 cd할 수 있습니다.

code .
cd new-project-client

다음으로 코드를 Github에 연결해 보겠습니다.

create-react-app 명령은 git 저장소를 초기화해야 하지만 그렇지 않은 경우 터미널에서 수동으로 추가할 수 있습니다.

git init

이제 Github 계정으로 이동하여 오른쪽 상단의 알림 종 옆에 있는 New Repository를 클릭합니다.

리포지토리 만들기 페이지에서 프로젝트 이름을 지정합니다(new-project-client). 이미 옵션을 만들었으므로 어떤 옵션으로도 저장소를 초기화하지 마십시오. 리포지토리 생성을 클릭합니다.

다음으로 다음과 같은 페이지가 표시됩니다.

create-react-app을 사용할 때 초기 커밋 메시지(Create React App을 사용하여 프로젝트 초기화)를 생성하므로 터미널에서 다음 명령 실행으로 건너뛸 수 있습니다.

git remote add origin git@github.com:MMcClure11/new-project-client.git
git push

그런 다음 new-project-client로 이동하여 Github에서 초기 커밋을 볼 수 있습니다.

레일스 API 만들기

이제 두 프로젝트를 모두 포함할 폴더에 있도록 클라이언트 디렉토리에서 cd를 원할 것입니다.

cd ..

Rails 앱을 생성하려면 Heroku와 같은 위치에 배포하려는 경우 api 플래그를 추가하고 데이터베이스를 postgresql로 지정해야 합니다.

rails new new-project-api --api --database=postgresql

*참고: 'new-project-api'는 프로젝트의 레일 부분을 호출하려는 모든 것입니다.

다음으로 git init를 실행하고 초기 커밋을 추가해야 합니다.

git init
git add .
git commit -m "Initial commit."

Github 리포지토리를 생성하려면 위의 단계를 따르십시오. 생성했으면 다음을 실행하십시오.

git remote add origin git@github.com:MMcClure11/new-project-api.git
git push

그런 다음 새 Rails API가 실제로 Github에 있는지 확인하십시오.

다음으로 계속 진행하여 선택한 활성 모델 직렬 변환기 또는 직렬 변환기를 추가하겠습니다.

bundle add active_model_serializers

또한 프런트엔드가 백엔드에 요청할 수 있도록 rack-cors gem의 주석을 제거해야 합니다. (사용자 인증을 추가하려는 경우 비밀번호 보호를 위해 bcrpyt gem에 다시 댓글을 달 수도 있습니다.)

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

그런 다음 터미널에서 다음을 실행합니다.

bundle install

다음으로 config/initializers/cors.rb로 이동하여 cors 미들웨어를 사용하기 위해 rode에 주석을 달아야 합니다.

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000', 'http://localhost:3001', 'http://localhost:3002'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

오리진의 경우 와일드카드인 '*'를 사용할 수 있으며 모든 URL에서 요청을 보낼 수 있습니다. 또는 개발 중에 사용할 로컬 포트를 지정하고 나중에 배포된 URL을 추가할 수도 있습니다.

좋습니다. 이제 API와 클라이언트 구축을 시작할 준비가 모두 끝났습니다! 아래 나열된 블로그는 모델 및 직렬 변환기를 포함하여 API 구축에 대한 자세한 내용을 제공하는 정말 훌륭한 리소스입니다. 도움이 되었기를 바랍니다.

즐거운 코딩하세요!

자원
Spinning up a Rails API