Flask Webアプリを家庭内・会社内でシェアする方法[macOS10.x/Windows10]

### はじめに
　みなさんこんにちわ。
　Python Webフレームワーク **Flask** でちょこちょこっと作ったWebアプリをローカルドメイン内の家庭内や会社内でシェアするための方法をメモ書きしておきます。

　**Flask** 公式サイトではLinuxまたはMac環境での方法が記載されています。そこで、ここではmacOS10.xに加えて、公式サイトに記載の無いWindows10環境でも筆者が家庭内と会社内で実施した方法を簡単に書いておきます。単なるメモ書きですので間違いや勘違い等あるかもしれませんが、ご容赦ください。

-  **Flask** 公式サイト
    - [Share your Local Server with a Friend](http://flask.pocoo.org/snippets/89/)

　※ちなみに、FlaskはWebアプリのバックエンドでマイクロサービスにも使われるそうです。マイクロサービスというとGo言語をすぐに思い出すのですが、軽量・コンパクトなFlaskはマイクロサービスでも使われるんですね。

### 追記

本記事で紹介させて頂いた方法を使わずに、家庭内・会社内にflask webアプリを公開するには、以下のように **host** と **port** の両パラメータを指定して、**flask run** コマンドを実行します。たったこれだけです。

```bash:ターミナル
(base) macpro:flask teruroom$ flask run --host='0.0.0.0' --port=5000
```

　ここで、 **０.０.０.０** はドメイン内の全てのPC端末等のホストからのアクセスを許可する事を示しています。

　また、ポートはflaskが動いているPCでインバウンド（内向き）に開いていて、かつ、他のWebサーバ等で利用していないポート番号を指定してください。

　確認はflaskが動いているのと別のPC端末やスマホ、タブレットのWebブラウザに以下のURLを入力してください。ここでは、flaskが動作しているPC名を **macpro** とします。

```
http://macpro:5000
```

### Git-Bashをインストールします
- WIndows10の場合のみ

まだインストールされていない方はインストールしてください

### node.jsをインストールします
まだインストールされていない方はインストールしてください

#### macOS10.xの場合

- Homebrewのインストール

```bash:ターミナル
macpro:~ teruroom$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
- nodebrewのインストール

```bash:ターミナル
macpro:~ teruroom$ mkdir -p ~/.nodebrew/src
macpro:~ teruroom$ brew install nodebrew
```

- nodebrewのPATH変数を .bash_profile に設定

```bash:ターミナル
macpro:~ teruroom$ vim ~/.bash_profile
```
```bash:.bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH
```
```bash:ターミナル
macpro:~ teruroom$ source ~/.bash_profile
```

- nodebrewのバージョンを確認

```bash:ターミナル
macpro:~ teruroom$ nodebrew -v
```

- node.jsのインストール

```bash:ターミナル
macpro:~ teruroom$ nodebrew install-binary latest
```

- インストール済のnode.jsのバージョン確認

```bash:
macpro:~ teruroom$ nodebrew list
v12.1.0

current: none
```

- インストール済のnode.jsのバージョンを有効にする

```
macpro:~ teruroom$ nodebrew use v12.1.0
use v12.1.0
```

- node.jsのバージョンの確認

```bash:
macpro:~ teruroom$ node -v
v12.1.0
```

### Anacondaをインストールします
まだインストールされていない方はインストールしてください
### Anaconda Navigatorから**Visual Studio Code**を Lunchします
### サンプルFlaskアプリを作ります
- アプリフォルダ **flask_test** を作ります

**Visual Studio Code**の**TERMINAL**ペイン内の**シェル**で以下のコマンドを入力します

  - macOS10.x

```bash:TERMINAL(bash)
macpro:Dev teruroom$ mkdir flask_test
macpro:Dev teruroom$ cd flask_test/
macpro:flask_test teruroom$ 
```

  - Windows10

```powershell:TERMINAL(powershell)
PS G:\Dev> mkdir flask_test
    ディレクトリ: G:\Dev
Mode                LastWriteTime         Length Name
----                -------------         ------ ----------
d-----       2019/04/20     11:32                flask_test
PS G:\Dev> cd flask_test
PS G:\Dev\flask_test>
```
- **flask_test** フォルダ内に**Visual Studio Code**でFlaskアプリ **appli.py** を実装します

```python:appli.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
  return 'Hello! Flask Web Page via localtunnel'

if __name__ == '__main__':
  app.run()
```

### アプリを実行します

**Visual Studio Code**の**TERMINAL**ペイン内の**シェル**で以下のコマンドを実行します

- macOS10.x

```bash:ターミナル
macpro:flask_test teruroom$ python appli.py
```

- Windows10

```powershell:powershell
PS G:\Dev\flask_test> python appli.py
```
これで5000番ポートでFlaskアプリが実行されました。ローカルPCのWebブラウザから```http://127.0.0.1:5000/```にアクセスすると以下のようにWebブラウザに表示されます

```
'Hello! Flask Web Page via localtunnel'
```
このURL```http://127.0.0.1:5000/```は家庭内や会社内の同じローカルドメイン内であっても他のPCなどからはアクセス拒否されます。そこで、これをローカルドメイン内に シェアします
### クライアント側の"localtunnel"をインストールします

- macOS10.x
  - 新規ターミナルを実行します

```bash:ターミナル(bash)
macpro teruroom$ npm install -g localtunnel
/Users/teruroom/.nodebrew/node/v12.1.0/bin/lt -> /Users/teruroom/.nodebrew/node/v12.1.0/lib/node_modules/localtunnel/bin/client
+ localtunnel@1.9.1
added 55 packages from 34 contributors in 2.161s
```

- Windows10
  - Git-Bashを[管理者として実行]します

```bash:Git-Bash
teruroom@TeruroomPC01 MINGW64 ~
$ npm install -g localtunnel
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\10.15.2\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
C:\Program Files (x86)\Nodist\bin\lt -> C:\Program Files (x86)\Nodist\bin\node_modules\localtunnel\bin\client
C:\Program Files (x86)\Nodist\bin
`-- localtunnel@1.9.1
  +-- axios@0.17.1
  | +-- follow-redirects@1.7.0
  | | `-- debug@3.2.6
  | |   `-- ms@2.1.1
  | `-- is-buffer@1.1.6
  +-- debug@2.6.9
  | `-- ms@2.0.0
  +-- openurl@1.1.1
  `-- yargs@6.6.0
    +-- camelcase@3.0.0
    +-- cliui@3.2.0
    | +-- strip-ansi@3.0.1
    | | `-- ansi-regex@2.1.1
    | `-- wrap-ansi@2.1.0
    +-- decamelize@1.2.0
    +-- get-caller-file@1.0.3
    +-- os-locale@1.4.0
    | `-- lcid@1.0.0
    |   `-- invert-kv@1.0.0
    +-- read-pkg-up@1.0.1
    | +-- find-up@1.1.2
    | | +-- path-exists@2.1.0
    | | `-- pinkie-promise@2.0.1
    | |   `-- pinkie@2.0.4
    | `-- read-pkg@1.1.0
    |   +-- load-json-file@1.1.0
    |   | +-- graceful-fs@4.1.15
    |   | +-- parse-json@2.2.0
    |   | | `-- error-ex@1.3.2
    |   | |   `-- is-arrayish@0.2.1
    |   | +-- pify@2.3.0
    |   | `-- strip-bom@2.0.0
    |   |   `-- is-utf8@0.2.1
    |   +-- normalize-package-data@2.5.0
    |   | +-- hosted-git-info@2.7.1
    |   | +-- resolve@1.10.0
    |   | | `-- path-parse@1.0.6
    |   | +-- semver@5.7.0
    |   | `-- validate-npm-package-license@3.0.4
    |   |   +-- spdx-correct@3.1.0
    |   |   | `-- spdx-license-ids@3.0.4
    |   |   `-- spdx-expression-parse@3.0.0
    |   |     `-- spdx-exceptions@2.2.0
    |   `-- path-type@1.1.0
    +-- require-directory@2.1.1
    +-- require-main-filename@1.0.1
    +-- set-blocking@2.0.0
    +-- string-width@1.0.2
    | +-- code-point-at@1.1.0
    | `-- is-fullwidth-code-point@1.0.0
    |   `-- number-is-nan@1.0.1
    +-- which-module@1.0.0
    +-- y18n@3.2.1
    `-- yargs-parser@4.2.1
```
### ポート"5000"で"localtunnel"を実行します
Flaskアプリの実行URLは```http://127.0.0.1:5000/```ですので、ポート5000番でアクセスできます。そこで、ポート5000番で**localtunnel**を実行します。
また、サブドメイン名を**teruroom**とします

- macOS10.x

```bash:ターミナル
macpro teruroom$ lt --port 5000 --subdomain teruroom
your url is: https://teruroom.localtunnel.me
```

- Windows10

```bash:Git-Bash
teruroom@TeruroomPC01 MINGW64 ~
$ lt --port 5000 --subdomain teruroom
your url is: https://teruroom.localtunnel.me
```

ローカルドメイン内でアクセス可能なURLが表示されます

### Webブラウザでアクセスします
ローカルドメイン環境から"your url is: "以下で表示されたURLにWebブラウザでアクセスします
```
https://teruroom.localtunnel.me
```
ここでローカルドメインとは以下のような環境をさします
- 家庭内の無線LANルータにWiFiで接続されたPC、タブレット、スマートフォンなど
- 会社内の同一ドメイン内のLANに接続されたPC、タブレット、スマートフォンなど

### 実行結果が表示されます
以下のようにWebブラウザに表示されます
```
'Hello! Flask Web Page via localtunnel'
```

### 外部に簡単に公開するには
以下のようにWebルーティングサービス**serveo.net**をSSH接続で経由して外部に公開することもできます。
この場合は外部公開のリスクを考慮して慎重に実施した方がよいと思います。また社内での実施の場合にはPROXYサーバを経由するので公開は無理だとは思いますが、安易な試行は控えた方が賢明です。

```bash:Git-Hub
teruroom@TeruroomPC01 MINGW64 ~
$ ssh -R teruroom.localtunnel.me:80:localhost:5000 serveo.net
The authenticity of host 'serveo.net (159.89.214.31)' can't be established.
RSA key fingerprint is SHA256:07jcXlJ4SkBnyTmaVnmTpXuBiRx2+Q2adxbttO9gt0M.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'serveo.net,159.89.214.31' (RSA) to the list of known hosts.
Hi there
Warning: remote port forwarding failed for listen port 80
Press g to start a GUI session and ctrl-c to quit.
```