プロキシ確認ガイド

• プロキシ確認ガイド
  • HTTP通信の確認方法
    • Webブラウザー
    • NPM
    • Nuxt (サーバー側)
    • Git
    • AWS CLI
    • AWS SDK
    • VSCode (Visual Studio Code)
    • Thunder Client
  • Webブラウザーのプロキシの設定
  • NPMのプロキシの設定
  • Nuxtのプロキシの設定
  • Gitのプロキシの設定
  • AWS CLIのプロキシの設定
  • AWS SDKのプロキシの設定
  • VSCodeのプロキシの設定
  • Thunder Clientのプロキシの設定

HTTP通信の確認方法

Webブラウザー

この文が見えていればOKです。

NPM

Step1. Node.jsのインストール

• Node.jsのインストール - Node.jsを使う

Step2. ターミナルでコマンドを実行

ターミナルで次のコマンドを実行して、レジストリとHTTP通信できることを確認します。

npm ping

数秒以内に "npm notice PONG" というメッセージが表示されていればOKです。

"ERROR: connect ECONNREFUSED" など "ERROR" から始まるメッセージが表示される場合はNGです❌

Nuxt (サーバー側)

確認するコマンドはありません。
Nuxtのプロキシの設定後、変更したコードが期待通り動作すればOKです。

Git

Step1. Gitのインストール

• Git for Windows
  • インストール方法
• (Macは最初からインストールされているため不要)

Step2. ターミナルでコマンドを実行

GitがHTTP通信できることを確認します。

GitHubのリポジトリのクローンを行うコマンド:

$ git clone https://github.com/octo-org/octo-template.git
Cloning into 'octo-template'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.

• リポジトリをクローンする - GitHub Docs

期待通りリポジトリがクローンされていればOKです。

"fatal: unable to access" や "Failed to connect to …" というメッセージが表示される場合はNGです❌

リモートリポジトリの一覧を確認するコマンド: git ls-remote

$ cd octo-template
$ git ls-remote
From https://github.com/octo-org/octo-template.git
c85af0e5e5798047462143a13c1b455ee1275a64        HEAD
c85af0e5e5798047462143a13c1b455ee1275a64        refs/heads/main
b9b26d9eaaea5750bf9a937a6683294a3786b449        refs/pull/3/head
8e3150bce9b6af556e6ebd7307db3bfd0d7852db        refs/pull/3/merge

期待通りリモートリポジトリが表示されていればOKです。

"fatal: unable to access" や "Failed to connect to …" というメッセージが表示される場合はNGです❌

AWS CLI

Step1. AWS CLIのインストール

• AWS CLI の最新バージョンを使用してインストールまたは更新を行う - AWS Command Line Interface

Step2. 初期設定

• AWS CLI を設定する - AWS Command Line Interface
• 認証とアクセス認証情報 - AWS Command Line Interface

Step3. ターミナルでコマンドを実行

AWS CLIがHTTP通信できることを確認します。

例えば: S3バケットの一覧を確認するコマンド

aws s3 ls

S3バケットの一覧が期待通り表示されていればOKです。

"Failed to connect to proxy URL:" や "Unable to …" から始まるメッセージが表示される場合はNGです❌

AWS SDK

確認するコマンドはありません。
AWS SDKのプロキシの設定後、変更したコードが期待通り動作すればOKです。

VSCode (Visual Studio Code)

確認するコマンドはありません。
拡張機能のインストールなど期待通り動作すればOKです。

Thunder Client

Step1. インストール

• VSCode: https://code.visualstudio.com/
• Thunder Client: https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client (「拡張機能」>「thunder client」 で検索>「Install」)

Step2. リクエストの編集

• VSCodeを起動 > Thunder Client > [New Request] を選択
• 右側のペイン > [GET] … HTTP メソッドの選択
• 右側のペイン > (その右隣) Enter Url … URL の入力
  • https://www.thunderclient.com/welcome

Step3. リクエストの送信

• 右側のペイン > Send ボタン … リクエストの送信

画面上に "Status: 200 OK" というメッセージが表示されていればOKです。

"Status: ERROR" というメッセージが表示される場合はNGです❌

---

HTTP通信が可能な環境では、以降の設定は不要です。

Webブラウザーのプロキシの設定

