目次

https環境下でないとセキュリティ的に実行できない機能のデバッグをローカルなDockerコンテナ上でできなかったが，これができるようになったのでその方法を残しておく．

使用してるDocker image: starefossen/github-pages:latest

これを次のコマンドを実行してコンテナを起動していた．

docker container run -it --rm --name github-pages --mount type=bind,src=$(pwd),dst=/usr/src/app -p "4000:4000" starefossen/github-pages:latest


困った理由

コードブロックや，ページのリンクのコピーを行うボタンをJavascriptで実装しようと思った．

これを実装するために，Clipboard APIのnavigator.clipboard.writeText()を使用しようと考えた．

しかし，これをdockerコンテナ上で立てたサーバー上で試すとエラーになってしまい，デバッグできず，困っていた．

同じ現象: [JS] http環境ではnavigator.clipboard.writeTextがエラーになる

ローカルでデバッグができないので，これまではDocument.execCommand('copy')を非推奨と知りながら仕方なく使っていた．

ただ，いつ使えなくなるのかわからないのでどうにかしなければと思っていた．

まず試したこと

Dockerでローカル開発環境のhttps化 - Qiitaとか，Dockerを使ってHTTPS環境を構築 - Qiitaを見て，httpをhttps-portalを使って，https化する方法をやろうとした．

しかし，そもそもドメインを持っていないので証明書も持っていない，これを本当はオレオレ証明書を発行してくれるっぽいけど使い方もよくわからずでうまくできなかった．

解決した方法

localhostにアクセスすれば許された．

解決するまでの経緯

先述の通り，自分は以下のコマンドでコンテナを起動していた．

docker container run -it --rm --name github-pages --mount type=bind,src=$(pwd),dst=/usr/src/app -p "4000:4000" starefossen/github-pages:latest

上記のコマンドを使ってコンテナを起動して，成功すると以下のメッセージがターミナル上表示される．

Configuration file: /usr/src/app/_config.yml
            Source: /usr/src/app
       Destination: /_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 4.177 seconds.
 Auto-regeneration: enabled for '/usr/src/app'
    Server address: http://0.0.0.0:4000/note/
  Server running... press ctrl-c to stop.

（/note/はディレクトリの名前，あくまで自分の環境の例）

したがって，自分はServer addressに描かれたアドレスhttp://0.0.0.0:4000/note/にアクセスしてデバッグ等を行なっていた．

しかし，このイメージを公開しているGithubのページにいくと，READMEに以下の文言が書かれていた．

Your Jekyll page will be available on http://localhost:4000.

README.md - Starefossen/docker-github-pages

そもそも知識がなさすぎて，localhostにアクセスすれば繋がることさえ知らなかった．

その一方で，localhostがいろいろ許されている話はなんとなく知っていた（Web系の人がむしろ許されすぎてデプロイするときにエラーが起きるので困る的なツイートを見たことがある）のでダメ元でhttp://localhost:4000/note/にアクセスして，navigator.clipboard.writeText()をやってみた．そうしたら実行できた．

おそらく，localhostがhttpsにしか許されていない機能を許しているためと思われる．

感想

ウェブの仕組みの部分の勉強不足感をさらに感じた．基本情報がとれるくらいの知識はつけなければならないなと改めて思った．