홈페이지>프로그래밍 관련>기타 소스코드
다운로드
FX 프라이빗 릴레이

프라이빗 릴레이

릴레이 e2e 테스트

Private Relay는 개인 이메일 주소 대신 사용할 생성된 이메일 주소를 제공합니다.

수신자는 여전히 이메일을 받지만 Private Relay는 개인 이메일 주소를 수집하여 구매, 판매, 거래하거나 다른 데이터와 결합하여 개인적으로 식별, 추적 및/또는 타겟팅하는 것을 방지합니다.

  • 프라이빗 릴레이
    • 개발
      • 요구사항
      • 사이트를 로컬로 설치 및 실행
      • 번역 작업
        • 최신 번역 받기
        • 번역할 메시지 추가/업데이트
        • 릴리스용 번역 커밋
      • 권장 사항: Mozilla 계정 인증 활성화
      • 선택 사항: 추가 기능을 로컬로 설치 및 실행
      • 선택사항: 개발 서버를 실행하여 프런트엔드 컴파일
      • 선택 사항: 프리미엄 기능 활성화
      • 선택사항: JavaScript 번들 크기 디버깅
        • 테스트 프리미엄
    • 생산 환경
      • 요구사항
      • 환경 변수

개발

코드 스타일, 명명 규칙 및 기타 방법론은 당사의 코딩 표준을 참조하세요.

요구사항

  • Python 3.12(venv 권장)
  • PostgreSQL - 개발을 위해 sqlite를 사용하는 경우에도 요구사항.txt는 libpq 및 Python 헤더 파일이 필요한 psycopg2를 설치합니다. 다음이 작동합니다.
    • Windows의 경우
    • 우분투: sudo apt install postgresql libpq-dev python3-dev
    • OSX: brew install postgresql libpq
    • Fedora: sudo dnf install libpq-devel python3-devel
  • 실제 이메일을 보내고 싶다면 SES
  • Volta – 프런트 엔드를 컴파일하는 데 필요한 올바른 버전의 Node 및 npm을 설정합니다.

사이트를 로컬로 설치 및 실행

  1. 복제하고 디렉터리로 변경합니다. 

    git clone --recurse-submodules https://github.com/mozilla/fx-private-relay.git
cd fx-private-relay

  2. 가상 환경 생성 및 활성화:

    Unix 기반 시스템: 

    virtualenv env
source env/bin/activate

    윈도우: 

    python -m venv env
source env/Scripts/activate

    Windows에서 Git Bash를 사용하지 않는 경우 source env/Scripts/activate 입력하는 대신 .envScriptsactivate 입력하세요.

    참고: Windows에서 실행 중이고 컴퓨터에서 스크립트 실행이 비활성화되었다는 오류 메시지가 표시되면 Windows Powershell로 이동하여 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted 입력한 후 다시 시도하세요.

  3. Python 및 노드 요구 사항을 설치합니다. 

    pip install -r requirements.txt
     cd frontend
npm install
cd ../

    참고: Windows에서 실행하는 경우 npm 스크립트에서 환경 변수를 사용하는 데 문제가 발생할 수 있습니다. npm이 git-bash를 사용하도록 강제할 수 있습니다: npm config set script-shell "C:\Program Files\Git\bin\bash.exe" . 이는 기본 위치이므로 설치가 다를 수 있습니다.

  4. decouple 구성을 위해 .env 파일을 복사합니다. 

    cp .env-dist .env

  5. .env 에 SECRET_KEY 값을 추가합니다. 

     SECRET_KEY =secret-key-should-be-different-for-every-install

  6. DB 마이그레이션: 

    python manage.py migrate

  7. 슈퍼유저 생성: 

    python manage.py createsuperuser

  8. 백엔드를 실행합니다. 

    python manage.py runserver

    다른 터미널에서 프런트엔드를 빌드합니다. 

     cd frontend
npm run watch

번역 작업

다음 문서에서는 개발을 시작하고 번역할 새 문자열 생성을 포함합니다. Relay 지역화에 대한 일반적인 정보는 번역 및 지역화를 참조하세요.

최신 번역 받기

번역된 메시지 파일에는 git 하위 모듈을 사용합니다. --recurse-submodules 설치 단계에서는 이미 메시지 파일을 작업 디렉터리로 가져와야 하지만 설치 후에 번역을 업데이트할 수도 있습니다. 가장 쉬운 방법은 다음과 같습니다.

  • git submodule update --remote

git pull 또는 기타 명령을 실행할 때 하위 모듈을 자동으로 업데이트하려면 다음을 수행하세요.

  • git config --global submodule.recurse true

번역할 메시지 추가/업데이트

privaterelay/locales 디렉터리는 다른 디렉터리와 마찬가지로 git 저장소이므로 메시지를 변경하려면 다음을 수행하세요.

  1. 작업하면서 privaterelay/locales/en 에서 필요한 사항을 변경하세요.

  2. cd privaterelay/locales/en

  3. git branch message-updates-yyyymmdd

  4. git push -u origin message-updates-yyyymmdd

