Phoenix 1.4rcを試す③ ローカルSSL開発編（Gigalixirのオマケ付）

[fukuoka.ex](https://fukuokaex.connpass.com/)代表のpiacereです
今回もご覧いただいて、ありがとうございます:bow:

革新的なアップデートてんこ盛りのPhoenix 1.4.0-rc.xを数回に分けて試す連載です

前回までの記事は、以下になります
　|> [<b>Phoenix 1.4rcを試す① アップデート紹介編</b>](https://qiita.com/piacere_ex/items/34a56a418a99701a0ac1)
　|> [<b>Phoenix 1.4rcを試す② インストール編（不具合時の復旧もあるよ）</b>](https://qiita.com/piacere_ex/items/f4fb3fecb359e798ef01)

今回は、Phoenix 1.4.0の新機能である「Local SSL development」を、Phoenix 1.4.0-rc.1にて試していきます

なお、Phoenixは、ElixirのWebフレームワークです

<br>:stars::stars::stars:<b>　お知らせ：Elixir MeetUpを来週末10/26（金）に開催します（リモート視聴も）　</b>:stars::stars::stars:

[<b>「fukuoka.ex#16：蔵出し始めました！Elixir実践テクニック公開します① 」</b>](https://fukuokaex.connpass.com/event/105154/)を10/26（金）19時に開催します

前回MeetUpの[fukuoka.ex#13](https://fukuokaex.connpass.com/event/89472/)で宣言した通り、参加型重視、かつ上から下までカバーしていく、プログレッシブなスタイルに移行してから、初の開催となります

fukuoka.ex運営メンバーである、fukuoka.exアドバイザーズ／キャストが、過去会で登壇したり、日頃研鑽してきた数々のElixir実践テクニックを、「座談会＋モブプログラミング」という形でダイレクトに伝えていきます

今回は、「Elixir＋Vue.jsで2倍速開発」と「ElixirでElixirコンパイラ開発」の2トラックにて、集まった皆さまと一緒にElixir実践テクニックをシェアしたいと思います

https://fukuokaex.connpass.com/event/105154
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/98aabdbd-8cd7-426b-0062-05d5863ce3b8.png)](https://fukuokaex.connpass.com/event/105154)

私は、「Elixir＋Vue.jsで2倍速開発」のパーソナリティを担当しますが、これは人気連載である、[「Excelから関数型言語マスター」シリーズ](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)の続編でもあります

一応、リモート視聴にも対応していますが、福岡近辺にお住まいの方であれば、遊びに来ていただいて、参加型コンテンツを120%楽しんでいただくのが絶対オススメです

# Phoenix 1.3時よりmixコマンドが拡張されている

[elixir forum](https://elixirforum.com/t/phoenix-1-4-0-rc-0-released/17182)の「Local SSL development」の説明中にも記載されていますが、「mix phx.gen.cert」というものが追加されています

[前回、作成したPhoenix PJ](https://qiita.com/piacere_ex/items/f4fb3fecb359e798ef01)フォルダの配下で、以下コマンドにてmixコマンドの一覧を出すと、確認できます

```
mix help
…
mix phx               # Prints Phoenix help information
mix phx.digest        # Digests and compresses static files
mix phx.digest.clean  # Removes old versions of static assets.
mix phx.gen.cert      # Generates a self-signed certificate for HTTPS testing
mix phx.gen.channel   # Generates a Phoenix channel
…
```

# 「mix phx.gen.cert」を実行する

実行すると、以下のような実行結果が返ってきます

```
mix phx.gen.cert
* creating priv/cert/selfsigned_key.pem
* creating priv/cert/selfsigned.pem

If you have not already done so, please update your HTTPS Endpoint
configuration in config/dev.exs:

  config :phx14_sample, Phx14SampleWeb.Endpoint,
    http: [port: 4000],
    https: [
      port: 4001,
      certfile: "priv/cert/selfsigned.pem",
      keyfile: "priv/cert/selfsigned_key.pem"
    ],
    ...

WARNING: only use the generated certificate for testing in a closed network
environment, such as running a development server on `localhost`.
For production, staging, or testing servers on the public internet, obtain a
proper certificate, for example from [Let's Encrypt](https://letsencrypt.org).

NOTE: when using Google Chrome, open chrome://flags/#allow-insecure-localhost
to enable the use of self-signed certificates on `localhost`.
```

# 自己証明書が生成されている

実行結果の先頭を見ると、priv/cert/配下に、証明書ファイルのようなものが、2ファイル生成されたようなので、確認してみます

```
ls -la priv/cert
total 8
drwxr-xr-x 1 piacere 197609    0 Oct 16 23:49 .
drwxr-xr-x 1 piacere 197609    0 Oct 16 23:49 ..
-rw-r--r-- 1 piacere 197609 1270 Oct 16 23:49 selfsigned.pem
-rw-r--r-- 1 piacere 197609 1676 Oct 16 23:49 selfsigned_key.pem
```

内容は、PEM SSLサーバ証明書と、RSA秘密鍵のようです

```
file priv/cert/selfsigned.pem
priv/cert/selfsigned.pem: PEM certificate

file priv/cert/selfsigned_key.pem
priv/cert/selfsigned_key.pem: PEM RSA private key
```

これらは、「自己証明書」として利用可能です

# SSL設定をdev.exsに追加する

続く実行結果には、config/dev.exsに、SSL設定（SSL用ポート番号、SSL証明書／RSA秘密鍵のファイルパス指定）を追加するよう指示されています

dev.exsのデフォルトで設定されている、4000番ポートの設定を、下記のように上書きします

```elixir:config/dev.exs
use Mix.Config
…
# watchers to your application. For example, we use it
# with webpack to recompile .js and .css sources.
config :phx14_sample, Phx14SampleWeb.Endpoint,
  http: [port: 4000],
  https: [
    port: 4001,
    certfile: "priv/cert/selfsigned.pem",
    keyfile: "priv/cert/selfsigned_key.pem"
  ],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: []
…
```

ここで、SSL用ポート番号は、4001番ポートで設定されます

# SSL用ポートでPhoenixの起動を確認する

以下コマンドでSSL対応済のPhoenixを起動します

```
iex -S mix phx.server
```

以下のログで、通常の4000番ポートだけで無く、SSL対応の4001番ポートも起動されていることが確認できます

```
…
[info] Running Phx14SampleWeb.Endpoint with cowboy 2.5.0 at http://localhost:4000
[info] Running Phx14SampleWeb.Endpoint with cowboy 2.5.0 at https://localhost:4001
Interactive Elixir (1.7.3) - press Ctrl+C to exit (type h() ENTER for help)
iex>
```

ブラウザで「```https://localhost:4000```」をアクセスすると、以下のようなセキュリティ警告画面が出ます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/fc7c6507-42b0-8967-967d-9ed2ddc7ff5c.png)

上記で作成した証明書は、「自己証明書」なので、セキュリティ警告が出るため、localhost限定のセキュリティ解除が必要です

Firefoxだと、上記画面内の「エラー内容」ボタンをクリックし、「例外を追加…」ボタンをクリックします

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/f1abd69a-86a8-e06e-ef16-a342b73d967f.png)

「セキュリティ例外を承認」ボタンをクリックしてください

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/8b2af193-782e-b900-2ed4-bcfdd7f25558.png)

SSL対応されたURLで、Phoenixのトップページが表示できるようになります

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/35c75bad-76d4-bbd2-d242-8da0de4d6663.png)

以降は、セキュリティ警告画面が出ず、SSL対応されたPhoenixが使えるようになり、ローカルSSL開発が可能となりました

# この機能は、ローカル開発環境に限定して使ってください

これで、ローカルSSL開発は可能となった訳ですが、実行結果の末尾を見ると、この機能は、クローズドネットワークの「localhost」で使うようにし、インターネット上の本番環境やステージング環境、テスト環境では、「Let's Encrypt」等の公的な証明書を使うよう警告されています

まぁ、Phoenixに限らず、どのWebサーバでも、同様の話ですね

とはいえ、PhoenixにおけるSSL対応としては、サーバ証明書／RSA秘密鍵の入手が別ルートになり、dev.exsでは無くprod.exsやtest.exsとなるだけで、上記解説したSSL設定のやり方は、同じなので、覚えておいて損は無いです…

…が、[Gigalixir](https://gigalixir.com/)を使うときは、不要になる可能性はあります…

# 参考：Gigalixirでは上記設定も不要でSSL化できます

というのも、[Gigalixir](https://gigalixir.com/)を使うと、設定は一切不要で、最初からSSL化されたURLが利用できます

また、[カスタムドメイン登録のコマンド](https://gigalixir.readthedocs.io/en/latest/main.html#custom-domains)を打つと、Let's Encryptでの証明書発行まで含めて、自動で設定してくれます（DNS側の設定は別途必要ですが）

これらについては、Phoenix 1.4.0ネタとは別なので、別途コラム化したいと思います

# 終わり

今回は、Phoenix 1.4.0の新機能である「Local SSL development」について解説しました

ローカルSSL開発の手順が、mixコマンドに統合されているため、PhoenixにおけるSSL化は、とても気軽に行えて、良い感じですね

# p.s.「いいね」よろしくお願いします

よろしければ、ページ左上の ![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/4d515047-cc48-382e-c2b1-3ad0cc50dbbf.png) や ![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/a4e3da58-70a3-4197-95a2-6a6906650d01.png) のクリックをお願いしますー:bow: