Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@teruroom(Teru Room)

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

Last updated at Posted at 2019-04-20

はじめに

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

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

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

追記

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

ターミナル
(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のインストール
ターミナル
macpro:~ teruroom$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • nodebrewのインストール
ターミナル
macpro:~ teruroom$ mkdir -p ~/.nodebrew/src
macpro:~ teruroom$ brew install nodebrew
  • nodebrewのPATH変数を .bash_profile に設定
ターミナル
macpro:~ teruroom$ vim ~/.bash_profile
.bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH
ターミナル
macpro:~ teruroom$ source ~/.bash_profile
  • nodebrewのバージョンを確認
ターミナル
macpro:~ teruroom$ nodebrew -v
  • node.jsのインストール
ターミナル
macpro:~ teruroom$ nodebrew install-binary latest
  • インストール済のnode.jsのバージョン確認
macpro:~ teruroom$ nodebrew list
v12.1.0

current: none
  • インストール済のnode.jsのバージョンを有効にする
macpro:~ teruroom$ nodebrew use v12.1.0
use v12.1.0
  • node.jsのバージョンの確認
macpro:~ teruroom$ node -v
v12.1.0

Anacondaをインストールします

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

Anaconda NavigatorからVisual Studio Codeを Lunchします

サンプルFlaskアプリを作ります

  • アプリフォルダ flask_test を作ります

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

  • macOS10.x
TERMINAL(bash)
macpro:Dev teruroom$ mkdir flask_test
macpro:Dev teruroom$ cd flask_test/
macpro:flask_test teruroom$
  • Windows10
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 を実装します
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
ターミナル
macpro:flask_test teruroom$ python appli.py
  • Windows10
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'

このURLhttp://127.0.0.1:5000/は家庭内や会社内の同じローカルドメイン内であっても他のPCなどからはアクセス拒否されます。そこで、これをローカルドメイン内に シェアします

クライアント側の"localtunnel"をインストールします

  • macOS10.x
    • 新規ターミナルを実行します
ターミナル(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を[管理者として実行]します
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
ターミナル
macpro teruroom$ lt --port 5000 --subdomain teruroom
your url is: https://teruroom.localtunnel.me
  • Windows10
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サーバを経由するので公開は無理だとは思いますが、安易な試行は控えた方が賢明です。

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.
8
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?