【ローカル開発】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コンテナでデプロイ出来るようになるので後々メンテナンスも楽です。(別環境での差異など気にすることが少なくなるので。。。)

無料で構築出来るのもそうですが、本番や開発環境が汚れないのがいいところでもありますね。
それでは早速本題

#準備編　インストール
本記事では、下記<bold>ソフトのインストールを目的</bold>としてはいないのでそれぞれ下記の記事を参考に事前にインストールをして下さい。

##Dockerインストール
[Dockerインストールメモ](https://qiita.com/n-yamanaka/items/ddb18943f5e43ca5ac2e)

## Ngrokインストール
1.[Ngrok](https://ngrok.com/)で会員登録
2.ダッシュボードでダウンロード(unix exe実行ファイルでファイル名はngrok)
3.ダウンロードして解凍したファイルを任意の場所(デスクトップなど)へ

＃準備編　解説
いきなり２つダウンロードしましたが、これらの理解が若干必要(というか、今後も理解しておくと開発が効率的に進む)ので簡単に解説。


###Dockerとは
インフラ関係やDevOps界隈で注目されている技術の一つで、Docker社が開発している、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォームです。

メリット:
- コード化されたファイルを共有することで、どこでも誰でも同じ環境が作れる。
- 作成した環境を配布しやすい。
- スクラップ＆ビルドが容易にできる。

要は、後々の技術的な負債ともなり得る、環境依存を気にせずに開発に取り組める便利なやつです。

参照:[Docker入門（第一回）～Dockerとは何か、何が良いのか～](https://knowledge.sakura.ad.jp/13265/)
![VM_Container-768x437.jpg](https://qiita-image-store.s3.amazonaws.com/0/345335/ecefba64-5b5d-e560-8ce3-b73344cfd8ae.jpeg)


###Ngrokとは

ローカルホストのサービスを手軽にインターネットに公開できる、いわゆるトンネルサーバーで外部からローカルサーバーをウェブアクセス出来るようにしたもの。SSLでのトンネルも作ってくれるので、webhookなんかのデバッグも捗る。

要は、DjangoとかFlaskとかのデフォルトのローカルサーバーをngrokでポート指定するだけでネット上に公開出来る便利なものです。
![Architecture-after-Ngrok-deployment.jpg](https://qiita-image-store.s3.amazonaws.com/0/345335/ab4f2146-a845-bed5-96a5-20d1ccc9a0a1.jpeg)

##やること

今回の場合は、静的ファイルということで
- 静的ファイルを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まで立ち上げてくれる環境を次は作ってみたい。