그런 다음 message-updates-yyyymmdd 분기에서 l10n repo main 분기로 풀 요청을 열 수 있습니다.

아직 번역을 위해 일부 문자열을 제출할 준비가 되지 않은 경우 임시로 frontend/pendingTranslations.ftl 에 추가할 수 있습니다. 해당 파일의 문자열은 동일한 ID를 가진 문자열이 l10n 저장소에 추가될 때까지 표시됩니다.

마찬가지로, 임시 백엔드 로케일 문자열을 저장할 수 있는 pending_locales/pending.ftl 이 있습니다. l10n 저장소의 풀 요청 문자열이 Relay 저장소에 병합되면 CircleCI 테스트 실패를 방지하기 위해 이러한 각 문자열을 pending_locales/pending.ftl 에서 제거해야 합니다.

릴리스용 번역 커밋

앱 번역에 대한 업데이트를 커밋하려면(예: 출시 전) 이 하위 모듈 업데이트를 커밋해야 합니다. 따라서 업데이트된 번역을 앱에 적용할 준비가 되면 다른 파일과 마찬가지로 하위 모듈을 git add 할 수 있습니다.

  • git add privaterelay/locales

그런 다음 커밋하고 푸시하여 앱 저장소를 번역 하위 모듈의 업데이트된 버전으로 설정할 수 있습니다.

  • git push

자동화된 프로세스는 매일 하위 모듈을 업데이트하여 현지화 팀에서 새로운 변경 사항과 번역을 가져옵니다.

권장 사항: Mozilla 계정 인증 활성화

로컬 서버에서 Mozilla 계정 인증을 활성화하려면 account.stage.mozaws.net에서 "Firefox Private Relay local dev" OAuth 앱을 사용할 수 있습니다.

그렇게 하려면:

  1. .env 파일에서 ADMIN_ENABLED=True 설정하세요.

  2. 실행 중인 경우 서버를 종료하고 다음을 사용하여 관리 테이블을 추가합니다. 

    python manage.py migrate

  3. 이제 /admin 엔드포인트를 사용하여 서버를 실행합니다. 

    python manage.py runserver

  4. 기본 사이트를 변경하려면 django 관리자 페이지로 이동하세요.

  5. example.com 127.0.0.1:8000 으로 변경하고 저장을 클릭합니다.

  6. django-allauth 소셜 앱 관리 페이지로 이동하여 위에서 생성한 수퍼유저 계정으로 로그인하고 Firefox 계정용 소셜 앱을 추가하세요.

필드 값
공급자 모질라 계정
이름 accounts.stage.mozaws.net
클라이언트 ID 9ebfe2c2f9ea3c58
비밀 키 #fx-private-relay-eng Slack 채널에서 요청하세요.
사이트 127.0.0.1:8000 -> 선택된 사이트

이제 FxA를 사용하여 http://127.0.0.1:8000/에 로그인할 수 있습니다.

️ 프로덕션 사이트인 account.firefox.com이 아닌 https://accounts.stage.mozaws.net/의 계정을 사용해야 한다는 점을 기억하세요.

선택 사항: 추가 기능을 로컬로 설치 및 실행

참고: 추가 기능은 별도의 저장소에 있습니다. 시작에 대한 추가 정보는 여기를 참조하세요.

이 부가 기능은 Firefox UI를 추가하여 웹에서 이메일 주소를 생성하고 자동 완성합니다. 추가 기능을 로컬에서 실행하면 프로덕션 서버( relay.firefox.com ) 대신 로컬 서버( 127.0.0.1:8000 )와 통신할 수 있습니다.

선택사항: 개발 서버를 실행하여 프런트엔드 컴파일

npm run watch frontend/src 디렉터리를 감시하고 변경 사항이 감지되면 프런트엔드를 빌드합니다. 그러나 프로덕션 빌드를 만드는 것은 개발 흐름을 방해할 만큼 시간이 많이 걸립니다. 따라서 변경된 모듈만 다시 컴파일하고 프로덕션 최적화를 적용하지 않는 별도의 서버에서 프런트 엔드를 실행할 수도 있습니다. 이렇게 하려면 npm run watch 대신 npm run dev 실행하세요.

이제 http://localhost:3000에서 프런트엔드를 사용할 수 있습니다. 이렇게 하면 로컬 개발 환경이 프로덕션 환경과 덜 비슷해집니다. 특히 인증은 일반적으로 백엔드 서버에 바인딩되므로 별도의 서버에서 프런트엔드를 실행할 때 시뮬레이션이 필요합니다. 인증과 관련된 변경 사항이 있는 경우 npm run watch 사용하여 테스트해야 합니다.

선택 사항: 프리미엄 기능 활성화

참고: 프리미엄 기능은 이메일 주소가 mozilla.com , getpocket.com 또는 mozillafoundation.org 로 끝나는 모든 사용자에게 자동으로 활성화됩니다( emails/models.py 의 PREMIUM_DOMAINS 참조). 고객의 경험을 모방하려면 아래 절차를 따르는 것이 좋습니다.

