ローカルで開発している時にSSL環境+「webサーバーで静的ファイルを動かしたい」時の役立ちtips。
つまりweb上で、しかもSSLで、ローカルな環境を3分でウェブ上で目視出来ます。
一度構築してしまえば、後々重宝するので便利です。ぶっ壊すのも簡単で、クラウドサーバーも使わないのでクリーンな状態で保てます。
環境
Mac OS mojave10.14.2
Docker version 18.09.0 ←インストールします
ngrok ←インストールします
#もくじ
1.こんな時に使えます
2.準備 インストール編
3.必要なDockerファイル
4.Docker上で既存のコードを動かす
5.ngrokの導入
6.ngrokを動かす
##こんな時に役立ちます
- ローカルで開発しているプロダクトを社内(or社外)の人に共有したい。
- sshで何度も繋ぐの面倒&一々ftpでファイルあげるの面倒＆時間の無駄
- デバッグモードでローカルで自動で反映させたい
- SSL証明書の発行について上司に相談するの後でいいよね。個人開発で使っているxサーバーならこの手順いらないのに
- 汎用的なCORSエラーをクリアにしデバッグが捗ります
とか、さくさくっとUIUXをテストするのに色々と面倒なことが多いので、思い当たる悩みがあれば取り組んでみるといいです。
あとは、この流れでDockerコンテナでデプロイ出来るようになるので後々メンテナンスも楽です。(別環境での差異など気にすることが少なくなるので。。。)
無料で構築出来るのもそうですが、本番や開発環境が汚れないのがいいところでもありますね。
それでは早速本題
#準備編 インストール
本記事では、下記ソフトのインストールを目的としてはいないのでそれぞれ下記の記事を参考に事前にインストールをして下さい。
##Dockerインストール
Dockerインストールメモ
Ngrokインストール
1.Ngrokで会員登録
2.ダッシュボードでダウンロード(unix exe実行ファイルでファイル名はngrok)
3.ダウンロードして解凍したファイルを任意の場所(デスクトップなど)へ
＃準備編 解説
いきなり２つダウンロードしましたが、これらの理解が若干必要(というか、今後も理解しておくと開発が効率的に進む)ので簡単に解説。
###Dockerとは
インフラ関係やDevOps界隈で注目されている技術の一つで、Docker社が開発している、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォームです。
メリット:
- コード化されたファイルを共有することで、どこでも誰でも同じ環境が作れる。
- 作成した環境を配布しやすい。
- スクラップ＆ビルドが容易にできる。
要は、後々の技術的な負債ともなり得る、環境依存を気にせずに開発に取り組める便利なやつです。
参照:Docker入門（第一回）～Dockerとは何か、何が良いのか～
###Ngrokとは
ローカルホストのサービスを手軽にインターネットに公開できる、いわゆるトンネルサーバーで外部からローカルサーバーをウェブアクセス出来るようにしたもの。SSLでのトンネルも作ってくれるので、webhookなんかのデバッグも捗る。
要は、DjangoとかFlaskとかのデフォルトのローカルサーバーをngrokでポート指定するだけでネット上に公開出来る便利なものです。
##やること
今回の場合は、静的ファイルということで
- 静的ファイルをDockerを使って、っnginxサーバーでローカル上のDockerのlinuxで動かす.
- 動的に動くようになったwebアプリをngrokで外部公開
という手順を踏みます。
#本題 必要なDocker構成
Dockerはインストールしているとして、必要なDockerfileを作成します。
今回は、webサーバーとしてnginxを使います。
Dockerfileを作成
DockerfileはDockerコンテナの構成内容をまとめて記述するシンプルなテキスト形式のファイルです。この構成から、Dockerイメージが作成されます。
２行のコードで、Dockerfileという名前で下記を記述し保存してください。
FROM nginx
COPY . /usr/share/nginx/html
ファイルの保存場所は、index.htmlと同じ場所です。
SPAなどでビルド後のファイルの場合はdist配下でindex.htmlがあるディレクトリと同じ階層に保存します。
参考までに、vue-cliで作成したプロジェクトのDockerfileディレクトリの場所
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ ├── prod.env.js
│ └── test.env.js
├── dist
│ ├── Dockerfile ← *ここに配置
│ ├── index.html
│ └── static
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
│ └── static
├── src
│ ├── App.vue
│ ├── api
│ ├── assets
│ ├── components
│ ├── event.js
│ ├── main.js
│ ├── registerServiceWorker.js
│ ├── router
│ ├── store.js
│ ├── util
│ └── views
├── static
└── test
├── e2e
└── unit
Dockerイメージを作成&実行
DockerfileがあるディレクトリでDockerイメージを作成します。
こんな感じで
$docker build -t [image name] ./
イメージが出来てるか確認
$docker images
Dockerイメージ[image name]があるのを確認。次はイメージを実行。5000番で
$docker run -d -p 5000:80 [image name]
実行中のコンテナ一覧を表示
$docker ps
#実行中のdockerコンテナをngrokで外部に公開
ngrokがあるディレクトリで,下記を実行して外部公開
./ngrok http 5000
勝手にngrokのサブドメインで立ち上がる。オプションでリージョンなども選べるらしい。
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account XXXXXX (Plan: Free)
Version 2.2.8
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://XXXXX.ngrok.io -> localhost:5000
Forwarding https://XXXXX.ngrok.io -> localhost:5000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
#まとめ
以上で3分くらいでポイ捨てできる外部公開できるローカルからのssl接続環境が出来た。
一々、ngrokで接続するのは面倒なので make run するとngrokまで立ち上げてくれる環境を次は作ってみたい。