addons frontend
blog-utils-0.25.0
mozilla/addons-server を補完するフロントエンド インフラストラクチャとコード。
このコードとそれに関連する運用 Web サイトは、Mozilla の Web およびサービスのバグ報奨金プログラムに含まれています。セキュリティの脆弱性を見つけた場合は、プログラムおよび FAQ ページに記載されているプロセスに従って送信してください。このアプリケーションに関する技術的な詳細については、Bug Bounty Onramp ページから入手できます。
セキュリティ関連のバグはすべて、Web セキュリティ バグ フォームを使用して Bugzilla 経由で送信してください。
セキュリティ関連のバグを Github Issue または電子メールで送信しないでください。
開発時に複数のノードのバージョンを管理する最も簡単な方法は、nvm を使用することです。
Windows を使用している場合は、Windows のガイドラインにも必ず従ってください。
yarnと入力してすべての依存関係をインストールしますyarn amo:stageと入力して、ホストされたステージング サーバーに接続するローカル サーバーを起動します。 実行できるコマンドは次のとおりです。
| 指示 | 説明 |
|---|---|
| 糸アモ：オリンピア | ローカルのアドオンサーバー環境からのデータを使用して、開発サーバー/プロキシ (AMO 用) を起動します。 |
| 糸 amo:dev | 開発サーバー (https://addons-dev.allizom.org/) からのデータを使用して、開発サーバー/プロキシ (AMO 用) を起動します。 |
| 糸 amo:dev-https | amo:devと同じですが、HTTPS を使用しており、https://example.com:3000/ で入手できます。この環境のセットアップについて読む |
| 糸アモ:ステージ | ステージング サーバー (https://addons.allizom.org/) からのデータを使用して、開発サーバー/プロキシ (AMO 用) を起動します。 |
| 糸の構築 | アプリを構築します。 |
| 糸の構築-ci | buildおよびbundlewatch npm スクリプトを実行します。 |
| 糸バンドルウォッチ | Bundlewatch を実行して、生成された AMO バンドルのサイズを確認します。最初に AMO を構築する必要があります。 |
| 糸の流れ | フローを実行します。デフォルトでは、これはエラーをチェックして終了します |
| 糸の流れ:チェック | フローエラーを明示的にチェックして終了する |
| 糸の流れ:開発 | フローエラーを継続的にチェックする |
| 糸エスリント | JS のリント |
| 糸開始機能テストサーバー | 機能テスト用の Docker コンテナを開始する |
| 糸のスタイルリント | SCSS をリントする |
| 糸くず | すべての JS + SCSS リンターを実行する |
| 糸がもっときれい | Prettier を実行してコードベース全体を自動的にフォーマットします |
| 糸のきれいな開発 | [Pretty-Quick][] を実行して、変更されたソース ファイルを master ブランチと自動的に比較し、フォーマットします。 |
| 糸プリティア-ci | 一部のコードがフォーマットされずに変更されている場合、Prettier を実行すると失敗する |
| 糸のバージョンチェック | 必要な依存関係があることを確認してください |
| 糸テスト | すべてのテストを実行します ( --watchモードで jest に入ります) |
| 糸のテストデバッグ | 完全なコンソール出力と完全なエラー メッセージを含むすべてのテストを実行します ( --watchモードで jest に入ります)。 |
| 糸テストカバレッジ | すべてのテストを実行し、コード カバレッジ レポートを生成します ( --watchモードで jest に入ります)。 |
| 糸テスト - カバレッジ - 1 回 | すべてのテストを実行し、コード カバレッジ レポートを生成して終了します。 |
| 糸のテストを 1 回 | すべてのテストを実行し、すべての JS + SCSS リンターを実行してから終了します |
| 糸テスト-ci | すべての継続的統合チェックを実行します。これは CI 上でのみ実行することを目的としています。 |
yarn testまたはyarn test-debugと入力すると、対話型 jest モードに入ることができます。これは、新しい機能を開発する最も簡単な方法です。
いくつかのヒントを次に示します。
yarn testほとんどのコンソール出力と詳細なテスト失敗メッセージを非表示にするため、完全なテストスイートを実行する場合に最適です。個々のテストに取り組むときは、多くの場合、 yarn test-debug実行する必要があります。yarn test開始すると、コード エディターに切り替えて、テスト ファイルの追加または既存のコードの変更を開始できます。各ファイルを保存すると、jest は変更したコードに関連するテストのみを実行します。aと入力した場合は、特定のファイルを変更した場合でも、jest はスイート全体を実行し続けます。 oを入力すると、変更しているファイルに関連するテストのみを実行するモードに戻ります。pまたはt入力してテストを名前でフィルターできます。詳細については、こちらをご覧ください。Error watching file for changes: EMFILEのようなメッセージが表示された場合は、 brew install watchman修正できる可能性があります。 jestjs/jest#1767 を参照してください。 デフォルトでは、 yarn test作業中のコードに関連するテストのサブセットのみを実行します。
テストのサブセットを明示的に実行するには、jest watch の使用法で説明されているtまたはp入力します。
あるいは、次のように特定のファイルまたは正規表現を使用してテスト ランナーを開始することもできます。
yarn test tests/unit/amo/components/TestAddon.js
すべてのテストを実行して終了する場合は、次のように入力します。
yarn test-once
テストを実行すると、テスト出力の最後に Eslint エラーのレポートが表示されます。
yarn test
Eslint チェックを行わずにテストを実行したい場合は、環境変数を設定します。
NO_ESLINT=1 yarn test
プログラムの意図を検証するために Flow を使用する場合のサポートは限定的です。
テストを実行すると、テスト出力の最後にフロー エラーのレポートが表示されます。
yarn test
フローチェックを行わずにテストを実行したい場合は、環境変数を設定します。
NO_FLOW=1 yarn test
開発中にファイルを編集しながらフローの問題のみを確認するには、次を実行します。
yarn flow:dev
Flow を初めて使用する場合は、次のヒントを参照してください。
ソース ファイルにフロー カバレッジを追加するには、先頭に/* @flow */コメントを追加します。 Flow にオプトインできるソース ファイルが多ければ多いほど、より良いことになります。
私たちの Flow マニフェストは次のとおりです。
getAllAddonsのような関数がオブジェクト引数を取る場合は、その型オブジェクトGetAllAddonsParamsを呼び出します。例： type GetAllAddonsParams = { |
categoryId : number ,
| } ;
function getAllAddons ( { categoryId } : GetAllAddonsParams = { } ) {
...
}{| key: ... |} ) を介して Exact オブジェクト タイプを使用してください。場合によっては、スプレッド演算子によって「不正確な型は正確な型と互換性がありません」のようなエラーが発生することがありますが、これはバグです。必要に応じて、 src/amo/types/utilのExact<T>回避策を使用できます。これは、$Exact の実用的な代替品として意図されています。 // Imagine this is something like components/ConfirmButton/index.js
import { compose } from 'redux' ;
import * as React from 'react' ;
// This expresses externally used props, i.e. to validate how the app would use <ConfirmButton />
type Props = { |
prompt ?: string | null ,
| } ;
// This expresses internally used props, such as i18n which is injected by translate()
type InternalProps = { |
... Props ,
i18n : I18nType ,
| } ;
export class ConfirmButtonBase extends React . Component < InternalProps > {
render ( ) {
const prompt = this . props . prompt || this . props . i18n . gettext ( 'Confirm' ) ;
return < button > { prompt } < / button > ;
}
}
// This provides a type hint for the final component with its external props.
// The i18n prop is not in external props because it is injected by translate() for internal use only.
const ConfirmButton : React . ComponentType < Props > = compose ( translate ( ) ) (
ConfirmButtonBase ,
) ;
export default ConfirmButton ;Objectやanyようなルーズな型は避けるようにしてください。ただし、他の型に依存する型の宣言に多大な時間を費やしている場合には、自由に使用してください。$FlowFixMeコメントを追加すると、バグに遭遇した場合、またはキーボードに頭をぶつけるような問題に遭遇した場合に、フロー チェックをスキップできます。修正できないと思われる場合は、代わりに$FlowIgnore使用してください。コメントで理論的根拠を説明し、可能であれば GitHub の問題にリンクしてください。yarn flow type-at-pos ...コマンドを使用して、どの型がコードに適用されているかを追跡してみてください。詳細については、 yarn flow -- --help type-at-posを参照してください。私たちは Prettier を使用して JavaScript コードを自動的にフォーマットし、スタイルに関する進行中のすべての議論を停止します。
コード カバレッジのレポートを表示するには、次のように入力します。
yarn test-coverage-once
これにより、コード カバレッジの割合を示すファイルの表が出力されます。カバーされていない行は右側の列に表示されますが、ブラウザで完全なレポートを開くことができます。
open coverage/lcov-report/index.html
プロキシ サーバーは、フロントエンドと同じホスト上で API を使用して AMO アプリを実行するために提供されます。これは、当社の実稼働環境を模倣しています。
次のように、ホストされた API に対して開発を開始します。
yarn amo:dev
これにより、API データにhttps://addons-dev.allizom.org使用するようにプロキシが構成されます。このコマンドは、新しいフロントエンド機能を開発する最も一般的な方法です。サーバーを実行する同様の方法については、上記のコマンドの表を参照してください。
Docker で実行されているローカル API サーバーを使用するには、 yarn amoコマンドを使用できます。ただし、これは現在機能していません。問題-7196を参照してください。
認証は、addons-frontend から開始された場合には機能し、addons-server まで持続しますが、addons-server ページからログインした場合には機能しません。この問題の修正の詳細については、mozilla/addons-server#4684 を参照してください。
yarn amo 、 yarn amo:dev 、またはyarn amo:stageの実行中に設定をオーバーライドする必要がある場合は、まず次のような名前のローカル構成ファイルを作成します。
touch config/local-development.js
設定を変更します。例えば：
module . exports = {
trackingEnabled : true ,
} ;サーバーを再起動して、有効になることを確認します。
構成がどのように適用されるかについて詳しくは、構成ファイルのロード順序に関するドキュメントを参照してください。
Android デバイスでローカル サーバーにアクセスする場合は、いくつかの設定を変更する必要があります。ローカル マシンがネットワーク上の IP アドレス10.0.0.1でアクセスできるとします。次のようにサーバーを起動できます。
API_HOST=http://10.0.0.1:3000
SERVER_HOST=10.0.0.1
WEBPACK_SERVER_HOST=10.0.0.1
yarn amo:dev
Android デバイスで、 http://10.0.0.1:3000の開発サイトにアクセスできます。
注: 現時点では、Mozilla アカウント クライアントがlocalhost:3000にリダイレクトされるため、この構成でサインインすることはできません。 localhost開発マシンを指すようにデバイス上の/etc/hosts編集することで、別のアプローチを試すことができる場合がありますが、これは完全にはテストされていません。
Webpack サーバーを使用してローカルで開発する場合、ランダムに生成されたアセット URL はコンテンツ セキュリティ ポリシー (CSP) に違反し、コンソールがエラーで混乱します。 local-development-amo.jsなどのローカル構成ファイルで CSP をfalseに設定することで、すべての CSP エラーをオフにすることができます。例：
module . exports = {
CSP : false ,
} ;あなたが今読んでいるドキュメントは、Github 風味の Markdown としてソース リポジトリ内に存在します。これらのファイルに変更を加える場合は、プル リクエストを作成してプレビューすることも、グリップを使用して変更をローカルでプレビューすることもできます。 gripをインストールした後、次のようにソース ディレクトリから実行します。
grip .
localhost URL を開くと、レンダリングされたREADME.mdファイルが表示されます。編集すると、自動的に更新されます。
以下は、デプロイメントで使用されるスクリプトです。デプロイメントまたはビルドに関連するものをテストする場合を除き、通常は必要ありません。
環境変数は次のとおりです。
NODE_ENV : ノード環境 ( productionまたはdevelopmentなど)NODE_CONFIG_ENV : ロードする構成の名前 (例: dev 、 stage 、 prod| スクリプト | 説明 |
|---|---|
| 糸のスタート | Express サーバーを起動します (環境変数が必要) |
| 糸の構築 | ライブラリ (すべてのアプリ) をビルドします (環境変数が必要) |
例:アプリの実稼働インスタンスを構築して実行する:
NODE_ENV=production NODE_CONFIG_ENV=prod yarn build
NODE_ENV=production NODE_CONFIG_ENV=prod yarn start
アプリを運用モードでローカルで実行するには、ローカル運用ビルド用の構成ファイルを作成する必要があります。運用ビルドは、 dev 、 stage 、 prod ( NODE_CONFIG_ENV環境変数によって制御される) などのさまざまな環境に対してビルドできますが、これらの環境をローカルで実行するには、追加の構成ファイルが 1 つだけ必要です。
config/local.js.distという名前のファイルの名前をconfig/local.jsに変更します。この後、上で説明したように、 yarn buildとyarn start使用して再ビルドし、再起動します。以前に別の構成で127.0.0.1使用したことがある場合は、必ず Cookie をクリアしてください。アプリケーションは http://127.0.0.1:4000/ から入手できます。
注: 現時点では、この方法を使用してサインインすることはできません。
次のようなリクエストを行うことで、 addons-frontendのどのコミットがデプロイされているか、どの A/B 実験が実行されているか、またはどの機能フラグが有効になっているかを確認できます。
curl https://addons-dev.allizom.org/__frontend_version__
{
"build": "https://circleci.com/gh/mozilla/addons-frontend/10333",
"commit": "47edfa6f24e333897b25516c587f504e294e8fa9",
"experiments": {
"homeHero": true
},
"feature_flags": {
"enableFeatureAMInstallButton": true,
"enableFeatureStaticThemes": true
},
"source": "https://github.com/mozilla/addons-frontend",
"version": ""
}
version.jsonファイルがルート ディレクトリに存在しない場合、415 応答が返されます。このファイルは通常、展開プロセスによって生成されます。
監視スクリプトとの一貫性を保つために、同じデータを次の URL で取得できます。
curl https://addons-dev.allizom.org/__version__
amo-info 拡張機能をインストールすると、この情報を簡単に表示できます。
このプロジェクトにaddons-frontend-blog-utilsという名前のライブラリを構築するコードも含まれており、次のコマンドが提供されます。
yarn build:blog-utils-dev : ライブラリをビルドし、ウォッチャーを開始して変更時にライブラリを再構築し、http://127.0.0.1:11000 で開発ページを提供します。yarn build:blog-utils-prod : 本番モードでライブラリをビルドします。このライブラリは、addons-blog で動作するように専用に設計されています。
addons-frontend-blog-utilsの新しいバージョンを公開するには、特別なタグをメイン リポジトリにプッシュする必要があります。タグ名はblog-utils-で始まる必要があり、通常はバージョン番号が含まれます。これは、次のコマンドを使用して自動化できます。
npm version [major|minor|patch]
このコマンドをmasterブランチから発行すると、 package.json内のバージョンが更新され、コミットが作成され、タグが作成されます。このコミットとタグの両方をメイン リポジトリにプッシュします。
注:新しいaddons-frontend-blog-utilsリリースが addons-blog にマージされる場合は、WordPress テーマの新しいバージョンを公開する必要があります。 addons-blog リポジトリの次の手順に従ってください。
