Project IDX에서의 풀 스택 개발

11월 07, 2023

Prakhar Srivastav Software Engineer

Kaushik Sathupadi Software Engineer

Kristin Bi Software Engineer

Alex Geboff Technical Writer

저희는 풀 스택 앱 개발의 복잡함을 단순화하고 (백)엔드에서 (프런트)엔드까지의 개발 프로세스를 간소화하기 위해 새로운 브라우저 기반의 실험적인 개발 환경인 Project IDX를 출시했습니다.

저희의 경험 상, 대다수 웹 애플리케이션은 프런트엔드(UI) 레이어와 백엔드 레이어라는 최소한 두 개 이상의 다른 레이어로 구성됩니다. 여러분이 브라우저 기반 개발자 작업공간에서 개발할 앱의 종류를 생각할 때, 아마도 강력하고 완벽하게 작동하는 백엔드가 있는 풀 스택 앱을 곧바로 떠올리진 않을 것입니다. 웹 기반 환경에서 백엔드를 개발하면 이내 그 투박함이 드러나고 비용도 많이 들 수 있습니다. 개발 환경과 프로덕션 환경에 대한 다양한 인증 설정, 백엔드와 프런트엔드 간의 안전한 통신, 완전 자급식(밀폐) 테스트 환경 설정의 복잡성 사이에서 비용과 불편이 가중될 수 있습니다.

많은 분께서 IDX를 직접 사용해 볼 생각에 큰 기대감을 갖고 계시겠지만, 일단은 Project IDX에서의 풀 스택 개발에 대한 이 게시물을 먼저 공유하고 싶었습니다. 웹 기반 작업공간에서 프런트엔드 레이어와 백엔드 레이어를 모두 개발하는 개발자로서 맞닥뜨릴 수 있는 일부 복잡한 상황(개발자 인증, 프런트엔드와 백엔드 간 통신, 밀폐 테스트)과 그 모든 일을 조금 더 수월하게 만들고자 저희가 기울인 노력들을 알려 드리겠습니다. 물론 풀 스택 개발을 더 쉽게 할 수 있도록 저희가 무엇을 구축해야 하는지에 대한 여러분의 의견도 듣고 싶습니다!

간소화된 앱 미리보기

무엇보다도, VM의 백엔드 서비스와의 애플리케이션 프런트엔드 통신을 가능하게 해주는 프로세스를 간소화하여 브라우저에서 풀 스택 애플리케이션을 손쉽게 미리 볼 수 있게 했습니다.

IDX 작업공간은 Google Cloud Workstations를 기반으로 하며 서비스 계정을 통해 연결된 서비스에 안전하게 액세스합니다. 각 작업공간의 고유한 서비스 계정은 애플리케이션 프런트엔드에 대한 원활하고 인증된 미리보기 환경을 지원합니다. 따라서 Project IDX를 사용하면 애플리케이션 미리보기가 작업공간에 직접 내장되며 UI를 미리 보기 위해 다른 인증 경로를 설정할 필요가 없습니다. 현재, IDX는 웹 미리보기만 지원하지만 Android 및 iOS 애플리케이션 미리보기는 가까운 IDX 작업공간에 곧 제공될 예정입니다.

또한 IDX에서 개발 중인 백엔드 API와의 통신이 브라우저 미리보기 외부에서 필요한 경우 이러한 API 백엔드를 호스팅하는 포트에 대한 액세스를 일시적으로 제공하는 몇 가지 메커니즘을 마련해 두었습니다.

간단한 프런트엔드와 백엔드 간 통신

동일한 포트에서 백엔드 레이어와 프런트엔드 레이어를 모두 제공하는 프레임워크를 사용하는 경우 $PORT 플래그를 전달하여 작업공간 구성 파일(Nix로 구동되고 작업공간에 직접 저장됨)에서 사용자 설정 PORT 환경 변수를 사용할 수 있습니다. 이것은 Project IDX에서 기본 설정 흐름의 일부이므로 (구성 파일에서 변수를 설정하는 것 외에) 특별히 다른 작업을 할 필요가 없습니다. 다음은 Nix 기반 구성 파일의 예입니다.

