GAミント至上主義

Web Monomaniacal Developer.

GCP HTTPSロードバランサーにGoogleマネージドSSL証明書(β)を使う

βリリースされていることに今更気づきました。
GAEやFirebase HostingでもマネージドSSL証明書は追加されていたのでやっと来たという感じです。

f:id:uyamazak:20181112120529p:plain

ドキュメントはまだ英語のみ?
Creating and Using SSL Certificates  |  Load Balancing  |  Google Cloud


これまでは下記自作のスクリプト+ライブラリと開発サーバーのcronで回してきましたがいらなくなりそう。
GitHub - uyamazak/gcp-ssl-auto-renewer: Auto renew SSL Certificates commands on Google Cloud Platform (GCP).

作成自体もUI(Cloud Console)で出来るようになっていました。

ロードバランサーの詳細」→「編集」→「フロントエンドの設定」→「プロトコル:HTTPS」→「証明書」で新しい証明書を追加できます。

f:id:uyamazak:20181112120521p:plain
f:id:uyamazak:20181112120530p:plain

プロビジョニング(セットアップ)に時間がかかり、その間は無効になってしまうので、稼働中のサービスは切り替えでなく、「その他の証明書」に追加でやればよさそう。
現在テストのため、手動で上げたものを「証明書」に、マネージドを「その他の証明書」追加した。

追加した場合どの証明書が使われるかはよくわからない。さっきブラウザで確認すると、マネージドの方が使われてた。
後日勇気を出してマネージドのみにしてみようと思う(影響の少ないドメインで)。

gcoudコマンドだと下記のような感じでステータスを確認できる。

% gcloud beta compute ssl-certificates list --project=<your-project-name>
NAME                      TYPE          CREATION_TIMESTAMP             EXPIRE_TIME                    MANAGED_STATUS
api-yagish-managed2       MANAGED       2018-11-11T18:39:18.120-08:00  2019-02-09T17:54:58.000-08:00  ACTIVE api.yagish.jp: ACTIVE

Let's Encryptの無料化と自動更新による恩恵は世界中のエンジニアの人件費として金額化したらとてつもないことになりそう。

複数ドメイン

Let's Encryptでは一つの証明書で複数ドメインを扱えるし、Cloud ConsoleのUI上も追加できるようになってるけど
f:id:uyamazak:20181115102408p:plain
追加すると怒られるという謎。今後できるようなるのかもしれない。
現状でも9個まで追加できるみたいなので、ほとんど問題にはならないと思う。

【解決】puppeteerを1.10にするとPDFの日本語が文字化けする問題

2018/11/13 追記 結論

Chromium 72.0.3606.0(Developer Build)を使ったところ直ったので、次のバージョン(1.11)では直るはず。
そのため1.10をスキップするだけで問題は解決しそう。

追記ここまで


yagish履歴書のHTML→PDF変換で使っているpuppeteerのバージョンを1.8.0から1.10.0にしたところ、PDFで日本語が表示できなくなった。
Ubuntu16.04上のDockerで動かしており、puppetter以外の違いはないこと、screenshotの画像は問題なく日本語が表示されるので、フォントのインストールなどは関係なさそう。

github.com

リリース情報を見ると、1.9まではChromium 71、1.10からChromium 72を使うようになったのでそこが原因っぽい。
1.9も試したところ問題なかった。
またChromiumではなく別途インストールしたChrome70を、1.10から使った場合も大丈夫だった。

Releases · GoogleChrome/puppeteer · GitHub

生成されたPDFをChromeで開くと問題なく表示されるが、Acrobatで開くと下記のように警告がでる。

f:id:uyamazak:20181109130551p:plain

PDFへのフォントの埋め込みがうまくいってない?

2018/11/9 14時追記

GihHubのissueを見ていたら文字化けではないけどハングするというのを見つけた。

Puppeteer 1.10.0 hangs When Generating PDF of HTML Drawing Context in Docker Container · Issue #3516 · GoogleChrome/puppeteer · GitHub

引き続き調査中

2018/11/13 追記

puppeteerとChrome側をいくつか差し替えて確認

ということでChromiuimバージョン72が日本語が表示できない原因である確率がかなり高そう。
1.10 + Chromeで動かす選択肢もあるが、バージョンは揃えた方がいいというのもどっかに書いてあったので、puppeteer1.9を指定してインストールして使うのが今のところ一番良さげ。

Chromium 72 をUbuntuの入っているノートPCで動かそうと思ったけど、apt-getだと70しか入れられず、なかなか面倒。

Developer Buildはバージョン72.0.3606.0、ビルド済みで簡単にダウンロード&実行できたので、Yahoo!トップページをPDF化したところ、問題なく日本語フォントは埋め込まれ表示されてた。

Developer Buildは下記ページをブラウザの開発者ツールでUALinuxのものにしたらLinux版がダウンロードできる。
download-chromium.appspot.com

使用したUA

Mozilla/5.0 (X11; Ubuntu; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36

Developer Buildとpuppeteer同梱(72.0.3582.0)は細かいバージョン差があるため、Chromium72自体ではなく、puppeteer1.10との組み合わせの問題なのか、まだ確信が持てない。

そのため下記2つを試す。

  • puppeteer 1.9 + Chromium 72.0.3606.0(Developer Build) → OK
  • puppeteer 1.10 + Chromium 72.0.3606.0(Developer Build) → OK

なんとChromiumを最新の開発版にするだけで直ってしまった。つまりこのバグはChromium(72.0.3582.0)のもので、開発版ではすでに修正されているみたい。
puppeteer 1.11にはこの直ったChromiumが同梱されるはずなので1.10はスルーして1.11を待つことにする。

だいぶ遠回りしたけど、Chromiumのバージョン違いでこんなこともあるんだと勉強になった希ガス

Vueのテンプレートのv-bind内でもJavaScriptのテンプレートリテラルが使えた

v-bind: (省略形は:)内で文字列を連結したいときはこれまで+でがんばってつっくけてたけど、テンプレートリテラルを使えることに気づいた。環境はVue CLI 3。

developer.mozilla.org

before

<img :src="img"
  :alt='format.title + "テンプレート" + index'>

after

<img :src="img"
  :alt='`${format.title}テンプレート ${index}`'></li>

${}の分は増えるけど、クオーテーションを閉じたり、開いたり面倒なのがなくせる。
場合によるけど文章内にいくつか変数を使う場合に便利かも。

バックティック文字「`」(日本語キーボードだとShift + @)だけでは無理で、外側をシングルorダブルクオーテーションで囲む必要がある

だめ

:alt=`${nanika}`

おk

:alt="`${nanika}`"

v-bindについては下記公式
jp.vuejs.org

Python3.6で使えるようになったf-stringと一緒に、良い感じに使いこなしたい。
note.nkmk.me