はじめに

ローカルで開発しているプログラムに外部からアクセスしたい時にngrokを使うと凄く便利だったので記載します。
今回はsamのHello World Exampleテンプレートを使用してローカル環境を構築し、作成したローカル環境にngrokを使って外部から接続可能な状態にする手順を記載します。
※ sam
※ ngrok

試してみる

ngrokをインストール

$ brew cask install ngrok

samでローカル環境構築

※ samのインストール
インストール手順は省略します。

samの初期設定

$ sam init
Which template source would you like to use?
    1 - AWS Quick Start Templates
    2 - Custom Template Location
Choice: 1

Which runtime would you like to use?
    1 - nodejs12.x
    2 - python3.8
    3 - ruby2.7
    4 - go1.x
    5 - java11
    6 - dotnetcore3.1
    7 - nodejs10.x
    8 - python3.7
    9 - python3.6
    10 - python2.7
    11 - ruby2.5
    12 - java8.al2
    13 - java8
    14 - dotnetcore2.1
Runtime: 4

Project name [sam-app]: ngrok_test

Cloning app templates from https://github.com/awslabs/aws-sam-cli-app-templates.git

AWS quick start application templates:
    1 - Hello World Example
    2 - Step Functions Sample App (Stock Trader)
Template selection: 1

-----------------------
Generating application:
-----------------------
Name: ngrok_test
Runtime: go1.x
Dependency Manager: mod
Application Template: hello-world
Output Directory: .

Next steps can be found in the README file at ./ngrok_test/README.md

samのbuild

$ sam build
Building function 'HelloWorldFunction'
Running GoModulesBuilder:Build

Build Succeeded

Built Artifacts  : .aws-sam/build
Built Template   : .aws-sam/build/template.yaml

Commands you can use next
=========================
[*] Invoke Function: sam local invoke
[*] Deploy: sam deploy --guided

ローカルhttpサーバの作成

$ sam local start-api
Mounting HelloWorldFunction at http://127.0.0.1:3000/hello [GET]
You can now browse to the above endpoints to invoke your functions. You do not need to restart/reload SAM CLI while working on your functions, changes will be reflected instantly/automatically. You only need to restart SAM CLI if you update your AWS SAM template
2021-01-10 14:30:47  * Running on http://127.0.0.1:3000/ (Press CTRL+C to quit)

ローカル動作確認

curlで動作確認

$ curl http://127.0.0.1:3000/hello
Hello

Helloと表示される。

ngrokの実行

ローカルport 3000を外部公開する。

ngrok実行

$ ngrok http 3000

以下のように表示されたら、localhostの3000番に対してURLが発行される。

ngrok実行画面

ngrok by @inconshreveable                                              (Ctrl+C to quit)

Session Status                online
Session Expires               1 hour, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://ce193eaa3848.ngrok.io -> http://localhost:3000
Forwarding                    https://ce193eaa3848.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

上記でForwardingに記載されているURLに外部からアクセスするとlocalhostの3000番にアクセスされるようになっている。

https://ce193eaa3848.ngrok.io/hello

に外部からアクセスを試すとHelloと表示されます。

おわりに

セキュリティ面で注意は必要かと思いますが、外部のシステムから実行されるAPIを開発するときや成果物をレビューする時等に便利だと思いました。

ngrokを使ってローカル環境に外部からアクセス出来るようにする。