프리미엄 Relay 기능을 활성화하기 위해 FXA 구독 플랫폼과 통합됩니다. 높은 수준에서 Relay 프리미엄 구독을 설정하려면 다음을 수행합니다.

  1. 위에서 설명한 대로 Mozilla 계정 인증을 활성화합니다.

  2. Stripe 대시보드에서 제품 및 가격을 생성하세요. (Stripe 대시보드에 액세스하려면 #subscription-platform Slack 채널에 문의하세요.)

  3. Relay 무료 사용자를 적절한 SubPlat 구매 흐름에 연결하세요.

  4. subscriptions 필드에 대한 사용자의 FXA 프로필 json을 확인하여 프리미엄 구독 전용 기능에 액세스할 수 있는지 확인하세요.

상세히:

  1. 위에서 설명한 대로 Mozilla 계정 인증을 활성화합니다.

  2. Stripe 대시보드로 이동하세요. (Stripe 대시보드에 액세스하려면 #subscription-platform Slack 채널에 문의하세요.)

  3. Stripe에서 새 제품을 만듭니다.

  4. 필요한 모든 product: 메타데이터)을 추가합니다.

    • 참고: 이 메타데이터의 각 부분에는 product: 접두사가 있어야 합니다. 따라서 예를 들어 webIconURL product:webIconURL 로 입력해야 합니다.

  5. capabilities: 메타데이터.

    • 참고: 이 메타데이터의 각 부분은 capabilities: 와 같은 형식이어야 하며 값은 구독 구매가 사용자에게 제공하는 "기능"을 설명하는 자유 형식 문자열입니다. 예를 들어, premium-relay 값을 가진 capabilities:9ebfe2c2f9ea3c58 입니다.

  6. 위 단계의 값으로 일부 환경 변수를 설정합니다.

바르 값
FXA_SUBSCRIPTIONS_URL https://accounts.stage.mozaws.net/subscriptions
PERIODICAL_PREMIUM_PROD_ID prod_KEq0LXqs7vysQT (스트라이프에서)
PREMIUM_PLAN_ID_US_MONTHLY price_1LiMjeKb9q6OnNsLzwixHuRz (스트라이프에서)
PREMIUM_PLAN_ID_US_YEARLY price_1LiMlBKb9q6OnNsL7tvrtI7y (스트라이프에서)
PHONE_PROD_ID prod_LviM2I0paxH1DZ (스트라이프에서)
PHONE_PLAN_ID_US_MONTHLY price_1LDqw3Kb9q6OnNsL6XIDst28 (스트라이프에서)
PHONE_PLAN_ID_US_YEARLY price_1Lhd35Kb9q6OnNsL9bAxjUGq (스트라이프에서)
BUNDLE_PROD_ID prod_MQ9Zf1cyI81XS2 (스트라이프에서)
BUNDLE_PLAN_ID_US price_1Lwp7uKb9q6OnNsLQYzpzUs5 (스트라이프에서)
SUBSCRIPTIONS_WITH_UNLIMITED "premium-relay" (Stripe에서 사용한 capabilities 값과 일치)
SUBSCRIPTIONS_WITH_PHONE "relay-phones" (Stripe에서 사용한 capabilities 값과 일치)

선택사항: JavaScript 번들 크기 디버깅

frontend/ 에서 npm run build 실행할 때 ANALYZE=true 설정하면 어떤 모듈이 번들 크기의 대부분을 차지하고 있는지 자세히 설명하는 보고서가 생성됩니다. 프런트엔드의 클라이언트와 서버 부분 모두에 대해 보고서가 생성되지만 우리는 클라이언트만 사용하기 때문에 실제로는 그 부분에만 관심이 있습니다. 보고서는 브라우저에서 자동으로 열리며 /frontend/.next/analyze/ 에서도 찾을 수 있습니다. 

ANALYZE=true npm run build

테스트 프리미엄

프리미엄 릴레이 구매를 위한 포괄적인 테스트 사례 문서가 있습니다.

결제 시 Stripe의 테스트 신용카드 정보를 사용할 수 있습니다.

전화 기능은 와플 플래그 phones 로 더욱 보호됩니다. 단계에서 테스트 사용자에게 플래그를 추가하려면 SRE가 필요합니다. 개발 서버에서 개발자는 플래그를 추가할 수 있습니다.

생산 환경

요구사항

개발 요구 사항 외에도 프로덕션 환경에서는 다음을 사용해야 합니다.

  • PostgreSQL 호환 DB

환경 변수

프로덕션 환경에서는 몇 가지 추가 환경 변수도 설정해야 합니다. 

 DATABASE_URL=postgresql://:@:/
DJANGO_SECURE_HSTS_SECONDS=15768000
DJANGO_SECURE_SSL_REDIRECT=True
확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체
사용자 리뷰