【ローカル開発】webサーバーで静的ファイルをSSLで動かしたい。3分で構築tips

ローカルで開発している時に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という名前で下記を記述し保存してください。

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まで立ち上げてくれる環境を次は作ってみたい。