この記事は、dev.toに公開されている英語記事の日本語訳です。
元記事: Testing Stripe samples in your browser with GitHub Codespaces
現代では、ブラウザー上でアプリケーションを開発し、テストすることができるようになりました。クラウドベースの開発環境を瞬時に立ち上げて、ローカル環境の設定なしにブラウザで動作させることが可能です。動作が開始されれば、数回のクリックで他の人とアプリケーションを共有することもできます。コンテナ技術を利用することで、アプリケーションのセットアップが迅速かつ容易になります。つまり、開発環境のセットアップを行う必要がなく、URLを共有するだけで簡単にアプリケーションを他人と共有できるということです。
コミュニティの熱心な努力のおかげで、Stripeのaccept-a-paymentのサンプルコードがGitHub Codespacesで動作するようになりました。
これにより、私たちのサンプルアプリケーションをCodespaceを通じてご自身のブラウザで実行できるようになりました。これは、アプリケーションをローカルマシンにダウンロードする必要がないことを意味します。
この記事では、GitHub Codespacesを使ってこのStripeサンプルアプリケーションをブラウザ上で実行する方法をご紹介します。
必要条件
Codespacesを使用するためには、GitHubアカウントと、このサンプルを使用するためのテストStripeアカウントが必要です。
GitHub Codespacesは個人アカウント向けに無料の使用枠がありますが、GitHub OrganizationやEnterpriseアカウントの一部である場合は、Codespacesの料金設定を確認する必要があります。
最初のコンテナを立ち上げる
このGitHubリポジトリからStripeの例示アプリケーションを数回クリックするだけで立ち上げることができます。
リポジトリのメインページから、「Code」ボタンをクリックしてドロップダウンメニューを開きます。
タブを「Codespaces」に変更し、「Create Codespace on main」ボタンをクリックします。
「Create Codespace on main」ボタンをクリックすると、GitHub Codespaceがアプリケーションプロジェクトをコンテナで立ち上げ、ブラウザ上のエディタでアプリケーションを編集する新しいタブが開きます。
Codespaceでアプリケーションを実行する
ブラウザエディタでは、アプリケーションファイルを開いてターミナル環境でbashコマンドを実行できます。
次に、自分のStripe APIキーを使ってアプリケーションを設定しましょう。
注: この投稿ではNode.jsを使用しますが、他のバックエンド言語も使用可能です。
次のステップでは、Stripeのダッシュボードで「Developers」ページで見つかるStripe APIキーが必要です。
環境変数の例ファイルをコピーするために、ターミナルで次のコマンドを入力します。
cp payment-element/.env.example payment-element/node/.env
エディタで作成された .env ファイルを開き、これらのAPIキーを設定します。
STRIPE_PUBLISHABLE_KEY=pk_test_123...
STRIPE_SECRET_KEY=sk_test_123...
ターミナルでサーバーサイドのデモアプリケーションディレクトリにcdし、npmを使って依存関係をインストールします。
npm install
その後、デモアプリケーションを起動します。
npm start
Codespaceは、新しいタブでアプリケーションを開くポップアップメッセージを表示します。
「ブラウザで開く」ボタンをクリックすると、デモアプリケーションがブラウザに表示されます。
これですべてが完了です！ブラウザで作動するサンプルと開発環境ができました。
Tips: プレビューURLの取得方法
「PORTS」タブで実行中のプレビューURLを見つけることができます。
ブラウザでアプリケーションを変更する
Codespacesでは、ブラウザから直接コードを変更することが容易です。例えば、支払いフォームのスタイルをダークモードに対応させる変更を考えてみましょう。
payment-element/client/html/index.jsファイルを開き、stripe.elements()関数を編集します。
- const elements = stripe.elements({ clientSecret });
+ const elements = stripe.elements({
+ clientSecret,
+ locale: 'en',
+ appearance: {
+ theme: 'night'
+ }
+ });
この変更により、ロケールを英語に設定し、定義済みの「night」テーマを使用するようにPayment Elementに指示します。
この例では、アプリケーション（payment-element/server/node）を再起動する必要がありますので、ターミナルで「Ctrl」キーと「C」キーを押して「npm start」コマンドを停止し、再度「npm start」コマンドを実行します。
チェックアウトフォームの外観が「night」テーマに変更されたことを確認できます。
支払いフォームのカスタマイズに興味がある方は、Appearance APIに関する詳細情報をご覧になれます。
複数のアプリケーションを同時に実行する
上記ではCodespacesでサンプルのフロントエンドを動かす方法を示しましたが、フルスタックの全体像を得たい場合はどうでしょうか？幸い、少しの設定でCodespacesでサンプルのフロントエンドとバックエンドの両方を動かすことが可能です。
ターミナルセクションで「Split Terminal button」をクリックして、新しいターミナルタブを起動します。
新しいターミナルタブをクリックして、クライアントサイドのアプリケーションの準備をします。
クライアントサイドのアプリケーションディレクトリに移動します。例としてpayment-elements/client/react-craに行ってReactアプリケーションをテストしましょう。
cd ../../client/react-cra/
インストールコマンドを実行して依存性をインストールします。
npm install
そして、Reactアプリケーションを開始します。
npm start
ReactアプリケーションのプレビューURLにアクセスするため、新しいウィンドウを開きます。
各プレビューアプリケーションはCodespaceのコンテナ内で接続されているため、別のアプリケーションに接続するためにコードを更新する必要はありません。さらに、環境内で「localhost」ドメインを使い続けることで、フルスタックアプリの全体像を確認することができます。
デモを公開で共有する
プレビューURLはプライベートに保持されるため、権限のないユーザーやログアウトしたユーザーはサインインページにリダイレクトされます。
デモアプリケーションを共有したい場合は、いくつかのステップを踏んでコンテナを公開に設定することができます。
「PORT」タブにアクセスし、公開したいアプリケーションを右クリックします。
「Port Visibility」サブメニューを開き、「Public」を選択します。これで、URLを知っている人なら誰でもアプリケーションにアクセスできます。
「PORT」タブを確認して、アプリケーションの「Visibility」ステータスをチェックします。
Codespaceコンテナの停止と終了
GitHub Codespacesには無料プランがありますが、制限なしの使い放題ではありません。必要なくなったらコンテナを終了しましょう。
既存のコンテナはCodespacesダッシュボードから確認できます：
各コンテナの「...」ボタンをクリックすると、コンテキストメニューが表示され、そこからCodespaceを削除して停止できます。
リポジトリページ自体からもCodespaceを管理することができます：
まとめ
この投稿では、GitHub Codespaces を使用して、ブラウザで支払い受諾 Stripe サンプル開発環境を起動する方法を学びました。
アプリケーションで Codespaces をサポートする方法に興味がある場合は、公式 GitHub ドキュメントから学ぶことができます。
ストライプサンプルリポジトリには、さまざまな言語とユースケースが含まれています。たとえば、Payment 要素の代わりにStripe Checkout を使用することを選択できます。