• Chrome/Edge/Safari: システムのネットワーク設定から行います。それぞれのOSの設定を確認してください。
  • Windows 11: Windows でプロキシ サーバーを使用する - Microsoft サポート ［スタート］ ボタンを選択し、[設定] > [ネットワークとインターネット] > [プロキシ] >［手動プロキシセットアップ］ で、［プロキシ サーバーを使用］ の横にある ［セットアップ］ を選択 > ［プロキシ サーバーの編集］ ダイアログ ボックス > ［プロキシ サーバーを使用］有効化・［プロキシ IP アドレス］ および ［ポート］ ボックスに、プロキシ サーバー名または IP アドレスとポートをそれぞれのボックスに入力・［ローカル (イントラネット) アドレスにプロキシ サーバーを使用しない] チェック ボックスをオン > [保存] を選択
  • Mac: Macでプロキシサーバ設定を入力する - Apple サポート (日本)
• Firefox: https://support.mozilla.org/ja/kb/connection-settings-firefox

NPMのプロキシの設定

環境変数 HTTP_PROXY と HTTPS_PROXY に適切なプロキシのURLを設定します。

下記ではプロキシのURLの例として http://user:[e-mail]:8080 を示しています。実際の自分の環境に合わせたURLに変更して実行してください。

Windows - PowerShellの場合

$env:HTTP_PROXY="http://user:[e-mail]:8080"
$env:HTTPS_PROXY="http://user:[e-mail]:8080"

Windows - コマンドプロンプトの場合

set HTTP_PROXY=http://user:[e-mail]:8080
set HTTPS_PROXY=http://user:[e-mail]:8080

上記以外 - BashやZshなどの場合

export HTTP_PROXY=http://user:[e-mail]:8080
export HTTPS_PROXY=http://user:[e-mail]:8080

設定を行ったら、通常通り npm コマンドを実行して、エラーが出ないことを確認してみましょう。

Nuxtのプロキシの設定

Step1.
NPMのプロキシの設定と同様に、環境変数 HTTP_PROXY と HTTPS_PROXY を設定します。

Step2.
ofetch undici をインストールします。

npm i ofetch undici

Step3.
EnvHttpProxyAgentを使います。

import { ofetch } from "ofetch";
import { EnvHttpProxyAgent } from "undici";

const envHttpProxyAgent = new EnvHttpProxyAgent()

/** ポケモンの取得 */
export async function findPokemon(name) {
  const pokemon = await ofetch(`https://pokeapi.co/api/v2/pokemon/${name}`, {
    dispatcher: envHttpProxyAgent,
  });
  return pokemon;
};

• https://github.com/unjs/ofetch?tab=readme-ov-file#️-adding-https-agent
• https://undici.nodejs.org/#/docs/api/EnvHttpProxyAgent.md

もし上記でも証明書の検証エラー "unable to get local issuer certificate" が出る場合

BashとZshの場合

export NODE_TLS_REJECT_UNAUTHORIZED=0 

Windows - PowerShellの場合

$env:NODE_TLS_REJECT_UNAUTHORIZED="0"

注意: Node.js 上の通信が中間者攻撃に対して安全でなくなります。潜在的なリスクを理解したうえで自己責任で使用してください！

Gitのプロキシの設定

NPMのプロキシの設定と同様に、環境変数 HTTP_PROXY と HTTPS_PROXY を設定します。

AWS CLIのプロキシの設定

NPMのプロキシの設定と同様に、環境変数 HTTP_PROXY と HTTPS_PROXY を設定します。

• https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-proxy.html

AWS SDKのプロキシの設定

Step1.
NPMのプロキシの設定と同様に、環境変数 HTTP_PROXY と HTTPS_PROXY を設定します。

Step2.
@smithy/node-http-handler と proxy-agent をインストールします。

npm i @smithy/node-http-handler proxy-agent

https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/node-configuring-proxies.html

Step3.
ProxyAgentを使います。

例:

import { S3Client } from "@aws-sdk/client-s3";
import { NodeHttpHandler } from "@smithy/node-http-handler";
import { ProxyAgent } from "proxy-agent";

const agent = new ProxyAgent();
const s3Client = new S3Client({
  requestHandler: new NodeHttpHandler({
    httpAgent: agent,
    httpsAgent: agent,
  }),
});

export default s3Client;

VSCodeのプロキシの設定

プロキシ環境下で使用する場合、拡張機能のインストールに失敗することがあります。
そういったケースでは、設定 > Http: Proxy (http.proxy) にプロキシのURLを指定すると機能します。

Thunder Clientのプロキシの設定

VSCode の REST API 試験用拡張機能 Thunder Clientをプロキシ環境下で使用する場合、次のようなエラーメッセージと共にlocalhostへのアクセスに失敗する恐れがあります。

Connection was forcibly closed by a peer.

そういったケースでは、設定 > Thunder-client: Exclude Proxy Host List (thunder-client.excludeProxyHostList) > "localhost" のように設定すると、Thunder Clientがlocalhostへ直接アクセスするようになります。

例:

(thunder-client.excludeProxyHostList 設定はここです ↑)