{ pkgs, ... }: {
 
# 참고: 이것은 전체 Nix 구성 예제에서 발췌한 내용입니다.
 
# 미리보기 활성화 및 구성 사용자 설정
idx.previews = {
  enable = true;
  previews = [
    {
      command = [
        "npm"
        "run"
        "start"
        "--"
        "--port"
        "$PORT"
        "--host"
        "0.0.0.0"
        "--disable-host-check"
      ];
      manager = "web";
      id = "web";
    }
  ];
};

그러나 백엔드 서버가 UI 서버와 다른 포트에서 실행 중이라면 다른 전략을 시행해야 합니다. 한 가지 방법은 Vite의 사용자 설정 서버 옵션과 마찬가지로 프런트엔드가 백엔드를 프록시하도록 설정하는 것입니다.

포트 간 통신을 설정하는 또 다른 방법은 UI에서 실행되는 자바스크립트가 AJAX 요청을 사용하여 백엔드 서버와 통신할 수 있도록 코드를 설정하는 것입니다.

백엔드와 프런트엔드를 모두 포함하는 몇 가지 샘플 코드부터 시작해 보겠습니다. 다음은 Express.js로 작성한 백엔드 서버입니다.

import express from "express";
import cors from "cors";
 
 
const app= express();
app.use(cors());
 
app.get("/", (req, res) => {
    res.send("Hello World");
});
 
app.listen(6000, () => {
    console.log("Server is running on port 6000");
})

샘플 코드에서 굵은 글꼴로 표시한 app.use (cors ()); 행은 CORS 헤더를 설정합니다. 설정은 선택한 언어/프레임워크에 따라 다를 수 있지만, 백엔드는 로컬 위치에서 개발하든 IDX에서 개발하든 이러한 헤더를 반환해야 합니다.

IDX 터미널에서 서버를 실행하면 백엔드 포트가 IDX 패널에 표시됩니다. 그리고 서버가 실행되는 모든 포트는 호출할 수 있는 URL에 자동으로 매핑됩니다.

이제 이 서버에 AJAX를 호출하기 위한 클라이언트 코드를 작성해 보겠습니다.

// 이 URL은 백엔드 포트 뷰를 보여주는 측면 패널에서 복사됨
const WORKSPACE_URL = "https://6000-monospace-ksat-web-prod-79679-1677177068249.cluster-lknrrkkitbcdsvoir6wqg4mwt6.cloudworkstations.dev/";
 
async function get(url) {
  const response = await fetch(url, {
    credentials: 'include',
  });
  console.log(response.text());
}
 
// 백엔드 호출
get(WORKSPACE_URL);

또한 fetch() 호출에 자격 증명이 포함되도록 했습니다. IDX URL은 인증이 되므로 자격 증명을 포함해야 합니다. 이렇게 하면 AJAX 호출에는 서버에 대해 인증하기 위한 쿠키가 포함됩니다.

가져오기 대신 XMLHttpRequest를 사용하는 경우 다음과 같이 "withCredentials" 속성을 설정할 수 있습니다.

const xhr = new XMLHttpRequest();
xhr.open("GET", WORKSPACE_URL, true);
xhr.withCredentials = true;
xhr.send(null);

AJAX 호출 수행에 사용하는 클라이언트 라이브러리에 따라 여러분의 실제 코드는 저희가 제공하는 샘플과 다를 수 있습니다. 그럴 경우에는 특정 클라이언트 라이브러리의 설명서에서 자격 증명이 된 요청을 하는 방법을 확인하십시오. 자격 증명이 된 요청만 해야 합니다.

로그인하지 않고 서버 측 테스트

경우에 따라 Google 계정에 로그인하지 않고 Project IDX를 통해 애플리케이션에 액세스하거나 Google 계정에 로그인할 수 없는 환경에서 애플리케이션에 액세스하려고 할 수도 있습니다. 개인 노트북의 명령줄에서 Postman 또는 cURL을 사용하여 IDX에서 개발 중인 API에 액세스하려는 경우를 예로 들 수 있습니다. Project IDX에서 생성된 임시 액세스 토큰을 사용하여 이 작업을 수행할 수 있습니다.

Project IDX에서 실행 중인 서버가 있으면 명령 메뉴를 불러와 액세스 토큰을 생성할 수 있습니다. 이 액세스 토큰은 일시적으로 워크스테이션에 액세스할 수 있게 해주는 단기 토큰입니다.

이 액세스 토큰은 미리보기에서 애플리케이션을 포함하되 이에 국한되지 않는 전체 IDX 작업공간에 대한 액세스를 제공한다는 점을 명심해 주십시오. 그러니 그 누구와도 이 토큰을 공유해서는 안 됩니다. 테스트용으로만 사용하는 것이 좋습니다.

IDX에서 이 명령을 실행하면 액세스 토큰이 대화 상자 창에 표시됩니다. 액세스 토큰을 복사하여 다음과 같이 워크스테이션에서 실행 중인 서비스에 cURL 요청을 하는 데 사용하십시오.

$ export ACCESS_TOKEN=myaccesstoken
$ curl -H "Authorization: Bearer $ACCESS_TOKEN" https://6000-monospace-ksat-web-prod-79679-1677177068249.cluster-lknrrkkitbcdsvoir6wqg4mwt6.cloudworkstations.dev/
Hello world

이제 인증된 서버 환경에서 테스트를 실행할 수 있습니다!

웹 기반의 완전 밀폐 테스트

앞서 강조했듯, IDX를 사용해 완전 자급식의, 인증된, 안전한 환경에서 애플리케이션의 프런트엔드와 백엔드를 테스트할 수 있습니다. 또한 웹 기반 개발 환경에서 로컬 에뮬레이터를 실행하여 애플리케이션의 백엔드 서비스를 테스트할 수도 있습니다.

예를 들어, IDX 작업공간에서 직접 Firebase 로컬 에뮬레이터 도구 모음을 실행할 수 있습니다. 에뮬레이터 도구 모음을 설치하려면 IDX Terminal 탭에서 firebase init emulators를 실행하고 단계를 따라 어떤 포트에 어떤 에뮬레이터를 사용할지 구성하세요.

설치가 완료되면 IDX 터미널에서 로컬 개발 환경에서와 동일한 방식으로 구성하고 사용할 수 있습니다.

다음 단계

보시다시피 Project IDX는 프런트엔드부터 백엔드 그리고 그 사이의 모든 에뮬레이터까지 많은 풀 스택 개발 요구 사항을 충족할 수 있습니다.

이미 Project IDX를 사용 중이라면 소셜 미디어에서 #projectidx 태그를 사용해 Project IDX가 풀 스택 개발에 어떻게 도움이 되었는지 알려주세요. 또는 대기자 명단에 등록하려면 idx.dev를 방문하세요.